201 lines
No EOL
7.4 KiB
HTML
201 lines
No EOL
7.4 KiB
HTML
<html><head><title>PropertyGrid.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>PropertyGrid.js</h1><pre class="highlighted"><code>Ext.grid.PropertyRecord = Ext.data.Record.create([
|
|
{name:'name',type:'string'}, 'value'
|
|
]);
|
|
|
|
Ext.grid.PropertyStore = <b>function</b>(grid, source){
|
|
<b>this</b>.grid = grid;
|
|
<b>this</b>.store = <b>new</b> Ext.data.Store({
|
|
recordType : Ext.grid.PropertyRecord
|
|
});
|
|
<b>this</b>.store.on('update', <b>this</b>.onUpdate, <b>this</b>);
|
|
<b>if</b>(source){
|
|
<b>this</b>.setSource(source);
|
|
}
|
|
Ext.grid.PropertyStore.superclass.constructor.call(<b>this</b>);
|
|
};
|
|
Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
|
|
setSource : <b>function</b>(o){
|
|
<b>this</b>.source = o;
|
|
<b>this</b>.store.removeAll();
|
|
<b>var</b> data = [];
|
|
<b>for</b>(var k <b>in</b> o){
|
|
<b>if</b>(this.isEditableValue(o[k])){
|
|
data.push(<b>new</b> Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
|
|
}
|
|
}
|
|
<b>this</b>.store.loadRecords({records: data}, {}, true);
|
|
},
|
|
|
|
onUpdate : <b>function</b>(ds, record, type){
|
|
<b>if</b>(type == Ext.data.Record.EDIT){
|
|
<b>var</b> v = record.data['value'];
|
|
<b>var</b> oldValue = record.modified['value'];
|
|
<b>if</b>(this.grid.fireEvent('beforepropertychange', <b>this</b>.source, record.id, v, oldValue) !== false){
|
|
<b>this</b>.source[record.id] = v;
|
|
record.commit();
|
|
<b>this</b>.grid.fireEvent('propertychange', <b>this</b>.source, record.id, v, oldValue);
|
|
}<b>else</b>{
|
|
record.reject();
|
|
}
|
|
}
|
|
},
|
|
|
|
getProperty : <b>function</b>(row){
|
|
<b>return</b> this.store.getAt(row);
|
|
},
|
|
|
|
isEditableValue: <b>function</b>(val){
|
|
<b>if</b>(val && val instanceof Date){
|
|
<b>return</b> true;
|
|
}<b>else</b> if(<b>typeof</b> val == 'object' || <b>typeof</b> val == '<b>function</b>'){
|
|
<b>return</b> false;
|
|
}
|
|
<b>return</b> true;
|
|
},
|
|
|
|
setValue : <b>function</b>(prop, value){
|
|
<b>this</b>.source[prop] = value;
|
|
<b>this</b>.store.getById(prop).set('value', value);
|
|
},
|
|
|
|
getSource : <b>function</b>(){
|
|
<b>return</b> this.source;
|
|
}
|
|
});
|
|
|
|
Ext.grid.PropertyColumnModel = <b>function</b>(grid, store){
|
|
<b>this</b>.grid = grid;
|
|
<b>var</b> g = Ext.grid;
|
|
g.PropertyColumnModel.superclass.constructor.call(<b>this</b>, [
|
|
{header: <b>this</b>.nameText, sortable: true, dataIndex:'name', id: 'name'},
|
|
{header: <b>this</b>.valueText, resizable:false, dataIndex: 'value', id: 'value'}
|
|
]);
|
|
<b>this</b>.store = store;
|
|
<b>this</b>.bselect = Ext.DomHelper.append(document.body, {
|
|
tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
|
|
{tag: 'option', value: 'true', html: 'true'},
|
|
{tag: 'option', value: 'false', html: 'false'}
|
|
]
|
|
});
|
|
Ext.id(<b>this</b>.bselect);
|
|
<b>var</b> f = Ext.form;
|
|
<b>this</b>.editors = {
|
|
'date' : <b>new</b> g.GridEditor(<b>new</b> f.DateField({selectOnFocus:true})),
|
|
'string' : <b>new</b> g.GridEditor(<b>new</b> f.TextField({selectOnFocus:true})),
|
|
'number' : <b>new</b> g.GridEditor(<b>new</b> f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
|
|
'boolean' : <b>new</b> g.GridEditor(<b>new</b> f.Field({el:<b>this</b>.beselect,selectOnFocus:true}))
|
|
};
|
|
<b>this</b>.renderCellDelegate = <b>this</b>.renderCell.createDelegate(<b>this</b>);
|
|
<b>this</b>.renderPropDelegate = <b>this</b>.renderProp.createDelegate(<b>this</b>);
|
|
};
|
|
|
|
Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
|
|
nameText : 'Name',
|
|
valueText : 'Value',
|
|
dateFormat : 'm/j/Y',
|
|
renderDate : <b>function</b>(dateVal){
|
|
<b>return</b> dateVal.dateFormat(<b>this</b>.dateFormat);
|
|
},
|
|
|
|
renderBool : <b>function</b>(bVal){
|
|
<b>return</b> bVal ? 'true' : 'false';
|
|
},
|
|
|
|
isCellEditable : <b>function</b>(colIndex, rowIndex){
|
|
<b>return</b> colIndex == 1;
|
|
},
|
|
|
|
getRenderer : <b>function</b>(col){
|
|
<b>return</b> col == 1 ?
|
|
<b>this</b>.renderCellDelegate : <b>this</b>.renderPropDelegate;
|
|
},
|
|
|
|
renderProp : <b>function</b>(v){
|
|
<b>return</b> this.getPropertyName(v);
|
|
},
|
|
|
|
renderCell : <b>function</b>(val){
|
|
<b>var</b> rv = val;
|
|
<b>if</b>(val instanceof Date){
|
|
rv = <b>this</b>.renderDate(val);
|
|
}<b>else</b> if(<b>typeof</b> val == 'boolean'){
|
|
rv = <b>this</b>.renderBool(val);
|
|
}
|
|
<b>return</b> Ext.util.Format.htmlEncode(rv);
|
|
},
|
|
|
|
getPropertyName : <b>function</b>(name){
|
|
<b>var</b> pn = <b>this</b>.grid.propertyNames;
|
|
<b>return</b> pn && pn[name] ? pn[name] : name;
|
|
},
|
|
|
|
getCellEditor : <b>function</b>(colIndex, rowIndex){
|
|
<b>var</b> p = <b>this</b>.store.getProperty(rowIndex);
|
|
<b>var</b> n = p.data['name'], val = p.data['value'];
|
|
<b>if</b>(this.grid.customEditors[n]){
|
|
<b>return</b> this.grid.customEditors[n];
|
|
}
|
|
<b>if</b>(val instanceof Date){
|
|
<b>return</b> this.editors['date'];
|
|
}<b>else</b> if(<b>typeof</b> val == 'number'){
|
|
<b>return</b> this.editors['number'];
|
|
}<b>else</b> if(<b>typeof</b> val == 'boolean'){
|
|
<b>return</b> this.editors['boolean'];
|
|
}<b>else</b>{
|
|
<b>return</b> this.editors['string'];
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.grid.PropertyGrid = <b>function</b>(container, config){
|
|
config = config || {};
|
|
<b>var</b> store = <b>new</b> Ext.grid.PropertyStore(<b>this</b>);
|
|
<b>this</b>.store = store;
|
|
<b>var</b> cm = <b>new</b> Ext.grid.PropertyColumnModel(<b>this</b>, store);
|
|
store.store.sort('name', 'ASC');
|
|
Ext.grid.PropertyGrid.superclass.constructor.call(<b>this</b>, container, Ext.apply({
|
|
ds: store.store,
|
|
cm: cm,
|
|
enableColLock:false,
|
|
enableColumnMove:false,
|
|
stripeRows:false,
|
|
trackMouseOver: false,
|
|
clicksToEdit:1
|
|
}, config));
|
|
<b>this</b>.container.addClass('x-props-grid');
|
|
<b>this</b>.lastEditRow = null;
|
|
<b>this</b>.on('columnresize', <b>this</b>.onColumnResize, <b>this</b>);
|
|
<b>this</b>.addEvents({
|
|
beforepropertychange: true,
|
|
propertychange: true
|
|
});
|
|
<b>this</b>.customEditors = <b>this</b>.customEditors || {};
|
|
};
|
|
Ext.extend(Ext.grid.PropertyGrid, Ext.grid.EditorGrid, {
|
|
render : <b>function</b>(){
|
|
Ext.grid.PropertyGrid.superclass.render.call(<b>this</b>);
|
|
<b>this</b>.autoSize.defer(100, <b>this</b>);
|
|
},
|
|
|
|
autoSize : <b>function</b>(){
|
|
Ext.grid.PropertyGrid.superclass.autoSize.call(<b>this</b>);
|
|
<b>if</b>(this.view){
|
|
<b>this</b>.view.fitColumns();
|
|
}
|
|
},
|
|
|
|
onColumnResize : <b>function</b>(){
|
|
<b>this</b>.colModel.setColumnWidth(1, <b>this</b>.container.getWidth(true)-<b>this</b>.colModel.getColumnWidth(0));
|
|
<b>this</b>.autoSize();
|
|
},
|
|
|
|
setSource : <b>function</b>(source){
|
|
<b>this</b>.store.setSource(source);
|
|
<i>//<b>this</b>.autoSize();</i>
|
|
},
|
|
|
|
getSource : <b>function</b>(){
|
|
<b>return</b> this.store.getSource();
|
|
}
|
|
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |