'Dynamic' store loading

[Wolfie]

Hello all

I have problem with the store loading to the tabPanel

I have this code :

First the store object:

var someStore = new Ext.data.JsonStore({
        url: 'some url',
        fields: ['some', 'fields']
    });

Than I have the handler for the event :

function addTab() {
        //alert(myGrid.getSelectionModel().getSelected().id);
        var v = myGrid.getSelectionModel().getSelected().id;
        var id = tabPanel.getId() + v.toString();
        if(tabPanel.getItem(id))
        {
            tabPanel.setActiveTab(tabPanel.getItem(id));
        } 
        else 
        {
            someStore.load({params: 
                  {id: myGrid.getSelectionModel().getSelected().id}});
        }
    }
        
    myGrid.on('rowdblclick', addTab);

So when I am double clicking on row in the gridPanel than I get new tab with the gridPanel which load data from database to store

The onload function looks like this :

dictionaryStore.on('load', function() {
        
       var tabViewGridPanel = new Ext.grid.GridPanel({
            title: 'Title',
            store: someStore,
            columns: [
                {id: 'name', header: "Name", width: 150, sortable: true, dataIndex: 'name', editor: { xtype: 'textfield',allowBlank: false}},
                {id: 'description', header: "Description", width: 150, sortable: true, dataIndex: 'description', editor: { xtype: 'textfield',allowBlank: false}},
                {id: 'code', header: "Kod", width: 150, sortable: true, dataIndex: 'code', editor: { xtype: 'textfield',allowBlank: false} },
                {id: 'customer', header: "Klient", width: 150, sortable: true, dataIndex: 'customer', editor: { xtype: 'textfield',allowBlank: false}}
            ],
            autoExpandColumn: 'description',
            autoHeight: true,
            stripeRows: true
        });
});

Now the problem is that when I am double clicking on row in first grid Panel, I get the new tab with store, the store loads and everything is ok, than I am going back to the first grid, double clicking on row and the second tab appears with new grid which loads new data, unfortunately in the first tab the data is also changing. This becaouse both grids uses the same store.
So the question is how to change code to get diferent stores for the grids in new tabs ?

[flanders]

I would organize your code the other way around. Right now you are loading the (one and only) store with data and opening a new tab when the data is loaded in an event handler.

IMHO it would be better to open the new tab right away and initialize a new store in the tab's constructor. This way the code to initialize and load the store is inside the panel that is actually using it. I think this will result in better code, and solve your current issue.

[Wolfie]

Yes, I have put the store in top of the addTab() function and someStore.on('load' ... function inside the else clause of addTab() function , now everything is ok

cheers

[Mike Robinson]

If you're using the same Store object, guess what ... all the grids that are attached to it will show the same information!