ExtJS4.2实例:表格(Grid)含联动的下拉列表(Combobox)
时间: 2024-01-05 22:02:41 浏览: 233
好的,我会尝试回答你的问题。以下是一个 ExtJS4.2 实例,包含一个表格和一个带有联动下拉列表的列:
```javascript
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.form.*'
]);
Ext.onReady(function() {
// 创建一个简单的数据存储
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'department'],
data: [
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", "department": "Sales" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", "department": "Marketing" },
{ 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244", "department": "Engineering" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", "department": "Support" }
]
});
// 创建一个下拉框的存储
var departmentStore = Ext.create('Ext.data.Store', {
fields: ['name'],
data : [
{ "name": "Sales" },
{ "name": "Marketing" },
{ "name": "Engineering" },
{ "name": "Support" }
]
});
// 创建一个表格
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: store,
height: 250,
width: 500,
title: 'Employee Directory',
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' },
// 创建一个带有联动下拉列表的列
{
header: 'Department',
dataIndex: 'department',
editor: {
xtype: 'combobox',
store: departmentStore,
displayField: 'name',
valueField: 'name',
editable: false,
forceSelection: true
}
}
],
// 启用编辑功能
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
});
```
这个例子中,我们创建了一个名为 `grid` 的表格,包含四个列:姓名、电子邮件、电话和部门。其中,部门列是一个带有联动下拉列表的列,该下拉列表的数据存储在 `departmentStore` 中。我们使用 `Ext.grid.plugin.CellEditing` 插件启用了编辑功能,从而允许用户编辑表格中的数据。
希望这个例子对你有所帮助!
阅读全文