PDA

View Full Version : Add / Removing Components Dynamically



roflware
28 Jun 2008, 5:01 AM
Hi, i am having a great deal of trouble trying to perform what appears to be quite a basic operation.

Please keep in mind this is my very first attempt at using ExtJS.

I am trying to dynamically remove an item from the Center Border Region and replace it with a new one and then call doLayout.

here is my code...


<html>
<head>
<title>EXTJS Test</title>
</head>

<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript">

var accordion_menu = {
id:'accordion-menu',
layout:'accordion',
region: 'east',
margins: '3 3 3 3',
split: false,
width: 210,
defaults: {
border: false
},
layoutConfig: {
hideCollapseTool: true
},
items: [{title: 'menu 1'},{title: 'menu 2'},{title: 'menu 3'}]
};

var blankPage = {
id: 'main-content',
region: 'center',
margins: '3 3 3 3',
frame: true,
plain: true,
defaults: {
bodyStyle: 'padding:15px'
},
items: [{title: 'original title', html: 'original content'}]
};

var panel = new Ext.Panel({title: 'new title', html: 'new content'});

var objWindow = new Ext.Viewport({
id: 'main-window',
layout: 'border',
items: [{
region: 'north',
id: 'header',
html: 'nice title',
border: false,
height: 30
},
accordion_menu,
blankPage
],
renderTo: Ext.getBody()
});
</script>

<body>
</body>
</html>


I obviously have no idea how this is supposed to work.

//none of the follwing work
Ext.getCmp('main-content').hide();
Ext.getCmp('main-content').destroy();
Ext.getCmp('main-content').remove();
Ext.getCmp('main-content').items.get(0).remove();
Ext.getCmp('main-content').items.get(0).destroy();

What i am tryign to achieve is to remove the child element of blankPage and replace it with panel.

can somebody please show me what i am doing wrong?

regards,
Jeff

hendricd
28 Jun 2008, 5:50 AM
Couple things to note:

Regions of a border layout cannot be removed, but it's items can.

The Ext.Container.remove method handles item destruction properly.

Using something like this (http://extjs.com/forum/showthread.php?t=39700):


blankPage.removeAll(true); ...would remove child items safely.

roflware
28 Jun 2008, 6:12 AM
for the code i have sent you i can't fine a way to get .remove to run...
also
blankPage.removeAll(true); wont work because blankPage is simple an object that was used to graft the initial UI component.

Can you help me with my problem, i need to remove the panel which is the only child of the center region, and replace is with the object panel.

hendricd
28 Jun 2008, 6:18 AM
If your center region is out-of-scope, do a component lookup on it:


var p= Ext.getCmp('main-content');
if(p){
p.removeAll(true);
p.add(somethingElse);
p.doLayout();
}

hendricd
28 Jun 2008, 6:27 AM
or, do it long way:



var p= Ext.getCmp('main-content');
var i;
if(p){
while( i = p.items.last()){
p.remove(i, true);
}
p.add(somethingElse);
p.doLayout();
}

roflware
28 Jun 2008, 6:40 AM
here is a link to my example page
http://portal.huntmigration.com/exttest.html
i have tried what you said but it tells me "p.removeAll is not a function"

can you have a look and tell me what you think is wrong?

hendricd
28 Jun 2008, 7:06 AM
forget the removeAll for now, you would need to include that override in your code somewhere. Use my previous post instead.

roflware
28 Jun 2008, 7:23 AM
if i run your code in firebug it does nothing.
perhaps you could have a look on the link i provided to the sample i am trying to get to work.

i cant manage to hide the child element of #main-content, let alone replace it with the new panel.


this doesnt work...

var p= Ext.getCmp('main-content');
var i;
if(p){
while( i = p.items.last()){
p.remove(i, true);
}
p.add(somethingElse);
p.doLayout();
}

Animal
28 Jun 2008, 8:09 AM
If you want to use blankPage as a Panel, you must instantiate it as a Panel rather than leaving it as a configuration object for a Panel.

So use "new Ext.Panel(" ... ")" to create a Panel that is used at the center region.

Also, remember that you need to specify a layout type.

If you are changing what you display there, I suggest layout: 'card'. That way, you can add as many child items as you like. You do't have to add and remove. You can simply use



blankPage.layout.setActiveItem(whicheverPanelYouWant);


to bring any child item of that "to the front"

roflware
28 Jun 2008, 4:36 PM
Thanks animal i feel i am much closer to a solution now :)

I have subsequently change my code to whats below.

However when i try to call: Ext.getCmp('main-content').layout.setActiveItem(1) or Ext.getCmp('main-content').layout.setActiveItem('card2') they both return nothing. but are valid functions of Ext.getCmp('main-content').layout.

The code is also live at http://portal.huntmigration.com/exttest3.html


var panel1 = new Ext.Panel({
id: 'card1',
title: 'new title',
html: 'new content'
});

var panel2 = new Ext.Panel({
id: 'card2',
title: 'new title 2',
html: 'new content 2'
});

var blankPage = new Ext.Panel({
layout: 'card',
activeItem: 0,
id: 'main-content',
region: 'center',
frame: true,
plain: true,
items: [panel1]
});

var objWindow = new Ext.Viewport({
id: 'main-window',
layout: 'border',
items: [{
region: 'north',
id: 'header',
html: 'nice title',
border: false,
height: 30
},
//accordion_menu,
blankPage
],
renderTo: Ext.getBody()
});

Animal
29 Jun 2008, 12:05 AM
The code at that page works. It just displays the "nice title" north region while your center Panel displays the panel1 Panel which just displays "new content".

It's all working.

setActiveItem doesn't return anything. It just brings one of the multiple child items of a card layout to the front.

Your "blankPage" card layout has only one child in this case, so that's what you see.