最近碰到这么一个需求,客户想要每次打开网页时显示上一次自己编辑过的某些列。比如对某些列隐藏,增加列宽等
网上找了很久, 没有找到我想要的。
于是有了下边的这段代码。
EXT 本身封装有一个状态控制器。提供我们来调用。
不能使用Cookie 来保存。cookie最大只能是4K左右,不能满足需求
Ext.define("Ext.state.Provider", { //封装自定义provider
mixins : {
observable : "Ext.util.Observable"
},
prefix : "ext-",
constructor : function (d) {
d = d || {};
var c = this;
Ext.apply(c, d);
c.addEvents("statechange"); //注册事件
c.state = {};
c.mixins.observable.constructor.call(c)
},
get : function (c, d) { //重写方法
//return typeof this.state[c] == "undefined" ? d : this.state[c]
var jso=window.localStorage[c]; //读取浏览器保存的数据
// alert(jso);
return this.decodeValue(jso); //解码
},
clear : function (d) {
var c = this;
delete c.state[d];
c.fireEvent("statechange", c, d, null)
},
set : function (e, f) {
var d = this;
// d.state[e] = f;
// d.fireEvent("statechange", d, e, f) //JSON.stringify(db)
var msms=this.encodeValue(f); //状态对象序列化编码
window.localStorage[e] = msms; //存储到浏览器的localStorage中
// alert(msms);
},
decodeValue : function (o) { //反序列化方法
var r = this,
k = /^(a|n|d|b|s|o|e)\:(.*)$/,
s = k.exec(unescape(o)),
n,
q,
t,
l,
p,
m;
if (!s || !s[1]) {
return
}
q = s[1];
o = s[2];
switch (q) {
case "e":
return null;
case "n":
return parseFloat(o);
case "d":
return new Date(Date.parse(o));
case "b":
return (o == "1");
case "a":
n = [];
if (o != "") {
l = o.split("^");
p = l.length;
for (m = 0; m < p; m++) {
o = l[m];
n.push(r.decodeValue(o))
}
}
return n;
case "o":
n = {};
if (o != "") {
l = o.split("^");
p = l.length;
for (m = 0; m < p; m++) {
o = l[m];
t = o.split("=");
n[t[0]] = r.decodeValue(t[1])
}
}
return n;
default:
return o
}
},
encodeValue : function (j) { //序列化方法
debugger
var i = "",
k = 0,
g,
h,
l;
if (j == null) {
return "e:1"
} else {
if (typeof j == "number") {
g = "n:" + j
} else {
if (typeof j == "boolean") {
g = "b:" + (j ? "1" : "0")
} else {
if (Ext.isDate(j)) {
g = "d:" + j.toGMTString()
} else {
if (Ext.isArray(j)) {
for (h = j.length; k < h; k++) {
i += this.encodeValue(j[k]);
if (k != h - 1) {
i += "^"
}
}
g = "a:" + i
} else {
if (typeof j == "object") {
for (l in j) {
/* if(l=='width') break;取消对列宽的保存*/
if (typeof j[l] != "function" && j[l] !== undefined) {
i += l + "=" + this.encodeValue(j[l]) + "^"
}
}
g = "o:" + i.substring(0, i.length - 1)
} else {
g = "s:" + j
}
}
}
}
}
}
return escape(g)
}
});
Ext.define("Ext.state.Manager", { //重写Manger对象
singleton : true,
requires : ["Ext.state.Provider"],
constructor : function () {
this.provider = new Ext.state.Provider()
},
setProvider : function (b) {
this.provider = b
},
get : function (c, d) {
return this.provider.get(c, d)
},
set : function (d, c) {
this.provider.set(d, c)
},
clear : function (b) {
this.provider.clear(b)
},
getProvider : function () {
return this.provider
}
});
Ext.define("Ext.state.Stateful", {
mixins : {
observable : "Ext.util.Observable"
},
requires : ["Ext.state.Manager"],
stateful : false,
saveDelay : 100,
constructor : function (d) {
var c = this;
d = d || {};
if (d.stateful !== undefined) {
c.stateful = d.stateful
}
if (d.saveDelay !== undefined) {
c.saveDelay = d.saveDelay
}
c.stateId = c.stateId || d.stateId;
if (!c.stateEvents) {
c.stateEvents = []
}
if (d.stateEvents) {
c.stateEvents.concat(d.stateEvents)
}
this.addEvents("beforestaterestore", "staterestore", "beforestatesave", "statesave");
c.mixins.observable.constructor.call(c);
if (c.stateful !== false) {
c.addStateEvents(c.stateEvents);
c.initState()
}
},
addStateEvents : function (j) {
var h = this,
f,
i,
g;
if (h.stateful && h.getStateId()) {
if (typeof j == "string") {
j = Array.prototype.slice.call(arguments, 0)
}
g = h.stateEventsByName || (h.stateEventsByName = {});
for (f = j.length; f--; ) {
i = j[f];
if (!g[i]) {
g[i] = 1;
h.on(i, h.onStateChange, h)
}
}
}
},
onStateChange : function () {
var h = this,
f = h.saveDelay,
g,
e;
if (!h.stateful) {
return
}
if (f) {
if (!h.stateTask) {
g = Ext.state.Stateful;
e = g.runner || (g.runner = new Ext.util.TaskRunner());
h.stateTask = e.newTask({
run : h.saveState,
scope : h,
interval : f,
repeat : 1
})
}
h.stateTask.start()
} else {
h.saveState()
}
},
saveState : function () {
var e = this,
g = e.stateful && e.getStateId(),
f = e.hasListeners,
h;
if (g) {
h = e.getState() || {};
if (!f.beforestatesave || e.fireEvent("beforestatesave", e, h) !== false) {
Ext.state.Manager.set(g, h);
if (f.statesave) {
e.fireEvent("statesave", e, h)
}
}
}
},
getState : function () {
return null
},
applyState : function (b) {
if (b) {
Ext.apply(this, b)
}
},
getStateId : function () {
var b = this;
return b.stateId || (b.autoGenId ? null : b.id)
},
initState : function () {
var e = this,
g = e.stateful && e.getStateId(),
f = e.hasListeners,
h;
if (g) {
h = Ext.state.Manager.get(g);
if (h) {
h = Ext.apply({}, h);
if (!f.beforestaterestore || e.fireEvent("beforestaterestore", e, h) !== false) {
e.applyState(h);
if (f.staterestore) {
e.fireEvent("staterestore", e, h)
}
}
}
}
},
savePropToState : function (i, j, k) {
var g = this,
l = g[i],
h = g.initialConfig;
if (g.hasOwnProperty(i)) {
if (!h || h[i] !== l) {
if (j) {
j[k || i] = l
}
return true
}
}
return false
},
savePropsToState : function (h, j) {
var f = this,
g,
i;
if (typeof h == "string") {
f.savePropToState(h, j)
} else {
for (g = 0, i = h.length; g < i; ++g) {
f.savePropToState(h[g], j)
}
}
return j
},
destroy : function () {
var c = this,
d = c.stateTask;
if (d) {
d.destroy();
c.stateTask = null
}
c.clearListeners()
}
});
附带一个调试时的例子。供大家参考。 如有问题可以加我Q :1060772855 附带备注(EXT)
附件地址http://pan.baidu.com/s/1dFma5bz
原创不易 转载时请注明出处