The case of the missing paging toolbar

[discmode]

Good morning,

I created a grid with a paging toolbar, and when I had it working as planned I created a grid class and registered an xtype. But when I add the xtype to a viewport, the grid populates but the paging toolbar is mysteriously absent. I've spent a few hours on this problem and I'm sure it's something completely obvious I've been overlooking. Below is the grid class and the calling function, with most of the columns and fields excluded.

I really would appreciate another set of eyes. Thanks!

 Ext.ns('NAPP.gridpanel');
  
  NAPP.gridpanel.MainGridPanel = Ext.extend(Ext.grid.GridPanel, {
      columns: [
          {
              header: "row", dataIndex: 'row', width: 30, sortable: false
          }, 
   …
          {
              header: "rep", dataIndex: 'rep', width: 125, sortable: true
          }
          ],
  
     viewConfig: {
          bbar: new Ext.PagingToolbar({
              store: this.buildStore,
              pageSize: 20,
              displayInfo: true
          })
      },
  
      initComponent: function () {
          this.store = this.buildStore();
          NAPP.gridpanel.MainGridPanel.superclass.initComponent.call(this);
      },
  
      buildStore: function () {
          var cookieUtil = Ext.util.Cookies;
          var uid = parseInt(cookieUtil.get("ud"));
          var scd = parseInt(cookieUtil.get("scd"));
          return {
              xtype: 'directstore',
              directFn: Direct.Grid.LoadPlan,
              paramOrder: ['userid', 'scode', 'sort', 'dir', 'start', 'limit'],
              remoteSort: true,
              totalProperty: 'total',
              autoLoad: { params: { start: 0, limit: 20} },
              root: 'data',
              baseParams: { userid: uid, scode: scd },
              sortInfo: {
                  field: '0',
                  direction: 'ASC'
              },
              fields: [
      {
          type: 'int',
          name: 'row'
      }, 
  … 
  {
          type: 'string',
          name: 'rep'
      }
      ]
            };
      }
    });
  
  Ext.reg('maingrid', NAPP.gridpanel.MainGridPanel);

This is the calling function:

    buildGridPanel: function () {
        return {
            xtype: 'maingrid',
            itemId: 'mainGrid',
            loadMask: true,
            frame: true,
            height: 300,
            width: 400
        };
    }

[discmode]

I made changes to the code and the paging toolbar loads, but it's not connecting to the store. Any ideas why it's not reading the store?

Ext.ns('NAPP.gridpanel');

NAPP.gridpanel.MainGridPanel = Ext.extend(Ext.grid.GridPanel, {
    columns: [
        {
            header: "row", dataIndex: 'row', width: 30, sortable: false
        }, ...{
            header: "rep", dataIndex: 'rep', width: 125, sortable: true
        }
        ],

    initComponent: function () {
        this.store = this.buildStore();
        NAPP.gridpanel.MainGridPanel.superclass.initComponent.call(this);
    },

      bbar: new Ext.PagingToolbar({
            store: this.store,
            pageSize: 20,
            displayInfo: true,
            emptyMsg: 'no records'
        }),

    buildStore: function () {
        var cookieUtil = Ext.util.Cookies;
        var uid = parseInt(cookieUtil.get("ud"));
        var scd = parseInt(cookieUtil.get("scd"));
        return {
            xtype: 'directstore',
            directFn: Direct.Grid.LoadPlan,
            paramOrder: ['userid', 'scode', 'sort', 'dir', 'start', 'limit'],
            remoteSort: true,
            totalProprty: 'total',
            autoLoad: { params: { start: 0, limit: 20} },
            root: 'data',
            baseParams: { userid: uid, scode: scd },
            sortInfo: { field: '0', direction: 'ASC' },
            fields: [
    {
        type: 'int',
        name: 'row'
    }, ...{
        type: 'string',
        name: 'rep'
    }
    ]

        };
    }
});

Ext.reg('maingrid', NAPP.gridpanel.MainGridPanel);

[brittongr]

Try this:

Remove bbar property and assign it inside initComponent()

initComponent: function () {
    this.store = this.buildStore();
    Ext.apply(this,
    {
        bbar: new Ext.PagingToolbar({
            store: this.store,
            pageSize: 20,
            displayInfo: true,
            emptyMsg: 'no records'
    })
    };
  NAPP.gridpanel.MainGridPanel.superclass.initComponent.call(this);
}

[discmode]

Greivin,

Thank you for taking the time to respond to me. Sometimes I get so wrapped up in a problem I'm unable to see the solution. An extra set of eyes always helps!

[brittongr]

That's so true...