EXT-js PropertyGrid best practices to achieve an update ?

Question

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.

Answer 1

That should be fine. The PropertyGrid and supporting classes were included early on in Ext, even before a lot of the classes in the current Ext.data.* namespace. It never really got fully updated to match the APIs available on the other standard data classes. The PropertyGrid actually does use a plain Ext.data.Store under the hood to store its data, but the typical store methods and events are not exposed. As such, you'll either have to make do with getSource() or else start doing some major overriding.