Issues with grid panel and store

[alex.bumbacea]

Hello guys,

Considering the code bellow, i have 4-5 elements of type logGrid on different tabs. The issue presents like this:
1. All grids are rendered corectly and data loaded corectly.
2. If i go to another tab(with a grid rendered previously) it displays the data from the last rendered grid.
3. If i modify one of the stores, it seems like it modifies all store.

My assumption is that each time when i instantiate a new logGrid i don't create a new instance of a JsonStore, but i can't figure out how to make each grid with unique store.

p.s. i tried to give to each store a random id, but it seems like it's not working..

ext.js version 3.2.1

logGrid = Ext.extend(Ext.grid.GridPanel, {
        listeners: {'render' : 
                        {
                        fn:function(){ 
                                this.getBottomToolbar().bindStore(this.store); 
                                this.store.baseParams.msisdn = this.msisdn||'';
                                this.store.baseParams.cilwebid = this.cilwebid||0;
                            }}
                        },
        layout: 'fit',
        loadMask: true,
        store: new Ext.data.JsonStore({
            url: baseuri,
            baseParams: {'method':'getLog','msisdn': '', 'cilwebid': 0},
            method: 'GET',
            root: 'data',
            totalProperty: 'records',
            idProperty: 'objectid',
            fields: ['createdBy', 'timestamp','comment','objectid','actionType','msisdn']
        }),
        columns:[{
            id: 'User',
            header: "User",
            dataIndex: 'createdBy',
            width: 100
        },{
            id: 'actionType',
            header: "Action Type",
            dataIndex: 'actionType',
            width: 100
        },{
            id: 'action',
            header: "Info",
            dataIndex: 'comment',
            width: 350
        },{
            id: 'timestamp',
            header: "Date/Time",
            dataIndex: 'timestamp',
            width: 150
        },{
            id: 'msisdn',
            header: "Phone Number",
            dataIndex: 'msisdn',
            width: 150
        },{
            id: 'cilwebid',
            header: "Client ID",
            dataIndex: 'cilwebid',
            width: 150
        }],
        bbar: {
            xtype: 'paging',
            pageSize: 5,
            displayInfo: true,
            displayMsg: 'Displaying log entries {0} - {1} of {2}',
            emptyMsg: "No logs for this user",
        }
});

[alex.bumbacea]

It seems like the issue resides in the fact that the new JsonStore will always have same params => it will not create a new object but it will use the existing store always.

But i still have issues. The function bellow will bind corectly the paging toolbar(no of pages, items), but it won't render the grid(the lines).

        listeners: {'render' : 
                        {
                        fn:function(){
                            var dataStore = new Ext.data.JsonStore({
                                url: baseuri,
                                baseParams: {'method':'getLog','msisdn':  this.msisdn||'', 'cilwebid': this.cilwebid||0},
                                method: 'GET',
                                root: 'data',
                                totalProperty: 'records',
                                idProperty: 'objectid',
                                fields: ['createdBy',  'timestamp','comment','objectid','actionType','msisdn']
                            });
                             this.getBottomToolbar().bindStore(dataStore);
                            this.store = dataStore;
                            }}
                        },

And if i replace

this.store = dataStore

with

this.reconfigure(dataStore, this.getColumnModel());

the result will erase all previous settings: bbar, height.

Has anyone got any idea how this should be done?

[alex.bumbacea]

It seems to be working ok with with reconfigure() now.

                        fn:function(){
                            var dataStore = new Ext.data.JsonStore({
                                url: baseuri,
                                baseParams: {'method':'getLog','msisdn': this.msisdn||'', 'cilwebid': this.cilwebid||0},
                                method: 'GET',
                                root: 'data',
                                totalProperty: 'records',
                                idProperty: 'objectid',
                                fields: ['createdBy', 'timestamp','comment','objectid','actionType','msisdn']
                            });
                            this.getBottomToolbar().bindStore(dataStore);
                            this.reconfigure(dataStore, this.getColumnModel());
                            }}
                        },