Ext 动态添加 删除 组件的问题

Question

/// <reference path="../../Ext/vswd-ext_2.0.2.js" />
Ext.onReady(function() {
    var s1 = new Ext.data.Store({
        reader: new Ext.data.JsonReader({}, [{ name: "Id" }, { name: "name"}]),
        data: [{ id: "1", name: "name1"}]
    });
    var g1 = new Ext.grid.GridPanel({
        store: s1, border: false, loadMask: { msg: "正在加载..." }, viewConfig: { forceFit: true },
        columns: [{ header: "姓名", dataIndex: "name", sortable: true}]
    });
    /*会员充值*/
    var s2 = new Ext.data.Store({
        reader: new Ext.data.JsonReader({}, [{ name: "Id" }, { name: "age"}]),
        data: [{ id: "2", age: 26}]
    });
    var g2 = new Ext.grid.GridPanel({
        store: s2, border: false, loadMask: { msg: "正在加载..." }, viewConfig: { forceFit: true },
        columns: [
         { header: "年龄", dataIndex: "age", sortable: true }
    ]
    });
    var win = new Ext.Window({
        title: "查询", width: 500, height: 350, constrain: true, layout: "fit", items: g1,
        buttons: [
            { text: "显示g1", handler: function() { win.removeAll(); win.add(g1); win.render(); win.doLayout(); } },
            { text: "显示g2", handler: function() { win.removeAll(); win.add(g2); win.render(); win.doLayout(); } }
        ]
    });
    win.show();
})这是源码，执行一下就知道了。第一次单击显示g1，g2没有问题，第二次再单击就看不到g1，g2了。不显示。
求解！

Answer 1

改一下这里{ text: "显示g1", handler: function () { win.removeAll(false); win.add(g1); g2.hide(); g1.show(); win.render(); win.doLayout(); } },
            { text: "显示g2", handler: function () { win.removeAll(false); win.add(g2); g1.hide(); g2.show(); win.render(); win.doLayout(); } }

Answer 2

Ext.onReady(function() {
    var s1 = new Ext.data.Store({
        reader: new Ext.data.JsonReader({}, [{ name: "Id" }, { name: "name"}]),
        data: [{ id: "1", name: "name1"}]
    });
    var g1 = new Ext.grid.GridPanel({
        store:s1,border: false, loadMask: { msg: "正在加载..." }, viewConfig: { forceFit: true },
        columns: [{ header: "姓名", dataIndex: "name", sortable: true}]
    });
    /*会员充值*/
    var s2 = new Ext.data.Store({
        reader: new Ext.data.JsonReader({}, [{ name: "Id" }, { name: "age"}]),
        data: [{ id: "2", age: 26}]
    });
    var g2 = new Ext.grid.GridPanel({
        store: s2, border: false, loadMask: { msg: "正在加载..." }, viewConfig: { forceFit: true },
        columns: [
         { header: "年龄", dataIndex: "age", sortable: true }
    ]
    });
    var win = new Ext.Window({
        title: "查询", width: 500, height: 350, constrain: true, layout: "fit",
        buttons: [
            { text: "显示g1", handler: function() {win.removeAll(false);win.add(g1);g1.show();g2.hide();win.doLayout();} },
            { text: "显示g2", handler: function() {win.removeAll(false);win.add(g2);g2.show();g1.hide();win.doLayout();} }
        ]
    });
    win.show();
});

Answer 3

removeAll( [Boolean autoDestroy] ) : Array 
从此容器中移除某个组件。Removes all components ... 
从此容器中移除某个组件。Removes all components from this container. 
参数项： 
autoDestroy : Boolean 
True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config. 
返回值： 
Array 
被销毁的组件数组。Array of the destroyed components 

Answer 4

{ text: "显示g1", handler: function () { win.removeAll(false); win.add(g1); g2.hide(); g1.show();} },
{ text: "显示g2", handler: function () { win.removeAll(false); win.add(g2); g1.hide(); g2.show();} }

Answer 5

动态增删就把创建的过程放到方法里面去，不然你删除了就摧毁了，没有了。否则就得用hide和show来做