一、动态增删行
在 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表格