4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 Roo.grid.PropertyRecord = Roo.data.Record.create([
15 {name:'name',type:'string'}, 'value'
19 Roo.grid.PropertyStore = function(grid, source){
21 this.store = new Roo.data.Store({
22 recordType : Roo.grid.PropertyRecord
24 this.store.on('update', this.onUpdate, this);
26 this.setSource(source);
28 Roo.grid.PropertyStore.superclass.constructor.call(this);
33 Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
34 setSource : function(o){
36 this.store.removeAll();
39 if(this.isEditableValue(o[k])){
40 data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
43 this.store.loadRecords({records: data}, {}, true);
46 onUpdate : function(ds, record, type){
47 if(type == Roo.data.Record.EDIT){
48 var v = record.data['value'];
49 var oldValue = record.modified['value'];
50 if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
51 this.source[record.id] = v;
53 this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
60 getProperty : function(row){
61 return this.store.getAt(row);
64 isEditableValue: function(val){
65 if(val && val instanceof Date){
67 }else if(typeof val == 'object' || typeof val == 'function'){
73 setValue : function(prop, value){
74 this.source[prop] = value;
75 this.store.getById(prop).set('value', value);
78 getSource : function(){
83 Roo.grid.PropertyColumnModel = function(grid, store){
86 g.PropertyColumnModel.superclass.constructor.call(this, [
87 {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
88 {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
91 this.bselect = Roo.DomHelper.append(document.body, {
92 tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
93 {tag: 'option', value: 'true', html: 'true'},
94 {tag: 'option', value: 'false', html: 'false'}
100 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
101 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
102 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
103 'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
104 'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
106 this.renderCellDelegate = this.renderCell.createDelegate(this);
107 this.renderPropDelegate = this.renderProp.createDelegate(this);
110 Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
116 dateFormat : 'm/j/Y',
119 renderDate : function(dateVal){
120 return dateVal.dateFormat(this.dateFormat);
123 renderBool : function(bVal){
124 return bVal ? 'true' : 'false';
127 isCellEditable : function(colIndex, rowIndex){
128 return colIndex == 1;
131 getRenderer : function(col){
133 this.renderCellDelegate : this.renderPropDelegate;
136 renderProp : function(v){
137 return this.getPropertyName(v);
140 renderCell : function(val){
142 if(val instanceof Date){
143 rv = this.renderDate(val);
144 }else if(typeof val == 'boolean'){
145 rv = this.renderBool(val);
147 return Roo.util.Format.htmlEncode(rv);
150 getPropertyName : function(name){
151 var pn = this.grid.propertyNames;
152 return pn && pn[name] ? pn[name] : name;
155 getCellEditor : function(colIndex, rowIndex){
156 var p = this.store.getProperty(rowIndex);
157 var n = p.data['name'], val = p.data['value'];
159 if(typeof(this.grid.customEditors[n]) == 'string'){
160 return this.editors[this.grid.customEditors[n]];
162 if(typeof(this.grid.customEditors[n]) != 'undefined'){
163 return this.grid.customEditors[n];
165 if(val instanceof Date){
166 return this.editors['date'];
167 }else if(typeof val == 'number'){
168 return this.editors['number'];
169 }else if(typeof val == 'boolean'){
170 return this.editors['boolean'];
172 return this.editors['string'];
178 * @class Roo.grid.PropertyGrid
179 * @extends Roo.grid.EditorGrid
180 * This class represents the interface of a component based property grid control.
181 * <br><br>Usage:<pre><code>
182 var grid = new Roo.grid.PropertyGrid("my-container-id", {
190 * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
191 * The container MUST have some type of size defined for the grid to fill. The container will be
192 * automatically set to position relative if it isn't already.
193 * @param {Object} config A config object that sets properties on this grid.
195 Roo.grid.PropertyGrid = function(container, config){
196 config = config || {};
197 var store = new Roo.grid.PropertyStore(this);
199 var cm = new Roo.grid.PropertyColumnModel(this, store);
200 store.store.sort('name', 'ASC');
201 Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
205 enableColumnMove:false,
207 trackMouseOver: false,
210 this.getGridEl().addClass('x-props-grid');
211 this.lastEditRow = null;
212 this.on('columnresize', this.onColumnResize, this);
215 * @event beforepropertychange
216 * Fires before a property changes (return false to stop?)
217 * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
218 * @param {String} id Record Id
219 * @param {String} newval New Value
220 * @param {String} oldval Old Value
222 "beforepropertychange": true,
224 * @event propertychange
225 * Fires after a property changes
226 * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
227 * @param {String} id Record Id
228 * @param {String} newval New Value
229 * @param {String} oldval Old Value
231 "propertychange": true
233 this.customEditors = this.customEditors || {};
235 Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
238 * @cfg {Object} customEditors map of colnames=> custom editors.
239 * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
240 * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
241 * false disables editing of the field.
245 * @cfg {Object} propertyNames map of property Names to their displayed value
249 Roo.grid.PropertyGrid.superclass.render.call(this);
250 this.autoSize.defer(100, this);
253 autoSize : function(){
254 Roo.grid.PropertyGrid.superclass.autoSize.call(this);
256 this.view.fitColumns();
260 onColumnResize : function(){
261 this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
265 * Sets the data for the Grid
266 * accepts a Key => Value object of all the elements avaiable.
267 * @param {Object} data to appear in grid.
269 setSource : function(source){
270 this.store.setSource(source);
274 * Gets all the data from the grid.
275 * @return {Object} data data stored in grid
277 getSource : function(){
278 return this.store.getSource();