编辑 Ext 表格（二）——— 编辑表格元素

  1  <!-- 数据定义 -->
  2 <script type="text/javascript">
  3     var data;  // 表格数据
  4     var cols;   // 表格列
  5 
  6     var gridStore = Ext.create(‘Ext.data.Store‘, {
  7         fields: [‘Name‘]
  8     });
  9 
 10 </script>
 11 
 12 <!-- 事件定义 -->
 13 <script type="text/javascript">
 14     // 初始化整个页面
 15     function onInit() {
 16         onLoadData();
 17 
 18         onInitVar();
 19         onInitColumn();
 20     };
 21     // 请求加载表格数据
 22     function onLoadData() {
 23         data = [{ ‘Name‘: ‘老狼‘ }, { ‘Name‘: ‘小羊‘ }];
 24         gridStore.loadData(data);
 25     };
 26 
 27     // 初始化页面的变量参数
 28     function onInitVar() {
 29         cols = [
 30             {
 31                 xtype: ‘rownumberer‘,
 32                 text: ‘序号‘,
 33                 align: ‘center‘,
 34                 minWidth: 50,
 35                 maxWidth: 50,
 36             },
 37             {
 38                 text: ‘姓名‘,
 39                 dataIndex: ‘Name‘,
 40                 minWidth: 85,
 41                 maxWidth: 85,
 42                 sortable: false,
 43                 menuDisabled: true,
 44                 editor: {
 45                     xtype: ‘textfield‘,
 46                     enableKeyEvents: false,
 47                 }
 48             }
 49         ];
 50     };
 51     // 初始化列
 52     function onInitColumn() {
 53         gridTable.reconfigure(gridStore, cols);
 54     };
 55 
 56     // 添加行
 57     function onAddRow() {
 58         gridStore.add({});
 59     };
 60     // 删除行
 61     function onDelRow() {
 62         gridStore.removeAt(gridStore.count() - 1);
 63     };
 64     // 添加列
 65     function onAddColumn() {
 66         cols.push({
 67             text: ‘列‘,
 68             dataIndex: ‘col‘,
 69             width: 120,
 70             sortable: false,
 71             menuDisabled: true,
 72             editor: {
 73                 xtype: ‘textfield‘,
 74                 enableKeyEvents: false,
 75             }
 76         });
 77 
 78         gridTable.reconfigure(gridStore, cols);
 79     };
 80     // 删除列
 81     function onDelColumn() {
 82         cols.pop()
 83         gridTable.reconfigure(gridStore, cols);
 84     };
 85 
 86     // 保存
 87     function onSave() {
 88 
 89         console.log(gridTable);
 90         console.log(gridStore.data);
 91     };
 92 
 93 </script>
 94 
 95 <!-- 面板定义 -->
 96 <script type="text/javascript">
 97     var toolbar = Ext.create(‘Ext.form.Panel‘, {
 98         id: ‘tool-bar‘,
 99         region: ‘north‘,
100         bbar: [
101             {
102                 xtype: ‘button‘,
103                 text: ‘添加行‘,
104                 handler: onAddRow
105             },
106             {
107                 xtype: ‘button‘,
108                 text: ‘删除行‘,
109                 handler: onDelRow
110             },
111             {
112                 xtype: ‘button‘,
113                 text: ‘添加列‘,
114                 handler: onAddColumn
115             },
116             {
117                 xtype: ‘button‘,
118                 text: ‘删除列‘,
119                 handler: onDelColumn
120             },
121             {
122                 xtype: ‘button‘,
123                 text: ‘保存‘,
124                 handler: onSave
125             }
126         ]
127     });
128 
129     //表格右键菜单
130     var contextmenu = new Ext.menu.Menu({
131         id: ‘context-menu‘,
132         items: [{
133             id: ‘context-menu-first‘,
134             rowIdx: 0,
135             colIdx: 0,
136             handler: function (m) {
137                 if ("设置" == m.text) {
138                     Ext.MessageBox.alert("提示", "设置成功");
139                 }
140             }
141         }]
142     });
143     var gridTable = Ext.create(‘Ext.grid.Panel‘, {
144         id: ‘gridTable‘,
145         region: ‘center‘,
146         layout: ‘fit‘,
147         columns: cols,
148         store: gridStore,
149         autoScroll: true,
150         selModel: {  // 光标显示的是单元格模式
151             selType: ‘cellmodel‘
152         },
153         plugins: [
154             Ext.create(‘Ext.grid.plugin.CellEditing‘, {
155                 clicksToEdit: 1 //设置单击单元格编辑
156             })
157         ],
158         listeners: {
159             ‘edit‘: function (editor, e) {
160                 e.record.commit();
161             },
162             ‘itemcontextmenu‘: function (view, record, item, index, e) {
163                 // 禁用系统默认右键菜单
164                 e.preventDefault();
165 
166                 contextmenu.items.items[0].setText("设置");
167 
168                 contextmenu.showAt(e.getXY());
169             }
170         },
171 
172     });
173 </script>
174 
175 <!-- 脚本入口 -->
176 <script type="text/javascript">
177     Ext.onReady(function () {
178         Ext.create(‘Ext.Viewport‘, {
179             id: ‘iframe‘,
180             layout: ‘border‘,
181             items: [
182                 toolbar,
183                 gridTable,
184             ]
185         });
186 
187         onInit();
188     });
189 </script>