ExtJS4.2 Grid行编辑、新增行及删除行

本节主要学习ExtJS4.2 Grid行编辑、新增行及删除行，示例图片：

 

在线演示  /  在线演示

 

主要内容如下：

1. 行编辑模式
2. 新增行
3. 删除行

 

1.行编辑模式

在Grid中定义中配置插件Ext.grid.plugin.RowEditing，点击单元格时即启动行编辑模式，见上图。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false
});

plugins: [rowEditing]

 

2.新增行和删除行

在Grid顶部添加“添加”和“删除”按钮，点击“添加”按钮时新增一行数据，点击“删除”按钮时删除选中行数据。

tbar: [{
        text: 'Add',
        iconCls: 'add',
        handler : function() {
            rowEditing.cancelEdit();
						
            // Create a model instance
            var r = Ext.create('Itdatum.model.UserModel', {
                name: 'New Guy',
                email: '[email protected]',
                birthday: Ext.Date.clearTime(new Date())
            });

            Ext.getCmp('testGrid').getStore().insert(0, r);
            rowEditing.startEdit(0, 0);
        }
    }, {
        itemId: 'removeUser',
        text: 'Remove',
        iconCls: 'delete',
        handler: function() {
            Ext.MessageBox.confirm('Confirm', '确定删除该记录?', function(btn){
            if(btn!='yes') {
                return;
            }
						            			
            var sm = Ext.getCmp('testGrid').getSelectionModel();
            rowEditing.cancelEdit();
            var store=Ext.getCmp('testGrid').getStore();
            store.remove(sm.getSelection());
            if (store.getCount() > 0) {
                sm.select(0);
            }
        });
    },
    disabled: true
}]

 

新增行实例图片：

删除行实例图片：