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

dKab 发表于 Dev

dKab

因此，我在向网格中添加带有按钮的简单工具栏时遇到了问题。首先，我创建一个像这样的网格：

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

}）;

我需要更改/添加什么才能使其正常工作？

迪帕克·帕蒂尔（Deepak Patil）

您只需要在initComponent内部指定工具栏配置。请参阅以下内容。

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

];

看看这是否可以帮助您。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。