正文
编辑 Ext 表格（二）——— 编辑表格元素
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、编辑单元格
Ext 中通过配置表格的属性 plugins 来设置表格是否可编辑，
表格的配置具体如下：
var gridTable = Ext.create('Ext.grid.Panel', {
id: 'gridTable',
region: 'center',
layout: 'fit',
columns: cols,
store: gridStore,
autoScroll: true,
selModel: { // 光标显示的是单元格模式
selType: 'cellmodel'
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1 //设置单击单元格编辑
})
],
});
配置完表格还需要对表格列的 editor 进行配置，
才能实现单元格编辑，例如：
{
text: '姓名',
dataIndex: 'Name',
minWidth: 85,
maxWidth: 85,
sortable: false,
menuDisabled: true,
editor: {
xtype: 'textfield',
enableKeyEvents: false,
}
},
{
text: '列',
dataIndex: 'col',
width: 120,
sortable: false,
menuDisabled: true,
renderer: function (a, b, c, rowIdx, colIdx) {
if ("object" == typeof (a)) {
var r = Ext.util.Format.date(a, 'H:i');
return r;
}
return "";
},
editor: {
xtype: 'timefield',
format: 'H:i',
enableKeyEvents: false,
}
}
效果如下：
修改完按回车键，发现修改的单元格左上角有一个红色三角形，
这是 Ext 用来标记修改过的单元格，
如果想要修改完后不显示红色图标，
可以调用 commit()。
例如可以在 gridTable 中绑定一个 'edit' 事件，
当检测到单元格数据发生改变的时候触发，
代码如下：
listeners: {
'edit': function (editor, e) {
e.record.commit();
},
}
二、右击单元格弹窗
首先先定义一个右键弹窗的面板，如下：
var contextmenu = new Ext.menu.Menu({
id: 'context-menu',
items: [{
id: 'context-menu-first',
rowIdx: 0,
colIdx: 0,
handler: function (m) {
if ("设置" == m.text) {
Ext.MessageBox.alert("提示", "设置成功");
}
}
}]
});
然后在 gridTable 中定义一个鼠标右击事件：
'itemcontextmenu': function (view, record, item, index, e) {
// 禁用系统默认右键菜单
e.preventDefault();
contextmenu.items.items[0].setText("设置");
contextmenu.showAt(e.getXY());
}
效果如下：
完整的代码：
<!-- 数据定义 -->
<script type="text/javascript">
var data; // 表格数据
var cols; // 表格列 var gridStore = Ext.create('Ext.data.Store', {
fields: ['Name']
}); </script> <!-- 事件定义 -->
<script type="text/javascript">
// 初始化整个页面
function onInit() {
onLoadData(); onInitVar();
onInitColumn();
};
// 请求加载表格数据
function onLoadData() {
data = [{ 'Name': '老狼' }, { 'Name': '小羊' }];
gridStore.loadData(data);
}; // 初始化页面的变量参数
function onInitVar() {
cols = [
{
xtype: 'rownumberer',
text: '序号',
align: 'center',
minWidth: 50,
maxWidth: 50,
},
{
text: '姓名',
dataIndex: 'Name',
minWidth: 85,
maxWidth: 85,
sortable: false,
menuDisabled: true,
editor: {
xtype: 'textfield',
enableKeyEvents: false,
}
}
];
};
// 初始化列
function onInitColumn() {
gridTable.reconfigure(gridStore, cols);
}; // 添加行
function onAddRow() {
gridStore.add({});
};
// 删除行
function onDelRow() {
gridStore.removeAt(gridStore.count() - 1);
};
// 添加列
function onAddColumn() {
cols.push({
text: '列',
dataIndex: 'col',
width: 120,
sortable: false,
menuDisabled: true,
editor: {
xtype: 'textfield',
enableKeyEvents: false,
}
}); gridTable.reconfigure(gridStore, cols);
};
// 删除列
function onDelColumn() {
cols.pop()
gridTable.reconfigure(gridStore, cols);
}; // 保存
function onSave() { console.log(gridTable);
console.log(gridStore.data);
}; </script> <!-- 面板定义 -->
<script type="text/javascript">
var toolbar = Ext.create('Ext.form.Panel', {
id: 'tool-bar',
region: 'north',
bbar: [
{
xtype: 'button',
text: '添加行',
handler: onAddRow
},
{
xtype: 'button',
text: '删除行',
handler: onDelRow
},
{
xtype: 'button',
text: '添加列',
handler: onAddColumn
},
{
xtype: 'button',
text: '删除列',
handler: onDelColumn
},
{
xtype: 'button',
text: '保存',
handler: onSave
}
]
}); //表格右键菜单
var contextmenu = new Ext.menu.Menu({
id: 'context-menu',
items: [{
id: 'context-menu-first',
rowIdx: 0,
colIdx: 0,
handler: function (m) {
if ("设置" == m.text) {
Ext.MessageBox.alert("提示", "设置成功");
}
}
}]
});
var gridTable = Ext.create('Ext.grid.Panel', {
id: 'gridTable',
region: 'center',
layout: 'fit',
columns: cols,
store: gridStore,
autoScroll: true,
selModel: { // 光标显示的是单元格模式
selType: 'cellmodel'
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1 //设置单击单元格编辑
})
],
listeners: {
'edit': function (editor, e) {
e.record.commit();
},
'itemcontextmenu': function (view, record, item, index, e) {
// 禁用系统默认右键菜单
e.preventDefault(); contextmenu.items.items[0].setText("设置"); contextmenu.showAt(e.getXY());
}
}, });
</script> <!-- 脚本入口 -->
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.Viewport', {
id: 'iframe',
layout: 'border',
items: [
toolbar,
gridTable,
]
}); onInit();
});
</script>
