关于保存列表表头的配置,一般我们不需要与后台交互,直接保存在 localStorage 中就能满足常规使用需求(需要浏览器支持)。
直接上代码,插件:
1 Ext.define('ux.plugin.ColumnCustom', { 2 alias: 'plugin.columnCustom', 3 xtype: 'columnCustom', 4 //初始化 5 init: function (gridPanel) { 6 var me = this; 7 me.owner = gridPanel; 8 //根据已有配置项设置表头状态 9 me.setColumnConfig(gridPanel); 10 gridPanel.on({ 11 columnschanged: me.saveColumnConfig, 12 scope: me 13 }); 14 }, 15 16 setColumnConfig: function (gridPanel) { 17 var me = this, 18 xtype = gridPanel.getXType(), 19 currentColumnConfig = me.getCurrentColumnConfig(), 20 columnConfig = currentColumnConfig[xtype], 21 columns = gridPanel.getColumns(); 22 if (!columnConfig) return; 23 columns.forEach(function (column) { 24 var dataIndex = column.config.dataIndex; 25 //只有常规列才有显式的dataIndex,序号列等非常规列应排除在外 26 if (!dataIndex) return; 27 column.setHidden(columnConfig[dataIndex]); 28 }); 29 }, 30 saveColumnConfig: function () { 31 var me = this, 32 gridPanel = me.owner, 33 currentColumnConfig = me.getCurrentColumnConfig(), 34 columns = gridPanel.getColumns(), 35 xtype = gridPanel.getXType(), 36 config = {}; 37 columns.forEach(function (column) { 38 var dataIndex = column.config.dataIndex; 39 //只有常规列才有显式的dataIndex,序号列等非常规列应排除在外 40 if (!dataIndex) return; 41 config[dataIndex] = column.isHidden(); 42 }); 43 //使用xtype作为索引是相对可靠的做法 44 currentColumnConfig[xtype] = config; 45 //localStorage的值类型限定为string类型 46 localStorage.setItem('columnConfig', Ext.encode(currentColumnConfig)); 47 48 }, 49 getCurrentColumnConfig: function () { 50 var allColumnConfigString = localStorage.getItem('columnConfig'), 51 allColumnConfig = Ext.decode(allColumnConfigString, true); 52 return allColumnConfig || {}; 53 } 54 });
如何使用:由于这是一个比较常规的需求,因此这里默认给所有的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'); } } });
以上。