View Full Version : setActiveItem...

3 Jan 2011, 2:12 AM
Hello everyone,

First i want to tell you that I really tried a lot to fix this problem, here it comes:

I use many panels and one main panel. Every panel contains the 2 toolbars (bottom and top), which i define in the upper area of my js, not the problem. When I want to switch between panels, sometimes I move forward, sometimes I press "back" and the previous panel must be shown, they toolbars did vanish in the dark, suddenly the toolbars were not on the screen any more, how is this possible? After a lot of trying I did manage to get this code for changing panels:

setTimeout("panel.doComponentLayout();", 10); I am sure this is not the way, and there is a much easier way, i just can't find it.

Searched in the API, no luck, someone help please?


3 Jan 2011, 9:41 AM
I too have had issues with setting the active panel, I found that sometimes I needed to make sure my layouts were all proper, and then secondly the scope in which I am referencing the panel is correct. Make sure you are using a JavaScript debugger and use the console to test you commands and check scope.

This video is helpful too: http://vimeo.com/15672257

4 Jan 2011, 2:21 AM
I don't think the problem is my layout.

I use: 1 main panel, which layout is set to 'card' and is empty, well it contains of course items, which are other panels.

main panel:

panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [icams.homePanel, icams.joblist1, icams.searchPanel, icams.infoPanel, icams.readMore, icams.mapPanel, icams.jobDetail, icams.askPasswordPanel, icams.loginPanel, icams.loginFirstPanel, icams.loginRetryPanel, icams.registerPanel]

And as example a list: (it contains 2 toolbars which he doesn't show after panel.showActiveItem(icams.jobList):

icams.joblist1 = new Ext.Panel({
id: 'joblist1',
cls: 'joblist1CLS',
title: 'Vacatures',
layout: {
type: 'fit'
scroll: 'vertical',
dockedItems: [bottomTB, topTB],
items: joblist1Var,

Any solutions, I tried, icams.joblist1.doComponentLayout before the setActiveItem, but no success.

5 Jan 2011, 10:43 AM
are bottomTB and topTB shared? if so, they will be rendered with the last item you add them too. in this case if you create the panels in the order of the list of items in the main panel, my guess is you will only see it in icams.registerPanel. Try...

dockedItems[{xtype:'toolbar',dock:'bottom'}, {xtype:'toolbar', dock:'top'}],

This should create unique instances for each panel. While each panel can have a reference to a shared dom element, that dom element can only be rendered in one place.

20 Jan 2011, 7:04 AM
Thx for the reply's.

I was thinking I would just use the workaround i created, but now since I have a login section and a not logged in I encounter this problem again. This time it is more complex than I thought, here it comes. An easy version:

Panel 1 Homepanel
Panel 2
Panel 3

Panel = navigation Panel, contains 4 bottoms toolbars and 1 top toolbar (ghehe no worries, max of 2 bottom toolbars are shown at a time).

One the homePanel I hide those toolbars (panel1), on panel 2 they are shown, this goes good. Now the following scenario:
Panel 1 -> Panel 2 -> Panel 1-> Panel 2
not shown, shown, not shown, shown. -<> That's good!

Panel1 -> panel 2 - panel 3 -> panel 2 -> Panel 1
not shown, shown, shown, shown, not shown, empty white space on the place of toolbars - < Not good

Anyone encountered the same problem?

I use this code to check if i must hide or show a toolbar: (the L after a toolbar means that it is the logged in version of the toolbar)

function setNewPanel(newPanel){
if(newPanel != icams.homePanel && loggedin == false && showNow == true) {
showNow = false;
} else if(newPanel == icams.homePanel && loggedin == false && showNow == false) {
showNow = true;
} else if(newPanel != icams.homePanelL && loggedin == true && showNow == true) {
showNow = false;
} else if(newPanel == icams.homePanelL && loggedin == true && showNow == false) {
showNow = true;
setTimeout('panel.doComponentLayout();', 10);


20 Jan 2011, 8:26 AM
I had sort of a similar problem, and I solved it by wrapping each panel definition in a function (ending in panelname.show()), and instead of saying show or hide panel I just call the function. That seems to keep all the toolbar definitions local instead of shared, and the new panel just appears on top of whatever was there before, which is what I wanted.