Fabrice
Fabrice

Reputation: 21

Extjs 4: grid duplicated in web interface same structure. Each grid has a different store

I have a web interface with several grids Each grid have same structure. But each grid is filled by a different store with same model.

Ext.define("erapnot.view.taskslist.EastItemSdPnGrid", {
  extend: "Ext.grid.Panel",
  xtype: "eastitemsdpngrid",
  store: "EastItemStore",
  columns:[...

I tried to add an "id" for each grid as following:

id:'east-panel',  
xtype: 'panel',
region:'east',
title: 'LIST',
items: [{ 
          id:'**firsteastitemgrid**',
          xtype: "eastitemgrid" 
       }, { 
          id:'**secondeastitemgrid**',
          xtype: "eastitemgrid" 
       }
       ]
},

So I tried this in my grid

Ext.define("erapnot.view.taskslist.EastItemGrid", {
  extend: "Ext.grid.Panel",
  xtype: "eastitemgrid",
  store:{"#firsteastitemgrid": "EastItemStore" , 
         "#secondeastitemgrid":"EastItemDifStore"},

I have no syntax error but it doens't work.

Is it possible to have a grid defined only one time with several store ? Or must I create one grid by store even if all grid have same structure, model, controller.

Thanks in advanced.

Upvotes: 0

Views: 105

Answers (2)

Evan Trimboli
Evan Trimboli

Reputation: 30082

Do something like this:

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mygrid',

    columns: [],

    initComponent: function() {
        this.store = new Ext.data.Store({
            model: 'MyModel',
            proxy: {
                type: 'ajax',
                url: this.storeUrl
                // other options here
            }
        });
        this.callParent();
    }
});

Then you can use it later:

items: [{
    xtype: 'mygrid',
    storeUrl: '/foo/a'
}, {
    xtype: 'mygrid',
    storeUrl: '/foo/b'
}, {
    xtype: 'mygrid',
    storeUrl: '/foo/c'
}]

Upvotes: 1

jansepke
jansepke

Reputation: 1979

your solution seems very strange. try to set the store during instantiate:

items: [{ 
      store:"EastItemStore",
      xtype: "eastitemgrid" 
   }, { 
      store:"EastItemDifStore",
      xtype: "eastitemgrid" 
   }]

and in the grid definition don't set any store.

Upvotes: 2

Related Questions