PDA

View Full Version : if a component in layout of border can't be deleted and rebuilded dynamic



cntop@msn.com
5 Sep 2012, 11:40 PM
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
5 Sep 2012, 11:48 PM
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
6 Sep 2012, 12:03 AM
the code delete the east panel, but it does not create the new east panel.

evant
6 Sep 2012, 12:06 AM
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
6 Sep 2012, 12:13 AM
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
6 Sep 2012, 12:29 AM
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 (http://www.sencha.com/forum/member.php?2950-evant) and tvanzoelen (http://www.sencha.com/forum/member.php?32684-tvanzoelen).