如何在EXTJS中添加工具栏到网格4

Question

所以，我在添加一个带按钮的简单工具栏到我的网格时遇到问题。起初，我创建一个这样的网格：

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); 
} 
}); 

它工作正常，我得到了我的网格。但现在我需要添加带有按钮的工具栏，它将使用网格条目执行CRUD操作。所以我加了这段代码：

... 
store: 'Users', 

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

], 
... 

但是，这似乎没有改变任何东西。我仍然可以在浏览器中看到纯粹的网格，所以问题是我做错了什么？

这种观点的整个代码现在看起来像这样：

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); 
} 

}）;

我需要更改/添加才能使其工作？

Answer 1

你需要指定内只initComponent工具栏上的配置。请参阅以下内容。

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

];

看看这可以帮助你。

Answer 2

改变你的定义：

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

Answer 3

更好的方式来组织你的组件：

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); 
    } 
});