ExtJs使用自定义插件动态保存表头配置(隐藏或显示)

关于保存列表表头的配置，一般我们不需要与后台交互，直接保存在 localstorage 中就能满足常规使用需求（需要浏览器支持）。

直接上代码，插件：

ext.define('ux.plugin.columncustom', {
  alias: 'plugin.columncustom',
  xtype: 'columncustom',
  //初始化
  init: function (gridpanel) {
    var me = this;
    me.owner = gridpanel;
    //根据已有配置项设置表头状态
    me.setcolumnconfig(gridpanel);
    gridpanel.on({
      columnschanged: me.savecolumnconfig,
      scope: me
    });
  },
  setcolumnconfig: function (gridpanel) {
    var me = this,
      xtype = gridpanel.getxtype(),
      currentcolumnconfig = me.getcurrentcolumnconfig(),
      columnconfig = currentcolumnconfig[xtype],
      columns = gridpanel.getcolumns();
    if (!columnconfig) return;
    columns.foreach(function (column) {
      var dataindex = column.config.dataindex;
      //只有常规列才有显式的dataindex，序号列等非常规列应排除在外
      if (!dataindex) return;
      column.sethidden(columnconfig[dataindex]);
    });
  },
  savecolumnconfig: function () {
    var me = this,
      gridpanel = me.owner,
      currentcolumnconfig = me.getcurrentcolumnconfig(),
      columns = gridpanel.getcolumns(),
      xtype = gridpanel.getxtype(),
      config = {};
    columns.foreach(function (column) {
      var dataindex = column.config.dataindex;
      //只有常规列才有显式的dataindex，序号列等非常规列应排除在外
      if (!dataindex) return;
      config[dataindex] = column.ishidden();
    });
    //使用xtype作为索引是相对可靠的做法
    currentcolumnconfig[xtype] = config;
    //localstorage的值类型限定为string类型
    localstorage.setitem('columnconfig', ext.encode(currentcolumnconfig));
  },
  getcurrentcolumnconfig: function () {
    var allcolumnconfigstring = localstorage.getitem('columnconfig'),
      allcolumnconfig = ext.decode(allcolumnconfigstring, true);
    return allcolumnconfig || {};
  }
});

如何使用：由于这是一个比较常规的需求，因此这里默认给所有的gridpanel配置此插件，并支持手动配置参数禁用之，考虑复写gridpanel类。

代码如下：

ext.define('override.grid.panel', {
  override: 'ext.grid.panel',
  requires: ['ux.plugin.columncustom'],
  columncustomdisable: false,
  initcomponent: function () {
    var me = this;
    me.callparent();
    //默认全部加上自动保存表头插件,此处追加一个可配属性来禁用此插件
    if (!me.columncustomdisable) {
      me.addplugin('columncustom');
    }
  }
});

总结

以上所述是小编给大家介绍的extjs使用自定义插件动态保存表头配置(隐藏或显示)，希望对大家有所帮助