EXT-js PropertyGrid best practices to achieve an update ?
- by Tom
Hello,
I am using EXT-js for a project, usually everything is pretty straight forward with EXT-js, but with the propertyGrid, I am not sure.
I'd like some advice about this piece of code.
First the store to populate the property grid,
on the load event:
var configStore = new Ext.data.JsonStore({
// store config
autoLoad:true,
url: url.remote,
baseParams : {xaction : 'read'},
storeId: 'configStore',
// reader config
idProperty: 'id_config',
root: 'config',
totalProperty: 'totalcount',
fields: [{
name: 'id_config'
}, {
name: 'email_admin'
}
, {
name: 'default_from_addr'
}
, {
name: 'default_from_name'
}
, {
name: 'default_smtp'
}
],listeners: {
load: {
fn: function(store, records, options){
// get the property grid component
var propGrid = Ext.getCmp('propGrid');
// make sure the property grid exists
if (propGrid) {
// populate the property grid with store data
propGrid.setSource(store.getAt(0).data);
}
}
}
}
});
here is the propertyGrid:
var propsGrid = new Ext.grid.PropertyGrid({
renderTo: 'prop-grid',
id: 'propGrid',
width: 462,
autoHeight: true,
propertyNames: {
tested: 'QA',
borderWidth: 'Border Width'
},
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}
});
So far so good, but with the next button, I'll trigger an old school update,
and my question :
Is that the proper way to update this component ?
Or is it better to user an editor ?
or something else...
for regular grid I use the store methods to do the update, delete,etc...
The examples are really scarce on this one!
Even in books about ext-js!
new Ext.Button({
renderTo: 'button-container',
text: 'Update',
handler: function(){
var grid = Ext.getCmp("propGrid");
var source = grid.getSource();
var jsonDataStr = null;
jsonDataStr = Ext.encode(source);
var requestCg = {
url : url.update,
method : 'post',
params : {
config : jsonDataStr , xaction : 'update'
},
timeout : 120000,
callback : function(options, success, response) {
alert(success + "\t" + response);
}
};
Ext.Ajax.request(requestCg);
}
});
and thanks for reading.
