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');

}

});

转载于:https://www.cnblogs.com/zanguixuan/p/9811180.html

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

ExtJS 表格自定义列-动态widget
一.需求: 表格中根据数据不同,动态渲染出不同的组件. 二.环境: 1.操作系统: Microsoft Windows 10 专业版 2.OS 版本: 10.0.14393 暂缺 B ...
动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?
代码: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
arcgis前端(3)-----＞基础篇--自定义地图优化/隐藏or显示子图层
arcgis前端(3)----->基础篇–自定义地图优化/隐藏or显示子图层文章目录 arcgis前端(3)----->基础篇--自定义地图优化/隐藏or显示子图层前言实现效果展示 ...
android插件做动态权限,Mui本地打包笔记（四）Android自定义插件的配置（以动态申请权限为例）...
通过自定义插件方式实现Android平台的动态申请权限功能在上一章中完成了在Mui中调用Android原生的动态权限请求功能(Android动态申请权限的问题).虽然说完成了功能,但是在使用上并不是 ...
Android 自定义ToggleButton+用SharedPreferences保存用户配置
布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:i ...
vue element-ui自定义表头，动态添加表头，新增行、新增列、删除行、删除列
vue element-ui表格怎样自定义表头,动态添加表头,新增行.新增列.删除行.删除列需求描述 1.自定义表头,表头里插入输入框 2.默认初始化几行几列占位 3.新增行 4.新增列 5.右键点 ...
log4j2自定义appender插件源码、配置及采坑说明
本篇为扩展appender标签,如果需要扩展filer.marker等其他的log4j2提供的扩展方式,可以查看相关的文档: 中文文档:https://www.docs4dev.com/docs/zh ...
写过Mybatis插件？那说说自定义插件是如何加载的吧？
大多数框架,都支持插件,用户可通过编写插件来自行扩展功能,Mybatis也不例外. 我们从插件配置.插件编写.插件运行原理.插件注册与执行拦截的时机.初始化插件.分页插件的原理等六个方面展开阐述. 1 ...
美团一面：你既然写过Mybatis插件，能给我说说它底层是怎么加载一个自定义插件的吗？...
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:2020年7月程序员工资统计,平均14357元,又跌了,扎心个人原创100W+访问量博客:点击前往,查看更多大多 ...
【Gazebo入门教程】第六讲控制器插件的编写与配置（下）
[Gazebo入门教程]第六讲控制器插件的编写与配置(下) \qquad 文章目录 [Gazebo入门教程]第六讲控制器插件的编写与配置(下) 一.系统插件二.Velodyne传感器插件 1. ...

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

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

最新文章

热门文章