ExtJS 4 PagingToolbar throwing dom errors on subsequent page loads

Question

I'm fairly new to ExtJS, but have been able to get a GridPanel working with an associated paging toolbar. Everything works fine, until I close the popped up window and open another one. On the subsequent window loads, I get a "me.dom is undefined" error. If I remove the paging toolbar, everything works fine. I'm using version 4.0.7.

Thanks in advance.

Store definition:

Ext.define('VIMS.store.TOs',{
    extend:'Ext.data.Store',
    model:'VIMS.model.TO',
    requires: 'VIMS.model.TO',
    sorter:{property:'StartDate', direction:'DESC'},
    buffered: true,
    pageSize: 10,

    listeners:{
    beforeload: function(store,options) {
        if(options.params && options.params.id){
            store.getProxy().extraParams.id = options.params.id;
        } 
    }, 
},
});

GridPanel definition:

Ext.define('VIMS.view.TaskOrderList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.taskorderlist',
    title : 'Task Orders',
    store: 'TOs',
    requires:'Ext.toolbar.Paging',
    height:'100%',
    columnLines:true,
/* removed this code ---------------------------------------
    dockedItems :[{
                xtype: 'pagingtoolbar',
                store: 'TOs',   // same store GridPanel is using
                pageSize:10,
                dock: 'bottom',
                displayInfo: false,}],
-------------------------------------------- */             
initComponent: function() {

    this.columns = [

        {header: 'Description',  dataIndex: 'Description',  flex: 1},
        . . . 
        {header: 'Id',  dataIndex: 'TaskOrderId',  hidden:true},
    ];

     // added from here ---------------------------------
      var PagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: 'TOs',
        displayInfo: true,

        });
        this.bbar = PagingBar;

    // to here ---------------------------------------

    this.callParent(arguments);
}

});

To open the window, from my controller I use the following:

    var view = Ext.widget('contractedit');
    view.modal = true;
    view.down('form').loadRecord(record);

The close is handled via the following:

    closeMe: function(button) {
        var win    = button.up('window');
        win.close();
    },

dbrin dbrin · Accepted Answer · 2012-03-08T22:41:20

you have an extra trailing comma that maybe getting in the way:

displayInfo: false,

also how r u managing the window?

ExtJS 4 PagingToolbar throwing dom errors on subsequent page loads

1 Answers