编辑 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',

    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表格