tbar & bbar Working in ReExt but Not in Sencha CMD — Need Assistance

I’ve been working on a project using both ReExt and Sencha CMD. The tbar and bbar functionality works perfectly in ReExt with Vite, but when I try replicating the same in Sencha CMD (Community Edition), I’m facing issues where the tbar and bbar are not rendering.

For better clarity, here are the GitHub links to both projects:

Sencha CMD Project (Community Edition): https://github.com/harihargithub/swsales ReExt Project (Trial Version): https://github.com/harihargithub/timetracker I’d appreciate any insights or assistance from the community to resolve this issue. Has anyone else encountered this problem, or could point me in the right direction?

Looking forward to your help! Thanks in advance.

Best regards, Harihar Nagarajan

Here’s what I’ve tried so far:

Ext.define('SwApp.view.swuserlist.SwuserlistView', {
  extend: 'Ext.panel.Panel',
  xtype: 'swuserlistview',
  controller: { type: 'swuserlistviewcontroller' },
  viewModel: { type: 'swuserlistviewmodel' },
  layout: 'vbox',
  items: [
    {
      xtype: 'grid',
      reference: 'userGrid', 
      flex: 6,
      style: { width: '80%' },
      plugins: 'gridfilters', 
      tbar: [
        '->',
        {
          text: 'Refresh',
          iconCls: 'fa fa-sync',
          handler: 'onRefreshClick',
        },
        {
          text: 'New User',
          iconCls: 'fa fa-plus',
          handler: 'onNewUserClick',
        },
      ],
      bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true,
        bind: {
          store: '{users}', 
        },
      },
      columns: [
        { text: 'User ID', dataIndex: 'id', width: 120 },
        { text: 'First Name', dataIndex: 'name', width: 200 },
        { text: 'Last Name', dataIndex: 'username', width: 200 },
        { text: 'Email', dataIndex: 'email', width: 200 },
      ],
      bind: '{users}', 
      listeners: {
        select: 'onGridSelect',
      },
    },
    {
      xtype: 'panel',
      reference: 'detailsPanel',
      flex: 2, 
      tpl: new Ext.XTemplate(
        '<div><strong>User ID:</strong> {id}</div>',
        '<div><strong>First Name:</strong> {name}</div>',
        '<div><strong>Last Name:</strong> {username}</div>',
        '<div><strong>Email:</strong> {email}</div>',
      ),
      data: {}, 
    },
    {
      xtype: 'button',
      text: 'Click Me',
      handler: 'onButtonClick',
      margin: '10 0 0 0',
    },
  ],
});

What I Expected: I expected the tbar to show a "Refresh" and "New User" button and the bbar to show pagination controls.

What I Got: When I inspect the grid element using Developer Tools, there’s no trace of the tbar, bbar, or pagination buttons. The grid itself loads correctly and displays the data from the store, but the toolbars are missing.

What Could Be Causing This Issue? Any advice on why the toolbars are not rendering would be greatly appreciated. I’ve also checked that the gridfilters plugin is available, and the store data is binding correctly.

Here’s the GitHub link to the project for further reference:

Sencha CMD Project (Community Edition): https://github.com/harihargithub/swsales Thanks in advance for your help!

From the linked source code it seems that you are using Ext JS version 7.8 with the modern toolkit and material theme.

While tbar and bbar would work with earlier versions for example in classic toolkit, in this specific version you have to add these differently.

Check the official example for sliding pager, you need add Ext.grid.plugin.PagingToolbar to the requires config and add it to your grid like this:

plugins: {
    gridpagingtoolbar: true
},

As for the top toolbar, check the grid's documentaton. You will see that in Ext JS 7.8 modern there is no such config like tbar for grids like in earlier versions.

In this example you see that the tbar config works with Ext.Panel but Ext.grid.Grid is not extended from Ext.Panel in the modern toolkit (it is in fact extended from panel in the classic toolkit).

So in this case you could use an Ext.panel.Panel and add a tbar config to it and then place your grid inside this panel. Or check the examples for alternative solutions.