EXTJS表格功能扩展 之 有状态表格StatefulGrid

1、状态保存服务

为了实现有状态表格，首选我们要提供状态保存服务，ExtJs已经提供了状态管理：Ext.state.Provider，为了让我们的代码更加优雅，我扩展了Provider。主要提供了布局配置的加载、清空、保存和获取服务。代码如下：

Ext.define('Pds.svc.UISettingsSvc', {
extend: 'Ext.state.Provider',
singleton: true,
alternateClassName: 'UISettingsSvc',

// 界面配置
settings: {
load: serviceUrl('settings/load'),
save: serviceUrl('settings/save'),
clear: serviceUrl('settings/clear')
},

/**
* 加载配置，一般要界面首次加载时调用
*/
loadState: function() {
var me = this;
Cxt.Utils.ajax({
request: {
async: false,
url: me.settings.load
},
success: function(ret) {
if (!ret.data) {
ret.state = [];
} else {
for (var field in ret.data) {
ret.data[field] = me.decodeValue(ret.data[field]);
}
me.state = ret.data;
}
}
});
},

/**
* 获取控件状态
*
* @param {}
* name
* @param {}
* defaultValue
* @return {}
*/
get: function(name, defaultValue) {
// 防止状态被外部直接修改
return Ext.clone(typeof this.state[name] == "undefined" ? defaultValue : this.state[name]);
},

/**
* 重置布局时，清理后台的状态信息
*
* @param {}
* cmp
* @param {}
* name
* @param {}
* callback
*/
clearState: function(cmp, name, callback) {
var me = this;
if (!me.state[name]) {
if (callback)
callback();
return;
}
Cxt.Utils.ajax({
mask: {
target: cmp,
message: '清空配置...'
},
request: {
url: UISettingsSvc.settings.clear,
params: {
key: name
}
},
success: function(ret) {
delete me.state[name];
if (callback)
callback();
}
});
},

/**
* 保存布局
*
* @param {}
* cmp
* @param {}
* name
* @param {}
* value
* @param {}
* callback
*/
saveState: function(cmp, name, value, callback) {
var me = this;
if (typeof value == "undefined" || value === null) {
me.clearState(name, callback);
return;
}
if (me.state[name] != value) {
Cxt.Utils.ajax({
mask: {
target: cmp,
message: '保存配置...'
},
request: {
url: UISettingsSvc.settings.save,
params: {
key: name,
value: me.encodeValue(value)
}
},
success: function(ret) {
me.state[name] = value;
if (callback)
callback();
}
});
}
}
});
2、布局配置预加载
在整个页面加载时，先调用UISettingsSvc.loadState();进行布局配置加载，把服务端当前用户的布局配置信息存储到本地。这样后续各界面读取布局配置时，就不用再调用后台服务。

3、控件布局加载

在界面表格控件初始化时，我们取出表格的布局信息，主要包括：显示/隐藏列、每个列的排序。并把布局应用到当前表格，同时为表格提供重置布局和保存布局的功能：

/**
* 支持保存布局
*/
Ext.define('Pds.cmp.grid.StatefulGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.pds.statefulgrid',
requires: [//
'Pds.svc.UISettingsSvc'//
],

initComponent: function() {
var me = this;
if (Ext.isArray(me.columns)) {
// 默认列标题居中显示并自动换行
for (var i in me.columns) {
me.columns[i].cls = 'pds-header-center';
}
}
me.defaultSorters = Ext.encode(me.store.sorters);
me.defaultFilters = Ext.encode(me.store.filters);
me.callParent();

// 应用UI配置
var state = UISettingsSvc.get(me.getStateId());
if (state) {
me.applyState(state);
}

// 添加菜单，允许恢复默认布局
me.headerCt.on('menucreate', function(headerCt, menu) {
if (me.stateId) {
var menu = me.headerCt.getMenu();
menu.add('-', {
text: '保存布局',
iconCls: 'icon-save',
itemId: 'sateState',
handler: function(item, e) {
UISettingsSvc.saveState(me, me.getStateId(), me.getState());
}
}, {
text: '重置布局',
iconCls: 'icon-refresh',
itemId: 'resetState',
handler: function(item, e) {
UISettingsSvc.clearState(me, me.getStateId(), function() {
me.store.sorters = new Ext.util.AbstractMixedCollection(false, function(item) {
return item.id || item.property;
});
me.store.sorters.addAll(me.store.decodeSorters(Ext.decode(me.defaultSorters)));
me.store.filters = Ext.decode(me.defaultFilters);
me.reconfigure(me.store, me.initialConfig.columns);
});
}
});
}
});
}
});