if a component in layout of border can't be deleted and rebuilded dynamic

[cntop@msn.com]

i'm new to extjs and want to delete and rebuild a component in layout of border, code below:

var eastPanel_before = new Ext.Panel({
id: 'eastPanel_before',
title: 'east comp',
region: 'east',
html: "prepare to delete",
collapsible: true,
width: 100
});
var eastPanel_now = new Ext.Panel({
id: 'eastPanel_now',
title: 'east comp',
region: 'east',
html: "want to add",
collapsible: true,
width: 100
});
Ext.create('Ext.Panel', {
id: 'myPanel',
title: 'myPanel',
renderTo: document.body,
width: 400,
height: 300,
layout: 'border',
defaults: {
split: true,
collapsible: true,
bodyStyle: 'padding:15px'
},
items: [{
region: 'north',
title: 'north',
xtype: "panel",
html: "north",
height: 70
},
{
region: 'west',
title: 'west',
xtype: "panel",
html: "west",
width: 100
},
{
region: 'center',
title: 'center',
xtype: "panel",
html: "center",
items: [{
xtype: 'button',
text: 'delete and rebuild',
handler: function() {
eastPanel_before.destroy();
Ext.getCmp("myPanel").items.add(eastPanel_now);
Ext.getCmp("myPanel").doLayout();
}
}]
},
{
region: 'south',
title: 'south',
xtype: "panel",
html: "south",
height: 70
},
eastPanel_before]
});

in this code, i'can delete the east component but can't rebuild it. I owner you a lot for help.

[tvanzoelen]

I did run the sample, whats the problem. It works. It deletes and the new panel it set

Ext.onReady(function() {
    Ext.QuickTips.init();

    var eastPanel_before = new Ext.Panel({
        id: 'eastPanel_before',
        title: 'east comp',
        region: 'east',
        html: "prepare to delete",
        collapsible: true,
        width: 100
    });
    var eastPanel_now = new Ext.Panel({
        id: 'eastPanel_now',
        title: 'east comp',
        region: 'east',
        html: "want to add",
        collapsible: true,
        width: 100
    });
    Ext.create('Ext.Panel', {
        id: 'myPanel',
        title: 'myPanel',
        renderTo: document.body,
        width: 400,
        height: 300,
        layout: 'border',
        defaults: {
            split: true,
            collapsible: true,
            bodyStyle: 'padding:15px'
        },
        items: [{
            region: 'north',
            title: 'north',
            xtype: "panel",
            html: "north",
            height: 70
        },
{
    region: 'west',
    title: 'west',
    xtype: "panel",
    html: "west",
    width: 100
},
{
    region: 'center',
    title: 'center',
    xtype: "panel",
    html: "center",
    items: [{
        xtype: 'button',
        text: 'delete and rebuild',
        handler: function() {
            eastPanel_before.destroy();
            Ext.getCmp("myPanel").items.add(eastPanel_now);
            Ext.getCmp("myPanel").doLayout();
        }
}]
    },
{
    region: 'south',
    title: 'south',
    xtype: "panel",
    html: "south",
    height: 70
},
eastPanel_before]
    });

});

[cntop@msn.com]

the code delete the east panel, but it does not create the new east panel.

[evant]

Note that you need 4.1.x to be able to dynamically modify a border layout:

Ext.require('*');

Ext.onReady(function() {
    var eastPanel_before = new Ext.Panel({
        id: 'eastPanel_before',
        title: 'east comp',
        region: 'east',
        html: "prepare to delete",
        collapsible: true,
        width: 100
    });
    var eastPanel_now = new Ext.Panel({
        id: 'eastPanel_now',
        title: 'east comp',
        region: 'east',
        html: "want to add",
        collapsible: true,
        width: 100
    });
    Ext.create('Ext.Panel', {
        id: 'myPanel',
        title: 'myPanel',
        renderTo: document.body,
        width: 400,
        height: 300,
        layout: 'border',
        defaults: {
            split: true,
            collapsible: true,
            bodyStyle: 'padding:15px'
        },
        items: [{
            region: 'north',
            title: 'north',
            xtype: "panel",
            html: "north",
            height: 70
        }, {
            region: 'west',
            title: 'west',
            xtype: "panel",
            html: "west",
            width: 100
        }, {
            region: 'center',
            title: 'center',
            xtype: "panel",
            html: "center",
            items: [{
                xtype: 'button',
                text: 'delete and rebuild',
                handler: function() {
                    eastPanel_before.destroy();
                    Ext.getCmp("myPanel").add(eastPanel_now);
                }
            }]
        }, {
            region: 'south',
            title: 'south',
            xtype: "panel",
            html: "south",
            height: 70
        }, eastPanel_before]
    });
});

[tvanzoelen]

Yes works with me, so the diference is

Ext.getCmp("myPanel").add(eastPanel_now);

instead of

Ext.getCmp("myPanel").items.add(eastPanel_now);

and no updateLayout call needed.

[cntop@msn.com]

woooow~, the code does not works in extjs4.0, but it works in extjs4.1 perfect!
i want to upgrade 4.0 to 4.1 in my project, does extjs support backword-compatible?
thanks a lot to evant and tvanzoelen.