ExtJS/MODx CMP: grid edits not saving to db, combo box not displaying

Question

ExtJS, or MODext, is a difficult subject with little documentation, so I'm coming here for some assistance. I have 2 issues, both within the same code.

Basic summary, I have a single page with 2 tabs displaying info from 2 different custom tables. The 2 tabs (respectively: Clients, Budgets) are displaying well, the grids with the info are almost entirely displaying properly. Almost...

Firstly: I have a combo that is extending MODx.combo to display the full names of users with the username as the value, and have referenced the Ext.util renderer to display the values. On the Budgets tab (2nd tab) this works fine, but on the Clients tab (1st tab) the display won't render out (the combo still displays on double-click. Here's my codes...

Firstly the extension:

GR8.combo.User = function(config) {
    config = config || {};
    Ext.applyIf(config,{
    id: 'user'
        ,name: 'user'
        //,hiddenName: 'user'
        ,displayField: 'fullname'
        ,valueField: 'username'
        ,fields: ['fullname','username']
        ,pageSize: 20
        ,url: MODx.config.connectors_url+'security/user.php'
        ,typeAhead: true
        ,editable: true
    });
    GR8.combo.User.superclass.constructor.call(this,config);
};
Ext.extend(GR8.combo.User,MODx.combo.ComboBox);
Ext.reg('gr8-combo-user',GR8.combo.User);

Next, the combo field code for the Clients grid:

{
   header: 'Agent'
   ,dataIndex: 'clientAgent'   //equates to modx username
   ,sortable: true
   ,width: 60
   ,editor: { xtype: 'gr8-combo-user' ,renderer: true}
   ,renderer: Ext.util.Format.comboRenderer(GR8.combo.User, 'clientAgent')
}

Finally, the combo field code for the Budgets grid:

{
   header: 'Agent'
   ,dataIndex: 'budgAgent'
   ,sortable: true
   ,width: 60
   ,editor: { xtype: 'gr8-combo-user' ,renderer: true}
   ,renderer: Ext.util.Format.comboRenderer(GR8.combo.User, 'budgAgent')
}

Am I missing something, or is there an issue here that's not easy to see?

Secondly: When I do make a change to the grid, the change isn't saved - the little red triangle stays in the top left corner of the field in the grid. I've found a save button I think I can use from the MODx Gallery component:

,formpanel: 'gr8-panel-home'
,buttons: [{
    text: _('save')
    ,id: 'gr8-btn-save'
    ,process: 'mgr/gr8/update'
    ,method: 'remote'
    ,keys: [{
        key: 's'
        ,alt: true
        ,ctrl: true
    }]
}]

This puts a save button on the page (it also duplicates the search input :( ), but I'm guess there's some more I need to do with it. Can someone show me what I need to do please?

Answer 1

To save grid after you update a row directly from grid, you need to add these two params to grid definition:

,save_action: 'path/to/update/from/grid/processor'
,autosave: true

Here is the example of updatefromgrid processor: https://github.com/modxcms/Tagger/blob/master/core/components/tagger/processors/mgr/tag/updatefromgrid.class.php