Panel / Container refresh

[North]

My panel first loads with HTML instructions telling the user to chose an item from a grid. Once the user clicks on an item, I want the original HTML panel to be refreshed with a new panel that has detail information about the item they clicked on. I've been able to put all of this together, except the original HTML panel never gets refreshed with the updated detail information. I've tried a ton of other options with no success. Here's my current code:

P.S. Thanks for any help you can offer!

Function CreateTabPanel(accountPanel)
{

    var htmlComponent = new Ext.Panel({html: 'Instructional HTML Text'});
  
    var myPanel = new Ext.Panel({
         items: [
             htmlComponent
         ]
    });

    if(accountPanel != null)  //accountPanel is passed in once the user clicks on an item.
    {
        myPanel.add(accountPanel);
        myPanel.remove(htmlComponent);
        myPanel.doLayout();
    }
	  
     ProfileTab = new Ext.Panel({
		cls: 'profile-panel',
		id: 'ProfileTab',
		border: false,
		autoScroll: true,
		layout: 'fit',
		title: 'Profile',
	    items: myPanel 
		
	});
	
        ///
	///Code for one other tab the is unrelated.
        ///

	items = [];	
	items.push(ProfileTab);
	items.push(OtherTab);
   
	
	TabPanel = new Zen.FlatTabPanel({
		cls: 'transparent-panel',
		border: false,
		region: 'center',
		activeTab: 0,
		items: [ items	]
	});
}

[CrazyEnigma]

Have you tried load()

[North]

Yes I have tried load() on myPanel and on the TabPanel. In both cases I get a "this.body is undefined" error inside of the Panel.js library class.

[CrazyEnigma]

Is the panel rendered? because you might be getting this error because of this.

[North]

Which panel? The htmlComponent panel, the ProfileTab panel, the accountPanel (which is passed in), or the TabPanel?

[North]

I think I see what you mean. The accountPanel needs to be rendered to the ProfileTab--instead of being passed in the accountPanel. I know that when you create a panel you can specify the renderTo: field, but how do I render one panel to other?

Let's say I change my code so that when the user clicks on a grid item, the accountPanel is created with a renderTo: field. What do I need to set the renderTo: field as in order to get the accountPanel to render to the ProfileTab panel?


By the way, thanks for you help CrazyEnigma.

[steffenk]

you don't render a panel to another, you add an item to a container. A panel also is a container and may contain panels.

container.add(element);
container.doLayout();

[CrazyEnigma]

Upon close inspection of your code. You have too many panels going on.

You might want to remove the panel first before you add a new one.

myPanel -> htmlContainer, then you add the accountPanel, and then remove the htmlContainer

Then you create a ProfileTab which is a Panel not a tabpanel, and add myPanel, create an items array, push panels to the array, and add it to the items of another panel.

I don't think you need so many embedded panels.

tabpanel -> panel should be sufficient.

Given that you are adding panels to the tabpanel, you can remove the panel of html container from the tabpanel, and add the accountPanel. I have always reserved the need to use the "id" for anything, but this is one case where you would use "id".

var tabpanel = <your reference to you tabbed panel>
var panel = Ext.getCmp("htmlhelp");
if (panel)
{
    tabpanel.remove(panel);
    if (accountPanel)
    {
        tabpanel.add(accountPanel);
        accountPanel.doLayout();
        accountPanel.setVisible(true);
    }
}

"[]" is short for an array. Your code embeds an array within an array - that might be your problem.

[North]

CrazyEnigma, I followed your code and the refresh still isn't working. What ever gets loaded into the TabPanel the first time stays there no matter what.

[CrazyEnigma]

You need to clean up your code regardless. It is too messy.