关于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);
    }

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