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

1. 在 ext 表格中，

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

通过对 store 数据集进行添加或删除，

就能实现表格行的动态添加删除。

 

（1） 动态添加表格的行 

gridStore.add({});

 

（2） 动态删除表格的行 

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

 

2. 在 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>

 

转载于:https://my.oschina.net/u/2430398/blog/711505