ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
程序员文章站
2022-06-29 22:46:30
关于保存列表表头的配置,一般我们不需要与后台交互,直接保存在 localstorage 中就能满足常规使用需求(需要浏览器支持)。
直接上代码,插件:
ext....
关于保存列表表头的配置,一般我们不需要与后台交互,直接保存在 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使用自定义插件动态保存表头配置(隐藏或显示),希望对大家有所帮助
上一篇: 一看就懂 详解JAVA泛型通配符T,E,K,V区别
下一篇: Shell脚本for循环语句简明教程