一、动态增删行
在 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',
width: 120,
sortable: false,
menuDisabled: true,
});
gridTable.reconfigure(gridStore, cols); // 调用该方法重新配置的时候，会重新载入 store
（2）动态删除表格的列
cols.pop();
gridTable.reconfigure(gridStore, cols);
下面附上完整的 js 代码：
<!-- 数据定义 -->
<script type="text/javascript">
var data; // 表格数据
var cols; // 表格列 var gridStore = Ext.create('Ext.data.Store', {
fields: ['Name']
}); </script> <!-- 事件定义 -->
<script type="text/javascript">
// 初始化整个页面
function onInit() {
onLoadData(); onInitVar();
onInitColumn();
};
// 请求加载表格数据
function onLoadData() {
data = [{ 'Name': '老狼' }, { 'Name': '小羊' }];
gridStore.loadData(data);
}; // 初始化页面的变量参数
function onInitVar() {
cols = [
{
xtype: 'rownumberer',
text: '序号',
align: 'center',
minWidth: 50,
maxWidth: 50,
},
{
text: '姓名',
dataIndex: 'Name',
minWidth: 85,
maxWidth: 85,
sortable: false,
menuDisabled: true,
}
];
};
// 初始化列
function onInitColumn() {
gridTable.reconfigure(gridStore, cols);
}; // 添加行
function onAddRow() {
gridStore.add({});
}; // 删除行
function onDelRow() {
gridStore.removeAt(gridStore.count() - 1);
}; // 添加列
function onAddColumn() {
cols.push({
text: '列',
dataIndex: 'col',
width: 120,
sortable: false,
menuDisabled: true,
}); gridTable.reconfigure(gridStore, cols);
}; // 删除列
function onDelColumn() {
cols.pop()
gridTable.reconfigure(gridStore, cols);
}; </script> <!-- 面板定义 -->
<script type="text/javascript">
var toolbar = Ext.create('Ext.form.Panel', {
id: 'tool-bar',
region: 'north',
bbar: [
{
xtype: 'button',
text: '添加行',
handler: onAddRow
},
{
xtype: 'button',
text: '删除行',
handler: onDelRow
},
{
xtype: 'button',
text: '添加列',
handler: onAddColumn
},
{
xtype: 'button',
text: '删除列',
handler: onDelColumn
}
]
}); var gridTable = Ext.create('Ext.grid.Panel', {
id: 'gridTable',
region: 'center',
layout: 'fit',
columns: cols,
store: gridStore,
autoScroll: true, });
</script> <!-- 脚本入口 -->
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.Viewport', {
id: 'iframe',
layout: 'border',
items: [
toolbar,
gridTable,
]
}); onInit();
});
</script>
下一篇将介绍如何编辑Ext表格