快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡亰平台9411小游戏:实现Extjs的GridPanel列状态的记忆功能



用户在操作列表的时刻,每每会根据自己的应用习气或者屏幕分辨率来对列的宽度,列的先后顺序,列的可见环境等进行一些调节,这些功能Extjs-GridPanel自身已经包孕。在这些操作后,用户又每每盼望下次再应用该界面的时刻能够重现上次的操作结果。这就带出来本文的主题----列状态影象功能。以下就实现列状态后台影象功能分几点进行描述阐明:

一、Extjs状态治理机制

Extjs4.1供给了一个状态治理器:Ext.state.Manager。查看该类源码可以发明,其引用了Ext.state.Provider类,并且其措施仅:setProvider、getProvider、get、set、clear。可以说真正的状态保存类照样在Ext.state.Provider上。Extjs为我们澳门新葡亰平台9411小游戏着实供给了一个Provider:Ext.state.CookieProvider,查看其代码,豁然豁达。无非便是用Cookie对控件的一些状态属性进行了保存和读取。

查看浏览器的cookie记录环境:

可以发明,我们需求做的便是把键值对丢到后台数据库里。而且,很多对控件的设置功能,原生控件已经整个包括,grid里面对付状态的治理真正起感化的可能便是:getState、applyState措施。

二、应用步骤

为gridPanel添加两个属性

var grid = Ext.create('Ext.grid.Panel', {

//..stateful: true,

stateId: 'UserList-Grid',//...

});

编写一个能够和办事器端交互的httpProvider来支持Ext.state.Manager。此处代码也借鉴了很多收集资本,如有雷同纯属巧合。

Ext.define('Ext.state.HttpProvider',

{extend: 'Ext.state.Provider',

//构造函数constructor : function(config) {

config = config || {};var me = this;

Ext.apply(me, confi澳门新葡亰平台9411小游戏g);

this.sup澳门新葡亰平台9411小游戏erclass.constructor.call(this);this.s澳门新葡亰平台9411小游戏tate =this.readValues();

},//缓存地址

url:'',// private

set: function(name, value) {if (typeof value == "undefined" || value === null) {

this.clear(name);return;

}

if (this.state[name] != value) {this.setValue(name, value);

}

this.superclass.set.call(this, name, value);},

// 清空数据clear: function(name) {

this.clearValue(name);this.superclass.clear.call(this, name);

},// 读取指定用户的整个结构数据

readValues: function() {var state = {};

var me = this;Ext.Ajax.request({

url: this.url + '/ReadLayout',async: false,

params: {},success: function(res, opts) {

if (res.responseText) {var json = Ext.decode(res.responseText);

if (json && json.length > 0) {

for (var i = 0; iif (json[i].Bustype != "") {

state[json[i].Bustype] = me.decodeValue(json[i].Value);}

}

}}

}});

return state;

},// 保存数据

setValue: function(name, value) {var me = this;

Ext.Ajax.request({url: this.url + '/SaveLayout',

params: {bustype:name,layoutValue:me.encodeValue(value)},success: function(res, opts) {

}});

},// 清空数据

clearValue: function(name) {Ext.Ajax.request({

url: this.url + '/ClearLayout',params: {bustype:name},

success: function(res, opts) {}

});}

});

当然在相宜的位置必须加上provider的注册代码:

Ext.state.Manager.setProvider(new Ext.state.HttpProvider({ url:'你的办事地址' }));

办事器端措施

1.添加实体对缓存数据进行描述

///

///

pm_layoutlogInfo Object///

Summary description for pm_layoutlogInfo.

//////

[Serializable]public class LayoutLogInfo

{///

/// Gid///

public string Gid{

get;set;

}

////// Bustype

///public string Bustype

{get;

set;}

///

/// Logid///

public string Logid{

get;set;

}

////// Value

///public string Value

{get;

set;}

}

2.介于本人办事器端为asp.net mvc4 就简单的列一下措施。

///

/// 获取指定营业结构影象数据///

///public JsonResult ReadLayout()

{List layoutLogInfo = new List();

//...后台获取数据

return Json(layoutLogInfo, JsonRequestBehavior.AllowGet);

}///

/// 保存结构///

///

///

///[ActionAuthorize(CtrType.NoThing)]

public JsonResult SaveLayout(string bustype, string layoutValue){

ReturnInfo info =new ReturnInfo(true, "");

//保存实体数据

return Json(info, JsonRequestBehavior.AllowGet);}

//////

//////

///public JsonResult ClearLayout(string bustype)

{ReturnInfo info = new ReturnInfo(true, "");

//..清空数据

return Json(info, JsonRequestBehavior.AllowGet);

}

其他留意项:清空状态信息

由于extjs没有供给清空状态的操作,以是假如营业场景必要规复到默认的状态,就必要在grid的列下拉菜单添加按钮用于向办事端发哀求清空数据。以下代码仅简单实现该功能:

grid.addListener('afterrender', function () {

if (grid.stateful && grid.stateId != undefined) {

var menu = this.headerCt.getMenu();

menu.add([{text: '默认结构',

iconCls: 'icon-Clear',handler: function () {

Ext.state.Manager.clear(grid.stateId);window.location.reload();

}}]);

}

});

此处我用刷新页面来规复状态,着实最好的法子照样重绘Grid而不影响其他控件,这里没有展开,也盼望有好法子的给我供给下澳门新葡亰平台9411小游戏措施。

您可能还会对下面的文章感兴趣: