关于Ext设计好的界面经常乱掉问题解决方法

最近在用Ext做界面设计的时候发现经常出现正常的页面在使用几次之后布局就乱七八糟的问题
查了下代码，发现是Ext的stateful作怪
在Component.js中有这么一句：

if(this.stateful !== false){
        this.initState(config);
    }

如果你调用Ext.state.Manager.setProvider启用了状态保持功能，很多component就会保持状态

saveState : function(){
        if(Ext.state.Manager){
            var state = this.getState();
            if(this.fireEvent('beforestatesave', this, state) !== false){
                Ext.state.Manager.set(this.stateId || this.id, state);
                this.fireEvent('statesave', this, state);
            }
}

可以看到保持的状态默认是用this.stateId || this.id做key，但是大部分component我们不会给他指定id，这时候ext就会默认给他生成一个id

    getId : function(){
        return this.id || (this.id = "ext-comp-" + (++Ext.Component.AUTO_ID));
    }

可以看出这个id是从ext-comp-1000开始的字符串
很有可能一个界面在刷新后，两个不同component具有同一个id，这时候stateful就会搞错对象，举个例子
Ext.Window中保持的状态是：

    getState : function(){
        return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox());
    },
    getBox : function(local){
        var s = this.el.getSize();
        if(local === true){
            s.x = this.el.getLeft(true);
            s.y = this.el.getTop(true);
        }else{
            var xy = this.xy || this.el.getXY();
            s.x = xy[0];
            s.y = xy[1];
        }
        return s;
    },

可以看到保存了Ext.Window的坐标以及大小，如果这些信息被加载到了其他component上面去了，不乱掉才怪
解决这个问题的办法是，默认禁掉stateful

1.不调用Ext.state.Manager.setProvider 不会启用保持
2.

if(this.stateful !== false){
        this.initState(config);
    }

改成

if(this.stateful){
        this.initState(config);
    }

默认就不保持状态，我就是这么干的

评论

3 楼 magicyang918 2008-08-27  

宽度怎么也会乱掉？
我们也经常遇到这样的问题。
另外

if(this.stateful){   
        this.initState(config);   
    } 

这句话应该加载代码的什么地方啊？是重写component吗？还是写在自己的代码中。
多谢楼主。

楼主帮忙看下我们的页面，经常出现北部局和其他布局隔了很大一块，需要清空缓存
还有就是有时候中布局的元素经常堆成一堆，全乱掉了。

2 楼 oznyang 2008-08-26  

没有了，另外要注意宽度问题，这个也会造成乱掉

1 楼 magicyang918 2008-08-26  

那楼主现在还存在这样的问题吗？页面还会乱吗？