EXT客户端panel上次打开时的状态(本地保存列隐藏、顺序、列宽、窗口大小)

最近碰到这么一个需求，客户想要每次打开网页时显示上一次自己编辑过的某些列。比如对某些列隐藏，增加列宽等
网上找了很久， 没有找到我想要的。
于是有了下边的这段代码。
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
原创不易 转载时请注明出处