title: EXT-js PropertyGrid best practices to achieve an update?
body: <p>I am using EXT-js for a project, <em>usually</em> 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.</p>
  
  <p>First the store to populate the property grid, 
  on the load event:</p>
  
  <pre><code> 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);
                      }
                  }
              }
          }
  
      });
  </code></pre>
  
  <p>here is the propertyGrid:</p>
  
  <pre><code> 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
          }
      });
  </code></pre>
  
  <p>So far so good, but with the next button, I'll trigger an old school update,
  and my question :</p>
  
  <p>Is that the proper way to update this component ?
  Or is it better to user an editor ?
  or something else...</p>
  
  <p>for regular grid I use the store methods to do the update, delete,etc...</p>
  
  <p>The examples are really scarce on this one! 
  Even in books about ext-js!</p>
  
  <pre><code> 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);   
          }
      });
  </code></pre>
  
  <p>and thanks for reading.</p>