编辑 Ext 表格（一）——— 动态添加删除行列

一、动态增删行

在 ext 表格中，动态添加行主要和表格绑定的 store 有关，

通过对 store 数据集进行添加或删除，就能实现表格行的动态添加删除。

（1）动态添加表格的行

gridStore.add({});

（2）动态删除表格的行

gridStore.removeAt(gridStore.count() - 1);

二、动态增删列

在 ext 表格中，动态添加列主要通过修改表格绑定的 column 元素，

通过对 column 元素集进行添加或删除，然后重新渲染表格，就能实现表格行的动态添加删除。

（1）动态添加表格的列

定义表格：

var gridTable = Ext.create('Ext.grid.Panel', {

id: 'gridTable',

region: 'center',

layout: 'fit',

columns: cols,

store: gridStore,

autoScroll: true,

});

添加列：

cols.push({

text: '列',

dataIndex: 'col',

120,

sortable: false,

menuDisabled: true,

});

gridTable.reconfigure(gridStore, cols); // 调用该方法重新配置的时候，会重新载入 store

（2）动态删除表格的列

cols.pop();

gridTable.reconfigure(gridStore, cols);

下面附上完整的 js 代码：

  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             }
 45         ];
 46     };
 47     // 初始化列
 48     function onInitColumn() {
 49         gridTable.reconfigure(gridStore, cols);
 50     };
 51 
 52     // 添加行
 53     function onAddRow() {
 54         gridStore.add({});
 55     };
 56 
 57     // 删除行
 58     function onDelRow() {
 59         gridStore.removeAt(gridStore.count() - 1);
 60     };
 61 
 62     // 添加列
 63     function onAddColumn() {
 64         cols.push({
 65             text: '列',
 66             dataIndex: 'col',
 67              120,
 68             sortable: false,
 69             menuDisabled: true,
 70         });
 71 
 72         gridTable.reconfigure(gridStore, cols);
 73     };
 74 
 75     // 删除列
 76     function onDelColumn() {
 77         cols.pop()
 78         gridTable.reconfigure(gridStore, cols);
 79     };
 80 
 81 </script>
 82 
 83 <!-- 面板定义 -->
 84 <script type="text/javascript">
 85     var toolbar = Ext.create('Ext.form.Panel', {
 86         id: 'tool-bar',
 87         region: 'north',
 88         bbar: [
 89             {
 90                 xtype: 'button',
 91                 text: '添加行',
 92                 handler: onAddRow
 93             },
 94             {
 95                 xtype: 'button',
 96                 text: '删除行',
 97                 handler: onDelRow
 98             },
 99             {
100                 xtype: 'button',
101                 text: '添加列',
102                 handler: onAddColumn
103             },
104             {
105                 xtype: 'button',
106                 text: '删除列',
107                 handler: onDelColumn
108             }
109         ]
110     });
111 
112     var gridTable = Ext.create('Ext.grid.Panel', {
113         id: 'gridTable',
114         region: 'center',
115         layout: 'fit',
116         columns: cols,
117         store: gridStore,
118         autoScroll: true,
119 
120     });
121 </script>
122 
123 <!-- 脚本入口 -->
124 <script type="text/javascript">
125     Ext.onReady(function () {
126         Ext.create('Ext.Viewport', {
127             id: 'iframe',
128             layout: 'border',
129             items: [
130                 toolbar,
131                 gridTable,
132             ]
133         });
134 
135         onInit();
136     });
137 </script>

下一篇将介绍如何编辑Ext表格