Panel Methods: setVisible(...) & setTitle(...)

[Steve_Terry]

Hi there, I'm new to Ext JS so try to be nice! :)

Currently, I have 2 panels which were created in the designer (so there is a ui file and implementation file for each panel).

What I'm trying to do is set the 2nd Panel's title and visibility from the 1st Panel's implementation file and I currently cannot seem to get that working properly.

From the research I have done and from looking at examples and the API I was able to attempt the following below...

1st Panel's Code



var newTest = Ext.getCmp(‘TestPanel’);

//Test 1 - Use setVisible instead
//newTest.show();

//Test 2 - Set the Panel to be visible since it was originally set to "hidden: true"
newTest.setVisible(true);

//New Title - Set new title for the 2nd Panel
newTest.setTitle(‘New Title’);



2nd Panel's Code



id: 'TestPanel',
title: 'Previous Title',
hidden: true


Although the problem is that when the following line of code is executed "var newTest = Ext.getCmp(‘TestPanel’)", firebug presents me with the following error message...



newTest is undefined


Which seems to signal to me that I am somehow incorrectly attempting to access the other component aka Panel since it doesn't seem to be recognized from the 1st Panel.

Although all examples I have seen point to using "Ext.getCmp" for when you need to access other components not in your main panel for instance.

Also to note, this may be part of the issue, but when it runs with the 2nd Panel being hidden by default, I am expecting that there should be a blank area in the window where the 2nd Panel should be, but what I am getting is the 1st Panel actually stretching to fit the entire screen. :(

I was hoping for the 1st Panel to stay in the same location (without setting fixed sizes since I cannot) and then when the following code "newTest.setVisible(true)" is executed in the 1st Panel, the 2nd Panel will be visible.

Thanks for any help the community can offer! :)

I'm sure it's probably a very small change that I am missing!

[mitchellsimoens]

If getCmp returns undefined, then that component hasn't been created. Can you confirm that the panels have been created?

[Steve_Terry]

Hi mitchellsimoens,

Following your response I have tried to put the 1st Panel's code I mentioned above into a button click function inside the 1st Panel which by then, when the button was clicked, I would imagine that the 2nd Panel is definitely created (since by then the app is launched and I am able to visibly see both panels...if for instance I set the 2nd Panel as not hidden for testing).

For example, in the "initComponent: function()" of the 1st Panel I have the following for creating the button function...



//panelChangeBut is ID of button on the 1st Panel
var testPanelChangeBut = me.down('#panelChangeBut');

//Once button is clicked, code in panelChangeTest will be executed
testPanelChangeBut.on('click', this.panelChangeTest, this);


than the actual function would perform the following once the button on the 1st Panel was clicked...



//TestPanel is ID of the 2nd Panel I cannot access
var newTest = Ext.getCmp(‘TestPanel’);

//Set the 2nd Panel visible
newTest.setVisible(true);

//Set the 2nd Panel's title
newTest.setTitle(‘New Title’);


I am still receiving the same response that newTest is undefined which by this point, when the button is clicked, I am able to see the 2nd Panel and it's original title "Old Title" on the screen so the 2nd Panel has to be created by then.

Is their a better way to access the Panel since it seems (I might be incorrect) that it cannot access/find the 2nd Panel?

[Steve_Terry]

Hi mitchellsimoens,

I went back again to the file where the Panels were originally being created and turns out I was using the wrong ID and forgot I never changed it back from when I was running a previous test.

The Panel was labeled "TestPanel1" and I was trying to access it under the ID of "TestPanel".

Thanks again for the input. :D