How to add a toolbar to grid in EXTJS 4

Question

So, I'm having problem with adding a simple toolbar with buttons to my grid. At first I create a grid like this:

Ext.define('MyApp.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
initComponent: function() {

    this.columns = [
        {header: 'login', dataIndex: 'login', flex: 1},
        {header: 'password', dataIndex: 'password', flex: 1},
        {header: 'name', dataIndex: 'name', flex: 1},
        {header: 'email', dataIndex: 'email', flex: 1},
        {header: 'phone', dataIndex: 'phone', flex: 1}
    ];

    this.callParent(arguments);
}
});

It works fine, I got my grid. But now I need to add toolbar with buttons on it, which will do CRUD operations with grid entries. So I added this piece of code:

...
store: 'Users',

    items: [{
        xtype: 'toolbar',
        items: [{
                text: 'Добавить',
                action: 'create'
            },
            {
                text: 'Редактировать',
                action: 'update'
            },
            {
                text: 'Удалить',
                action: 'destroy'
            }
        ]
    }

],
...

But that doesn't seem to change anything at all. I still can see only plain grid in my browser, so question is what am I doing wrong?

The whole code of this View now looks like that:

Ext.define('MyApp.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
items: [{
        xtype: 'toolbar',
        items: [{
                text: 'Добавить',
                action: 'create'
            },
            {
                text: 'Редактировать',
                action: 'update'
            },
            {
                text: 'Удалить',
                action: 'destroy'
            }
        ]
    }

],
initComponent: function() {

    this.columns = [
        {header: 'login', dataIndex: 'login', flex: 1},
        {header: 'password', dataIndex: 'password', flex: 1},
        {header: 'name', dataIndex: 'name', flex: 1},
        {header: 'email', dataIndex: 'email', flex: 1},
        {header: 'phone', dataIndex: 'phone', flex: 1}
    ];

    this.callParent(arguments);
}

});

What do I need to change/add to get it working?

Answer 1

You need to specify the toolbar configuration inside initComponent only. See the following.

this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [{
    text: 'Добавить',
    action: 'create'
}, {
    text: 'Редактировать',
    action: 'update'
}, {
    text: 'Удалить',
    action: 'destroy'
}]
}

];

See if this can help you.

Answer 2

Change your definition:

Ext.define('MyApp.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',
    store: 'Users',
    tbar: [{
        text: 'Добавить',
        action: 'create'
    }]
    // .....
});

Answer 3

Better way to structure your component:

Ext.define('MyApp.view.user.List', {
   extend: 'Ext.grid.Panel',
   alias: 'widget.userlist',
   title: 'All Users',

   initComponent: function () {
      var me = this;

      var store = Ext.storeMgr.lookup('Users');

      Ext.applyIf(me, {
         store: store,
         columns: [
            {header: 'login', dataIndex: 'login', flex: 1},
            {header: 'password', dataIndex: 'password', flex: 1},
            {header: 'name', dataIndex: 'name', flex: 1},
            {header: 'email', dataIndex: 'email', flex: 1},
            {header: 'phone', dataIndex: 'phone', flex: 1}
         ],
         dockedItems: [{
            xtype: 'tbar',
            dock: 'top',
            items: [
               {
                  text: 'Добавить',
                  action: 'create'
               },
               {
                  text: 'Редактировать',
                  action: 'update'
               },
               {
                  text: 'Удалить',
                  action: 'destroy'
               }]
         }]

      });

      me.callParent(arguments);

      // could be something like this to load the store
      me.on('afterrender', function() {
          me.getStore().loadPage(1);
      } , me);
   }
});