gridgroup行内编辑删除
1 Ext.define('Task', { 2 extend: 'Ext.data.Model', 3 idProperty: 'taskId', 4 fields: [ 5 { name: 'projectId', type: 'string' }, 6 { name: 'project', type: 'string' }, 7 { name: 'taskId', type: 'string' }, 8 { name: 'description', type: 'string' }, 9 { name: 'estimate', type: 'string' }, 10 { name: 'rate', type: 'string' }, 11 { name: 'cost', type: 'string' }, 12 { name: 'due', type: 'string' } 13 ] 14 }); 15 16 var data = [ 17 { 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' }, 18 { projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due: '06/25/2007' }, 19 { projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due: '06/29/2007' }, 20 { 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' }, 21 { projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due: '07/04/2007' }, 22 { projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due: '07/05/2007' }, 23 { projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due: '07/05/2007' }, 24 { projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due: '07/11/2007' }, 25 { projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due: '07/15/2007' } 26 ]; 27 28 Ext.onReady(function () { 29 30 Ext.tip.QuickTipManager.init(); 31 32 var store = Ext.create('Ext.data.Store', { 33 model: 'Task', 34 data: data, 35 groupField: 'project' 36 }); 37 38 var cellEditing123 = Ext.create('Ext.grid.plugin.CellEditing', { 39 clicksToEdit: 2,//行内编辑 双击 40 clicksToMoveEditor: 1,//点击编辑按钮编辑 41 autoCancel: false 42 }); 43 var showSummary = true; 44 var grid = Ext.create('Ext.grid.Panel', { 45 width: 900, 46 height: 450, 47 frame: true, 48 title: 'Sponsored Projects', 49 iconCls: 'icon-grid', 50 renderTo: document.body, 51 store: store, 52 plugins: [cellEditing123], 53 //dockedItems: [{ 54 // dock: 'top', 55 // xtype: 'toolbar', 56 // items: [{ 57 // tooltip: 'Toggle the visibility of the summary row', 58 // text: 'Toggle Summary', 59 // enableToggle: true, 60 // pressed: true, 61 // handler: function () { 62 // var view = grid.getView(); 63 // showSummary = !showSummary; 64 // view.getFeature('group').toggleSummaryRow(showSummary); 65 // view.refresh(); 66 // } 67 // }] 68 //}], 69 features: [{ 70 id: 'group', 71 ftype: 'groupingsummary', 72 groupHeaderTpl: '{name}', 73 hideGroupedHeader: true, 74 enableGroupingMenu: false 75 }], 76 columns: [ { 77 header: 'Due Date', 78 width: 280, 79 sortable: false, 80 dataIndex: 'due', 81 menuDisabled: true, 82 editor: { 83 allowBlank: true 84 } 85 }, { 86 header: 'Project', 87 width: 180, 88 sortable: false, 89 menuDisabled: true, 90 dataIndex: 'project' 91 }, { 92 header: 'Estimate', 93 width: 275, 94 sortable: false, 95 dataIndex: 'estimate', 96 menuDisabled: true, 97 editor: { 98 allowBlank: true 99 } 100 }, 101 { 102 xtype: 'actioncolumn', 103 width: 30, 104 sortable: false, 105 menuDisabled: true, 106 items: [{ 107 icon: '../../../lib/Ext/img/edit.gif', 108 tooltip: '编辑', 109 scope: this, 110 handler: function (grid, rowIndex) { 111 cellEditing123.cancelEdit(); 112 cellEditing123.startEdit(rowIndex, 0); 113 } 114 }] 115 }, 116 { 117 xtype: 'actioncolumn', 118 width: 30, 119 sortable: false, 120 menuDisabled: true, 121 items: [{ 122 icon: '../../../lib/Ext/img/delete.gif', 123 tooltip: '删除', 124 scope: this, 125 handler: function (grid, rowIndex) { 126 Ext.MessageBox.confirm('Confirm', '确定删除该记录?', function (btn) { 127 if (btn != 'yes') { 128 return; 129 } 130 var SelectionModel = grid.getSelectionModel(); 131 SelectionModel.select(rowIndex); 132 var store = grid.getStore(); 133 store.remove(SelectionModel.getSelection()); 134 }) 135 } 136 }] 137 }] 138 }); 139 });
效果：
