1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    95
    Vote Rating
    0
    Wolfie is on a distinguished road

      0  

    Cool 'Dynamic' store loading

    'Dynamic' store loading


    Hello all

    I have problem with the store loading to the tabPanel

    I have this code :

    First the store object:

    Code:
    var someStore = new Ext.data.JsonStore({
            url: 'some url',
            fields: ['some', 'fields']
        });
    Than I have the handler for the event :

    Code:
    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 :

    Code:
    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 ?

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Vote Rating
    13
    flanders will become famous soon enough

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Dec 2009
    Posts
    95
    Vote Rating
    0
    Wolfie is on a distinguished road

      0  

    Default


    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

  4. #4
    Ext User
    Join Date
    Aug 2009
    Posts
    588
    Vote Rating
    1
    Mike Robinson is on a distinguished road

      0  

    Default


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

Thread Participants: 2