[英]Extjs ComboBox inside grid
I have a grid with some data (users list). 我有一个带有一些数据的网格(用户列表)。 For each row I have many actions such as update, delete, activate, suspend, view orders you name it.
对于每一行,我有许多操作,例如更新,删除,激活,暂停,查看您为其命名的订单。
Instead of placing so many buttons which will fill more than 400-500
pixels I want to place a combobox with an action applied to each field. 我没有放置那么多可以填充
400-500
像素的按钮,而是放置一个组合框,每个区域都应用一个动作。
The problem is that I can't simply render a combobox in a column row just like that or I'm missing something? 问题是我不能简单地在列行中渲染一个组合框,或者我错过了什么? Can someone shed some light on this please?
有人可以对此有所了解吗?
new Ext.grid.GridPanel({
region: 'center',
id: 'usersGrid',
store: store,
stripeRows: true,
autoExpandColumn: 'username',
columns: [{
// username
},{
// email
},{
// last seen
},{
// actions combo, it won't show
header: '',
width: 220,
fixed: true,
hideable: false,
dataIndex: 'actions',
renderer: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
id: 0,
fields: ['abbr', 'action'],
data: [
['suspend', 'Suspend'],
['activate', 'Activate'],
['update', 'Update'],
['delete', 'Delete']
]
}),
displayField: 'action',
valueField: 'abbr',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
lazyRender: true,
emptyText: 'Select action'
})
}
]
});
- Convert Grid to Editable Grid
将网格转换为可编辑网格
- Add editor config in columns instead of 'renderer'.
在列中添加编辑器配置而不是“渲染器”。 Find below the altered code.
在下面找到更改的代码。
new Ext.grid.EditorGridPanel({
region: 'center',
id: 'usersGrid',
store: store,
stripeRows: true,
autoExpandColumn: 'username',
columns: [{
// username
}, {
// email
}, {
// last seen
}, {
// actions combo, it won't show
header: '',
width: 220,
fixed: true,
hideable: false,
dataIndex: 'actions',
editor: {
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: ['abbr', 'action'],
data: [
['suspend', 'Suspend'],
['activate', 'Activate'],
['update', 'Update'],
['delete', 'Delete']
]
}),
displayField: 'action',
valueField: 'abbr',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
lazyRender: true,
emptyText: 'Select action'
}
}]
});
You are attempt to accomplish this is mostly correct. 你试图完成这一点大多是正确的。 The way that you are adding the custom editor might need some tweaking.. Have you tried this change?
您添加自定义编辑器的方式可能需要一些调整..您是否尝试过此更改?
editor: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
id: 0,
I'm unfortunately unable to determine what your code is doing and not working. 遗憾的是,我无法确定您的代码在做什么而且无法正常工作。
What version of ExtJS are you using? 您使用的是什么版本的ExtJS? One thing of note that I'm finding is that I don't see any object called Ext.data.SimpleStore in the current ExtJS API docs.
有一点值得注意的是,我发现在当前的ExtJS API文档中我没有看到任何名为Ext.data.SimpleStore的对象。 Have you tried using a different type of data store instead?
您是否尝试过使用其他类型的数据存储? You might want to try using different type of store for this combo?
您可能想尝试为此组合使用不同类型的商店?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.