PDA

View Full Version : Remove child items from fit layout panel.



bornsilly
5 Jun 2009, 2:56 AM
I am struggling with getting my code right regarding replacing a fit layout center panel.

Based on what item is selected in the menu, content is added to the center panel which has a fit layout.

The first time this goes alright, but the second time it deletes all of the items from the fit panel including the panel itself. I am using the removeAll function so i dont have to keep track which panel is current loaded to the panel.

I tried with the remove function and stored the active panel id in a variable and then removed it but this resulted that the next panel was drawn under the panel.

I am sure this is a mistake i am making but dont see what i am doing wrong.



Ext.app.MenuLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
processAttributes : function(attr){

// Menu section node
if(attr.name){

attr.text = attr.name ;

// Icon:
// attr.iconCls = attr.icon ;

// Override these values for our folder nodes because we are loading all data at once. If we were
// loading each node asynchronously (the default) we would not want to do this:
attr.loaded = true;
attr.expanded = true;
}
// Menu Item node
else if(attr.option){

// Set the node text that will show in the tree since our raw data does not include a text attribute:
attr.text = attr.option ;

// Icon:
// attr.iconCls = attr.icon ;

// Tell the tree this is a leaf node. This could also be passed as an attribute in the original XML,
// but this example demonstrates that you can control this even when you cannot dictate the format of
// the incoming source XML:
attr.leaf = true;
}
}
});


Ext.onReady(function(){

/*
* ================ Main Area config =======================
*/
// The Main area displayed on the right side of the screen.

var pnlMainArea = {
id: 'pnlMain',
layout: 'fit',
region: 'center',
margins: '2 5 5 0',
border: false,
bodyBorder: false,
autoScroll: true,
html: '<p This is the main area, all pages are loading into this area.</p>'
};

var pnlDetails = {
id: 'details-panel',
title: 'Details',
region: 'center',
split: true,
bodyStyle: 'padding-bottom:15px;background:#eee;',
autoScroll: true,
html: '<p class="details-info">When you select a option from the menu, additional details will display here.</p>'
};


/*
* ================ Main Menu config =======================
*/
// The Main menu displayed on the left side of the screen.

var pnlMainMenu = new Ext.tree.TreePanel({
id: 'pnlMenu',
title: 'Main Menu',
region:'north',
split: true,
height: 300,
minSize: 150,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
root: new Ext.tree.AsyncTreeNode(),

// Our custom TreeLoader:
loader: new Ext.app.MenuLoader({
dataUrl:'config/main_menu.xml'
}),

listeners: {
'render': function(tp){
tp.getSelectionModel().on('selectionchange', function(tree, node){
if(node.leaf){
if( node.attributes.id == "project_overview" ) {
var holder = Ext.getCmp('pnlMain');
holder.removeAll() ;
holder.add( pnlProjects ) ;
holder.doLayout();
}

}
})
}
}
});

var pnlProjectDetails = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
title: 'Description',
autoScroll:true
},{
title: 'Tasks',
autoScroll:true
},{
title: 'Resources',
autoScroll:true
},{
title: 'Documents',
autoScroll:true
},{
title: 'Master Gantt',
autoScroll:true
}]
});

var pnlProjectsGrid = new Ext.Panel({
id: 'project-grid',
title: 'Projects',
region: 'north',
split: true,
height: 250,
bodyStyle: 'padding-bottom:15px;background:#eee;',
autoScroll: true,
html: '<p class="details-info">This is the place were de project list will be displayed</p>'
});


var pnlProjects = {
id:'projects-panel',
layout:'border',
bodyBorder: false,
defaults: {
collapsible: false,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true,
bodyStyle: 'padding:15px'
},
items: [ pnlProjectsGrid, pnlProjectDetails ]
};


new Ext.Viewport({
id: 'ScreenLayout',
layout: 'border',
split: true,
title: 'EDIFiles Project Planner',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
},{
layout: 'border',
id: 'Menu',
region:'west',
border: false,
split: true,
margins: '2 0 5 5',
width: 275,
items: [pnlMainMenu, pnlDetails]
},pnlMainArea
],
renderTo: Ext.getBody()
});

});

conorarmstrong
5 Jun 2009, 3:02 AM
please format code in [code] tags & repost

Animal
5 Jun 2009, 3:57 AM
A layout: 'fit' Container should only have one child Component.

bornsilly
5 Jun 2009, 4:03 AM
A layout: 'fit' Container should only have one child Component.

Adding a panel using border layout isn't that 1 child? If not, how would i solve this?

Animal
5 Jun 2009, 4:19 AM
I don't know what's going on here.

Simplify and use precuse language.

Adding "content" signifies HTML

removing signifies removing (and therfore destroying) Components.

You can't add to a border layout.

bornsilly
5 Jun 2009, 4:55 AM
The fix panel is my center. You say that i can only add one child to a fit alyout.

As shown in my code. I am adding a panel that is of type border and this panel has some other panels. That in my eyes means that since the panel i am adding to the layout is 1 panel thus 1 child?

Adding "content" is indeed not the right choice of words. But as explained know i meant that i added a panel.

jay@moduscreate.com
5 Jun 2009, 5:19 AM
Please watch teh following and let me know if it helps you
http://tdg-i.com/58/ext-js-screencast-005-containers-add-and-remove

Animal
5 Jun 2009, 6:31 AM
Yes, adding one border layout Container to a fit layout is OK.

Of course by default a Component is destroyed on remove.

bornsilly
5 Jun 2009, 8:21 AM
I am getting the idea, however in my case removing the items from pnlMain works, but it looks like pnlMain also dissapeared. Next executing the code that created the panel on pnlMain does not create that panel as how it did it the first time.

Providing the code in my first message, how would i remove all the items from pnlMain keeping pnlMain (which is layout fit) and add a new panel to it?

bornsilly
5 Jun 2009, 8:31 AM
Please watch teh following and let me know if it helps you
http://tdg-i.com/58/ext-js-screencast-005-containers-add-and-remove

Great tutorial! But it is basically what i am trying to do.

bornsilly
5 Jun 2009, 11:45 AM
I am wondering since what i learned i am adding only one component to the fit layout, and i am removing it as how it is suppose to be done that there might perhaps be a bug or something?

Animal
5 Jun 2009, 11:50 AM
My app does this all the time. It's how we "navigate".

What is the problem?

bornsilly
5 Jun 2009, 12:22 PM
My app does this all the time. It's how we "navigate".

What is the problem?

The problem is that in my viewport i have a Treepanel (West), Header(north), and a Center Panel (fit). Depending on the item pressed in the treepanel a new panel is loaded in the center panel. This works fine. However if i want to load a other panel in the center panel it does not work. In my first post i posted the code i am using. When i use the removeAll to remove the child item from 'pnlMain' i can see in the console that the div is empty and it removed the panel that i loaded. however if i click the item in the treepanel again. The panel (projects-panel) that first displayed fine either doesn't show. Or is displayed under the div of pnlMain.

Any help is highly appreciated.

Animal
6 Jun 2009, 8:30 AM
removing destroys the removed Component... as I mentioned.

jay@moduscreate.com
6 Jun 2009, 8:38 AM
removing destroys the removed Component... as I mentioned.

Not to steal your thunder, but not entirely true :)

Animal
6 Jun 2009, 9:00 AM
Unless you configure the Container otherwise, or veto the event.

jay@moduscreate.com
6 Jun 2009, 9:09 AM
?

remove( Component/String component, [Boolean autoDestroy] )

Animal
6 Jun 2009, 9:17 AM
.. mmm. ah.. yes... also, unless you override the default in the remove call!

bornsilly
9 Jun 2009, 10:45 AM
Well, using the delete methode destroys indeed the var that created the panel. Setting this to false doesnt remove the panel from the screen. So what i did, is to create the panel in a function and destroy it when a other panel needs to be loaded. I would have expected a bit more elegant way of doing things but i supose this works as well.