Override GridPanel ID lose getView function?

[jayapal]

I just posted in Ext forum, I dint notice the forum version.
Yes I am using 3.2.1.

Can you help me to fix this issue in 3.21 version ?

thanks in advance

[mankz]

Your code works fine for me in firebug, getCmp returns the expected grid component.

[jayapal]

Can you check your EXT js version ? Mine is 3.2.1
Its throws error. I got stuck in this issue for last 2 days.

[mankz]

I use 3.3.1

[jayapal]

How can I fix?

[mankz]

What line throws the error? How have you debugged this?

[jayapal]

throws error on the line which highligted in red color
i.e. var grid=Ext.getCmp("My_Grid_Panel").getView();

[mankz]

You're doing it backwards. I'm guessing getState gets called as soon as you create the toolbar. At this time the grid hasn't yet been registered with the component manager (i.e. Ext.getCmp is called too early).

You should clean your code up and make sure you do things in the right order. A quick hack that might get this working is to assign a local variable to your grid.

MyPanel = Ext.extend(Ext.grid.GridPanel, {
  pageSize: 30,
    dataLoaded: false,
    stateful: true,
    stateId: "my_state_id_grid",
     initComponent: function() {
        var grid = this;
        Ext.QuickTips.init();
        Ext.apply(this, {
            store: {
                xtype: 'jsonstore',
                totalProperty: 'total',
                proxy: new Ext.data.HttpProxy({
                    method: 'GET',
                    disableCaching: false,
                    url: '/xx/xx/xx'
            }),
            root: 'fields',
            fields: ['xxx']
            },
            colModel: new Ext.grid.ColumnModel([
                {
                    header: 'xxx',
                    dataIndex: 'xxx',
                    width: 100,
                    sortable: true,
                    hidden: true
                }
            ]),
            selModel: new Ext.grid.RowSelectionModel({
                singleSelect: true
            }),
            iconCls: 'icon-grid',
            loadMask: true,
            autoScroll: true,
            viewConfig: {
                forceFit: true
            }
        });
        this.plugins = [new Sleuth.filter.GridFilters({
            local: false,
            stateful: true,
            stateId: 'state_id_grid_filter',
            encode: true,
            filters: [
                {type: 'string', dataIndex: 'xxx'},
            ],
        })];
        this.bbar = new Ext.PagingToolbar({
                pageSize: this.pageSize,
                stateId: 'my_id_pagin',
                stateful: true,
                store: this.store,
                displayInfo: true,
                plugins: this.plugins,
                xtype: 'paging',
            stateEvents: ["change"],

            getState: function() {var state = Ext.state.Manager.getProvider();
                       state.set('startStore',this.store.lastOptions.params.start);
                       
                       state.set('active_field', grid.filters.keyTracker[0]);
                       return {pageSize: this.pageSize};
                       }

        });
        MyPanel.superclass.initComponent.apply(this, arguments);
        this.on({afterlayout: {single: true, fn:function() {  
            this.bottomToolbar.bindStore(this.store);
            var state = Ext.state.Manager.getProvider();
            var start = state.get('startStore',0)
            this.getStore().load({params: {start: start, limit: this.pageSize}});
            }
        }});
    }
});


var MyNewPanel = new MyPanel({id:'My_Grid_Panel',pageSize: 40});

[jayapal]

If I use local variable then I am getting error as,
grid.grid is undefined

[IMG]chrome://firebug/content/blank.gif[/IMG] state.set('active_field',grid.grid.filters.keyTracker[0]);

Can you tell me how my script got worked for you ? Did you made any changes?

[jayapal]

You're doing it backwards. I'm guessing getState gets called as soon as you create the toolbar. At this time the grid hasn't yet been registered with the component manager (i.e. Ext.getCmp is called too early).

In my grid i have a button to clear the filter, in which I tired to access the grid the same procedure
[CODE]
this.bbar = new Ext.PagingToolbar({
pageSize: this.pageSize,
stateId: 'my_id_pagin',
stateful: true,
store: this.store,
displayInfo: true,
plugins: this.plugins,
xtype: 'paging',
items:[
'-', {
enableToggle:false,
text: 'Clear Filter',
handler: function(btn, pressed){
var grid=Ext.getCmp("ext-comp-1001").getView();
grid.grid.filters.clearFilters();

}
},....
[CODE]

But throws same error. I hope this time the grid would have registered with component manager.