ExtJS4.2：想实现动态替换Viewport的内容，为何不符合预期呢？

Question

本帖最后由 u011605971 于 2014-04-15 00:36:13 编辑

Answer 1

把panel2的创建过程移到handler里就好了
Ext.onReady(function(){
 var btn = new Ext.Button({
        text : "Change",
        handler : function() {
                var items=Ext.getCmp('central').items;
                console.info(items.keys[0]);
                var central=Ext.getCmp('central');
                console.info(central);
                Ext.getCmp('central').remove(items.keys[0]);
                //改动在此
                var panel2 = Ext.create('Ext.panel.Panel',{
            itemId : 'panel2',
            border : false,
            title : 'panel2',
            frame : true
        });
        //改动结束
                Ext.getCmp('central').add(panel2);
        }
    });
    var panel1 = new Ext.Panel({
        itemId : 'panel1',
        border : false,
        title : 'panel1',
            frame : true
        });
 
        var viewport = new Ext.Viewport({
            border : false,
            layout : 'border',
        items : [ {
            split : true,
            region : 'north',
            frame : true,
            height : 60,
            items : [ btn ]
        }, {
            split : true,
            border : false,
            region : 'west',
            frame : true,
            width : 240,
            collapsible : true,
            html : 'part2'
        }, {
            id : 'central',
            border : false,
            layout : 'fit',
            region : 'center',
            items : [ panel1 ]
        } ]
    });
})

Answer 2

第二次remove的就是panel2，导致对象销毁了，你在添加就报错了，需要重新new一个panle出来

Answer 3

4.2版本中写成remove(obj,false)就可以了，表示不销毁