编辑 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 表格(二)——— 编辑表格元素
 
修改完按回车键,发现修改的单元格左上角有一个红色三角形,
编辑 Ext 表格(二)——— 编辑表格元素
 
这是 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());
}
效果如下:
编辑 Ext 表格(二)——— 编辑表格元素
 
完整的代码:
  <!-- 数据定义 -->
<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>
上一篇:javascript数据结构与算法--散列


下一篇:开源自己的一个小android项目(美女撕衣服游戏)