PDA

View Full Version : How to Update a Panel based on Tab listener



joevelardi
22 Jul 2010, 9:14 PM
Hey, am a newbie to Ext, have read many articles but cannot find an answer

I have a viewport layout with a center and west region. The center region has tabs, and the west region is a panel with content.

I am wanting to update the content of the west region based on the activation of a tab.

Have tried the following without success;

In the code below, the west region content changes on first instance, but when i flick between tabs the content does not change again.



function handleActivateHome(tab){
westRegion.remove(westReports);
westRegion.add(westHome);
westRegion.doLayout(westHome);
}

function handleActivateReport(tab){
westRegion.remove(westHome);
westRegion.add(westReports);
westRegion.doLayout(westReports);
}
I have also tried the code below based on the Ext examples but i receive an error in firebug as 'not defined'.


function handleActivate(tab){

Ext.getCmp('west-region').layout.setActiveItem('west-' + tab.id + '-panel');
}

// Center Region Config
var centerRegion = new Ext.TabPanel({
region: 'center',
id: 'center-panel',
activeTab: 0,
items: [ centerHome, centerReports ]
});

Bing Qiao
23 Jul 2010, 1:14 AM
I'd investigate if:
1. the event handler is really invoked when switching tabs;
2. the update itself is correct.

It's not clear what the westHome and westReports are. But is it possible that they might not have been rendered correctly before being added to west region? I'd try to update some simple html text on west panel just to make sure the event handling is right.

joevelardi
23 Jul 2010, 3:03 AM
Hi Bing,

i have a listener that is invoked when the tab is activated and it calls a function which works.

the update is not correct this is why i am asking for assistance.

what i have are two panels (westHome and westReports) in the west region of a border layout. they both work and render correctly.

the challenge i am encountering is when clicking on the tab, i cannot render the new panel.

i've attached 2 images to give context to what i am looking to do.

as stated early .. i am very new to ext and any feedback would be great to assist. many thanks.



21618

21617


Border Layout Config


Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [ centerRegion, westRegion ]
});
});Example of westRegion and centerRegion

// Center Region Config
var centerRegion = new Ext.TabPanel({
region: 'center',
id: 'center-panel',
activeTab: 0,
items: [ centerHome, centerReports ]
});

// West Panel Config
var westRegion = new Ext.Panel({
region: 'west',
id: 'west-region',
title: 'Navigation',
width: 210,
collapsible: true,
layout: 'anchor',
items: [ westHome, westReports]
});Example of contents of westHome
- westHomeTree is the tree config
- westHomeInfo is the bottom section of the split panel.

var westHome = new Ext.Panel({
id: 'west-home-tab-panel',
items: [westHomeTree, westHomeInfo],
layout: 'anchor',
anchor: '100% 100%',
autoDestroy: false
});

Bing Qiao
23 Jul 2010, 3:08 AM
May I ask why you didn't use the accordion layout to have both panels always added but only one displayed at any time instead of adding and removing them everytime switching the tabs?

Bing Qiao
23 Jul 2010, 3:12 AM
In addition, I suspect by removing a panel from the region, it would somehow damage it so you can't simply readd it later on.

I would try hide then show it (this might take some effort too). But by all means, I would prefer an accordion layout to have both always added.

joevelardi
25 Jul 2010, 5:02 PM
Bing, thanks for your feedback .. much appreciated. The solution i am working with is to create two functions based on the tab listeners; on one the deactivate, and another on the activate.

On the deactivate listener i remove the current panel, and on the activate listener i add the selected panel. Probably not the most efficient way of doing things but it is producing the results required. Both listeners are added to each tab so will do the job.



// tab listener deactivate
function handleDeactivate(tab){

panelRemove = Ext.getCmp('west-' + tab.id + '-panel'); // get the panel id
westRegion.remove(panelRemove, true);

}

// tab listener activate
function handleActivate(tab){

if(tab.id == 'home-tab'){

// West Panel for Home tab.
panelAdd = new Ext.Panel({
id: 'west-home-tab-panel',
items: [ .. some items to fill panel .. ],
bodyStyle: 'padding:0px',
layout: 'anchor',
anchor: '100% 100%',
margins: '0 0 0 0'
});
}

if(tab.id == 'reports-tab'){

// West Panel Reports tab.
panelAdd = new Ext.Panel({
id: 'west-reports-tab-panel',
items: [ .. some items to fill panel .. ],
bodyStyle: 'padding:0px',
layout: 'anchor',
anchor: '100% 100%',
margins: '0 0 0 0'
});
}
}

Bing Qiao
25 Jul 2010, 11:52 PM
When removing the panels have you tried remove(panel, true), i.e,. setting autoDestroy to true?

Bing Qiao
25 Jul 2010, 11:57 PM
When removing the panels have you tried remove(panel, true), i.e,. setting autoDestroy to true?

Sorry just realized you had it in the last post. So is this problem solved?

joevelardi
26 Jul 2010, 2:27 AM
Yes Bing .. thanks for your feedback and assistance.