gridgroup行内编辑删除

Ext.define('Task', {
    extend: 'Ext.data.Model',
    idProperty: 'taskId',
    fields: [
        { name: 'projectId', type: 'string' },
        { name: 'project', type: 'string' },
        { name: 'taskId', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'estimate', type: 'string' },
        { name: 'rate', type: 'string' },
        { name: 'cost', type: 'string' },
        { name: 'due', type: 'string' }
    ]
});

var data = [
    { projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due: '06/24/2007' },
    { projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due: '06/25/2007' },
    { projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due: '06/29/2007' },
    { projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due: '07/01/2007' },
    { projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due: '07/04/2007' },
    { projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due: '07/05/2007' },
    { projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due: '07/05/2007' },
    { projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due: '07/11/2007' },
    { projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due: '07/15/2007' }
];

Ext.onReady(function () {

    Ext.tip.QuickTipManager.init();

    var store = Ext.create('Ext.data.Store', {
        model: 'Task',
        data: data,
        groupField: 'project'
    });

    var cellEditing123 = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2,//行内编辑 双击
        clicksToMoveEditor: 1,//点击编辑按钮编辑
        autoCancel: false
    });
    var showSummary = true;
    var grid = Ext.create('Ext.grid.Panel', {
         900,
        height: 450,
        frame: true,
        title: 'Sponsored Projects',
        iconCls: 'icon-grid',
        renderTo: document.body,
        store: store,
        plugins: [cellEditing123],
        //dockedItems: [{
        //    dock: 'top',
        //    xtype: 'toolbar',
        //    items: [{
        //        tooltip: 'Toggle the visibility of the summary row',
        //        text: 'Toggle Summary',
        //        enableToggle: true,
        //        pressed: true,
        //        handler: function () {
        //            var view = grid.getView();
        //            showSummary = !showSummary;
        //            view.getFeature('group').toggleSummaryRow(showSummary);
        //            view.refresh();
        //        }
        //    }]
        //}],
        features: [{
            id: 'group',
            ftype: 'groupingsummary',
            groupHeaderTpl: '{name}',
            hideGroupedHeader: true,
            enableGroupingMenu: false
        }],
        columns: [ {
            header: 'Due Date',
             280,
            sortable: false,
            dataIndex: 'due',
            menuDisabled: true,
            editor: {
                allowBlank: true
            }
        }, {
            header: 'Project',
             180,
            sortable: false,
            menuDisabled: true,
            dataIndex: 'project'
        },  {
            header: 'Estimate',
             275,
            sortable: false,
            dataIndex: 'estimate',
            menuDisabled: true,
            editor: {
                allowBlank: true
            }
        },
            {
                xtype: 'actioncolumn',
                 30,
                sortable: false,
                menuDisabled: true,
                items: [{
                    icon: '../../../lib/Ext/img/edit.gif',
                    tooltip: '编辑',
                    scope: this,
                    handler: function (grid, rowIndex) {
                        cellEditing123.cancelEdit();
                        cellEditing123.startEdit(rowIndex, 0);
                    }
                }]
            },
            {
                xtype: 'actioncolumn',
                 30,
                sortable: false,
                menuDisabled: true,
                items: [{
                    icon: '../../../lib/Ext/img/delete.gif',
                    tooltip: '删除',
                    scope: this,
                    handler: function (grid, rowIndex) {
                        Ext.MessageBox.confirm('Confirm', '确定删除该记录?', function (btn) {
                            if (btn != 'yes') {
                                return;
                            }
                            var SelectionModel = grid.getSelectionModel();
                            SelectionModel.select(rowIndex);
                            var store = grid.getStore();
                            store.remove(SelectionModel.getSelection());
                        })
                    }
                }]
            }]
    });
});

效果：