PDA

View Full Version : Ext.ux.PropertyGridNoSortable



yohendry
19 Aug 2010, 7:36 AM
i needed a property grid that make no sorting and i solve with this

/**
* @class Ext.ux.StoreNoSortable
* @extends Ext.data.Store
* A custom wrapper for the Ext.grid.PropertyGridNoSortable's Ext.data.Store with out sorting. This class handles the mapping
* between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format
* required for compatibility with the underlying store. Generally this class should not need to be used directly --
* the grid's data should be accessed from the underlying store via the store property.
* @constructor
* @param {Ext.grid.Grid} grid The grid this store will be bound to
* @param {Object} source The source data config object
*/

Ext.ux.StoreNoSortable = Ext.extend(Ext.data.Store, {
applySort : Ext.emptyFn
});
/**
* @class Ext.ux.PropertyStoreNoSortable
* @extends Ext.util.Observable
* A custom wrapper for the Ext.ux.PropertyGridNoSortable's Ext.ux.StoreNoSortable. This class handles the mapping
* between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format
* required for compatibility with the underlying store. Generally this class should not need to be used directly --
* the grid's data should be accessed from the underlying store via the store property.
* @constructor
* @param {Ext.grid.Grid} grid The grid this store will be bound to
* @param {Object} source The source data config object
*/

Ext.ux.PropertyStoreNoSortable = function(grid, source){
this.grid = grid;
this.store = new Ext.ux.StoreNoSortable({
recordType : Ext.grid.PropertyRecord
});
this.store.on('update', this.onUpdate, this);
if(source){
this.setSource(source);
}
Ext.ux.PropertyStoreNoSortable.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.PropertyStoreNoSortable, Ext.util.Observable, {
// protected - should only be called by the grid. Use grid.setSource instead.
setSource : function(o){
this.source = o;
this.store.removeAll();
var data = [];
for(var k in o){
if(this.isEditableValue(o[k])){
data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
}
}
this.store.loadRecords({records: data}, {}, true);
},

// private
onUpdate : function(ds, record, type){
if(type == Ext.data.Record.EDIT){
var v = record.data.value;
var oldValue = record.modified.value;
if(this.grid.fireEvent('beforepropertychange', this.source, record.id (http://record.id/), v, oldValue) !== false){
this.source[record.id (http://record.id/)] = v;
record.commit();
this.grid.fireEvent('propertychange', this.source, record.id (http://record.id/), v, oldValue);
}else{
record.reject();
}
}
},

// private
getProperty : function(row){
return this.store.getAt(row);
},

// private
isEditableValue: function(val){
if(Ext.isDate(val)){
return true;
}
return !(Ext.isObject(val) || Ext.isFunction(val));
},

// private
setValue : function(prop, value){
this.source[prop] = value;
this.store.getById(prop).set('value', value);
},

// protected - should only be called by the grid. Use grid.getSource instead.
getSource : function(){
return this.source;
}
});

/**
* @class Ext.ux.PropertyColumnModelNoSortable
* @extends Ext.grid.ColumnModel
* A custom column model for the Ext.ux.PropertyGridNoSortable. Generally it should not need to be used directly.
* make 'sortbale:false' the name column
* @constructor
* @param {Ext.grid.Grid} grid The grid this store will be bound to
* @param {Object} source The source data config object
*/

Ext.ux.PropertyColumnModelNoSortable = function(grid, store){
var g = Ext.grid,
f = Ext.form;

this.grid = grid;
g.PropertyColumnModel.superclass.constructor.call(this, [
{header: this.nameText, width:50, sortable: false, dataIndex:'name', id: 'name', menuDisabled:true},
{header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
]);
this.store = store;

var bfield = new f.Field({
autoCreate: {tag: 'select', children: [
{tag: 'option', value: 'true', html: 'true'},
{tag: 'option', value: 'false', html: 'false'}
]},
getValue : function(){
return this.el.value == 'true';
}
});
this.editors = {
'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
'boolean' : new g.GridEditor(bfield)
};
this.renderCellDelegate = this.renderCell.createDelegate(this);
this.renderPropDelegate = this.renderProp.createDelegate(this);
};

Ext.extend(Ext.ux.PropertyColumnModelNoSortable, Ext.grid.ColumnModel, {
// private - strings used for locale support
nameText : 'Name',
valueText : 'Value',
dateFormat : 'm/j/Y',

// private
renderDate : function(dateVal){
return dateVal.dateFormat(this.dateFormat);
},

// private
renderBool : function(bVal){
return bVal ? 'true' : 'false';
},

// private
isCellEditable : function(colIndex, rowIndex){
return colIndex == 1;
},

// private
getRenderer : function(col){
return col == 1 ?
this.renderCellDelegate : this.renderPropDelegate;
},

// private
renderProp : function(v){
return this.getPropertyName(v);
},

// private
renderCell : function(val){
var rv = val;
if(Ext.isDate(val)){
rv = this.renderDate(val);
}else if(typeof val == 'boolean'){
rv = this.renderBool(val);
}
return Ext.util.Format.htmlEncode(rv);
},

// private
getPropertyName : function(name){
var pn = this.grid.propertyNames;
return pn && pn[name] ? pn[name] : name;
},

// private
getCellEditor : function(colIndex, rowIndex){
var p = this.store.getProperty(rowIndex),
n = p.data.name (http://p.data.name/),
val = p.data.value;
if(this.grid.customEditors[n]){
return this.grid.customEditors[n];
}
if(Ext.isDate(val)){
return this.editors.date;
}else if(typeof val == 'number'){
return this.editors.number;
}else if(typeof val == 'boolean'){
return this.editors['boolean'];
}else{
return this.editors.string;
}
},

// inherit docs
destroy : function(){
Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
for(var ed in this.editors){
Ext.destroy(ed);
}
}
});

/**
* @class Ext.ux.PropertyGridNoSortable
* @extends Ext.grid.PropertyGrid
* Property grid whit out sorting
* */
Ext.ux.PropertyGridNoSortable = Ext.extend(Ext.grid.PropertyGrid, {
addCustomEditor: function(a, b){
this.customEditors[a] = b;
},
initComponent: function(){
this.customEditors = this.customEditors ||
{};
this.customRenderers = this.customRenderers ||
{};
this.lastEditRow = null;
var store = new Ext.ux.PropertyStoreNoSortable(this);
this.propStore = store;
var cm = new Ext.ux.PropertyColumnModelNoSortable(this, store);
this.addEvents('beforepropertychange', 'propertychange');
this.cm (http://this.cm/) = cm;
this.ds = store.store;
Ext.grid.PropertyGrid.superclass.initComponent.call(this);

this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
if (colIndex === 0) {
this.startEditing.defer(200, this, [rowIndex, 1]);
return false;
}
}, this);
}
});

any comment are acepted , sorry my english :D