I gave up on this many months ago. Today I ran into an instance where I needed this functionality and I couldn't find a good work around. It took several hours, but I found a method that works to auto refresh a grid inside a modal window.
I abbreviated the code some to make it a little easier to read.
Doodle.grid.DoodleList = function(config) {
config = config || {};
Ext.applyIf(config,{
id: 'doodle-grid-doodlelist'
,url: Doodle.config.connectorUrl
,baseParams: {
action: 'mgr/doodle/getlist'
}
,fields: ['id','DoodleName','menu']
,paging: true
,remoteSort: true
,anchor: '97%'
,autoExpandColumn: 'DoodleName'
,columns: [{
header: 'Doodle Name'
,dataIndex: 'DoodleName'
,sortable: true
,width: 30
}]
,getMenu: function() {
return [{
text: 'Doodle Options'
,handler: this.viewOptions
}];
}
,viewOptions: function(btn,e) {
if (!this.updateDoodleListWindow) {
this.updateDoodleListWindow = MODx.load({
xtype: 'doodle-window-doodlelist'
,record: this.menu.record
,listeners: {
'success': {fn:this.refresh,scope:this}
}
});
}
this.updateDoodleListWindow.setValues(this.menu.record);
this.updateDoodleListWindow.show(e.target);
var optionsgrid = Ext.getCmp('doodle-grid-doodleoptions');
optionsgrid.store.load({params:{doodle_id: this.menu.record.id || 0}});
}
});
Doodle.grid.DoodleList.superclass.constructor.call(this,config)
};
Ext.extend(Doodle.grid.DoodleList,MODx.grid.Grid);
Ext.reg('doodle-grid-doodlelist',Doodle.grid.DoodleList);
Doodle.window.UpdateDoodle = function(config) {
config = config || {};
Ext.applyIf(config,{
title: _('doodle.update')
,url: Doodle.config.connectorUrl
,baseParams: {
action: 'mgr/doodle/update'
}
,autoHeight: false
,height: Ext.getBody().getViewSize().height*.85
,autoScroll: true
,fields: [{
xtype: 'hidden'
,name: 'id'
},{
xtype: 'textfield'
,fieldLabel: 'Doodle Name'
,name: 'DoodleName'
,anchor: '100%'
},{
xtype: 'doodle-grid-doodleoptions'
,fieldLabel: 'Doodle Options'
}]
});
Doodle.window.UpdateDoodleList.superclass.constructor.call(this,config);
};
Ext.extend(Doodle.window.UpdateDoodle,MODx.Window);
Ext.reg('doodle-window-doodlelist',Doodle.window.UpdateDoodle);
Doodle.grid.DoodleOptions = function(config) {
config = config || {};
Ext.applyIf(config,{
id: 'doodle-grid-doodleoptions'
,url: Doodle.config.connectorUrl
,baseParams: {
action: 'mgr/doodles/getoptionlist'
}
,viewConfig: {
forceFit: true,
enableRowBody: true
}
,fields: ['id','DoodleOption','DoodleOptionPrice']
,paging: false
,showPerPage: false
,remoteSort: true
,columns: [{
header: 'Doodle Option Name'
,dataIndex: 'DoodleOption'
,sortable: true
,width: 20
},{
header: 'Doodle Option Price'
,dataIndex: 'DoodleOptionPrice'
,sortable: true
,width: 20
}]
});
Doodle.grid.DoodleOptions.superclass.constructor.call(this,config);
};
Ext.extend(Doodle.grid.DoodleOptions,MODx.grid.Grid);
Ext.reg('doodle-grid-doodleoptions',Doodle.grid.DoodleOptions);
When I defined the grid that will be placed in the modal window, I only defined the action baseParams. In the code that defines the modal window, I define xtype: 'doodle-grid-doodleoptions' and the label within the fields. Finally, in the main page grid, I modified the function that loads and display's the modal window by placing:
var optionsgrid = Ext.getCmp('doodle-grid-doodleoptions');
optionsgrid.store.load({params:{doodle_id: this.menu.record.id || 0}});
This will pass the id of the doodle to the window grid, which will then run the action to pull the options from the processor.
Hope this helps anyone else needing to do something similar.
☆ A M B ☆
