View Full Version : Retrieve GridPanel model/store/columns dynamically from server side

12 Sep 2013, 8:26 AM
I have a GridPanel that must have its store model AND column model created dynamically, after a DB SP returns the columns of the table.

My question is how can I pass the value ( string or JSON )s from the server to the GridPanel?

Ext.define('Base.GridPanel', {
extend: 'Ext.grid.Panel',
xtype: 'gridpanel',

flex: @BFE.Frontend.Defaults.BaseGridPanel.flex,
hideMode: '@BFE.Frontend.Defaults.BaseGridPanel.hideMode',

collapsible: true,

constructor: function(id, title, columns, store)
this.id = id;
this.title = title;
this.columns = columns;
this.store = store;

I use this custom defined GridPanel along with the following model and store for now.

Ext.define('Tasks', {
extend: 'Ext.data.Model',

{name: 'Case_ID', type: '@MCSJS.Models.DataType.Auto'},
{name: 'BP_Name', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Project', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Business_Unit', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Task', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Title', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Last_Edit', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Entity_Name', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Process_Instance_ID', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Start_of_Business', type: '@MCSJS.Models.DataType.Auto'},
{name: 'Last_User', type: '@MCSJS.Models.DataType.Auto'}

var myTaskStore = Ext.create('Ext.data.Store', {
storeId: 'myTasks',
model: 'Tasks',
autoLoad: true,
type: 'ajax',
url: '/Task/GetMyTaskData',
type: 'json',
root: 'data'
This is how I create a GridPanel :

var columns = [ { text: 'Case ID', dataIndex: 'Case_ID' },
{ text: 'BP Name', dataIndex: 'BP_Name' } ];
new Base.GridPanel('@BFE.Frontend.MyTask.GridPanel', 'My Tasks', columns, myTaskStore)
Any help would be greatly appreciated.

1 Oct 2013, 3:36 PM
If you're passing the column config back from the server on the store's load event you can retrieve the columns config from the server response and use the grid's reconfigure method.

In the load event handler you have access to the store and with that you can do store.getProxy().getReader().rawData and that will give you access to any metadata that the server has passed down.