Panel / Container refresh

[North]

I'm taking your advice and cleaning my code. I think I'm getting closer. Right now I've been able to remove the htmlComponent panel correctly (The panel is even removed from the screen!). Now, when I try to add a new panel and call doLayout() I get a "me.dom is undefined" error at "style = me.dom.style;" when debugging. Any ideas as to what is going on?

[CrazyEnigma]

Post your modified and cleaned up code, and let's see if we can't solve your problem.

[North]

Here's my current code. I've included the section in it's entirety this time. Thank you again for looking at this. P.S. The variables that start with Zen. are visible throughout this section of code. That's why they can be referenced in several different scopes.

Again, the issue is getting the account information to replace the "myComponent" panel with the "accountPanel", and making the accountPanel information visible.

//----------------------------------------------------------
function AccountsListAdminUserPanelCreate(config)
{

	Zen.AccountsListAdmin.Grid = AccountsListAdminGridCreate({
		searchItemName: 'Email'
	});	
	
	Zen.AccountsListAdmin.Grid.load();  //Creates a grid of accounts. (This method is not included)
        CreateAccountsListAdminTabPanel(); //Creates a panel to display information about a selected account.
	
	var items = [];
	items.push ( Zen.AccountsListAdmin.Grid);
	items.push( Zen.AccountsListAdmin.TabPanel);
	
    //The Grid and the TabPanel are added to a Panel.
    //The Grid shows account information. When a user clicks on an account,
    //The TabPanel should show results about the selected account.
    Zen.AccountsListAdmin.accountsListAdminPanel = new Ext.Panel({
		layout: 'border',
		baseCls: 'zen-account-panel',
		title: 'Accounts',
		hideMode: 'offsets',
		items: items
	});

 	return Zen.AccountsListAdmin.accountsListAdminPanel;
}



//-----------------------------------------------------------------------------
function CreateAccountsListAdminTabPanel(accountPanel)
{
     var myComponent = new Ext.Panel({html: 'Select an account from the List above.'});
  
     Zen.AccountsListAdmin.TabPanel = new Ext.Panel({
		cls: 'zen-transparent-panel',
		id: 'mainTabPanel',
		border: false,
		region: 'center',
		activeTab: 0,
		items:  myComponent	
	});
	
	if(Zen.AccountsListAdmin.accountsListAdminPanel)
	{
            //accountPanel is true when a user clicks on an account in the Zen.AccountsListAdmin.Grid
	    if(accountPanel)
	    {
                Zen.AccountsListAdmin.accountsListAdminPanel.remove(Zen.AccountsListAdmin.TabPanel);
	        Zen.AccountsListAdmin.accountsListAdminPanel.add(accountPanel); 
	        Zen.AccountsListAdmin.accountsListAdminPanel.doLayout();
	    }
	}
}

//-----------------------------------------------------------------------------
//Creates the Grid of accounts
function AccountsListAdminGridCreate(config)
{
    // Necessary defaults.
	if (!config)
		config = {};
	if (config.clickable == null)
		config.clickable = true;
	
	//Needed config settings for split screen display.
	config.collectionID = Zen.Constants.MasterTopics.Accounts;
	config.border = false;
	config.region = 'north';
	config.split = true;
	
        var viewGrid = new Zen.CollectionPanel(config);
        viewGrid.height = 225;
        viewGrid.hideMode = 'offsets';
	
	viewGrid.on('gridrowclick', AccountsListAdminGridRowClick); 

	return viewGrid;
}

//-----------------------------------------------------------------------------
//This function populates a Panel with the selected accounts information.
function AccountsListAdminGridRowClick(grid, rowIndex, cellIndex, e)
{
	LayoutLoadingShow();
	var store = grid.getStore();
	var record = store.getAt(rowIndex);
	
	
	var accountName = record.data.Email;
	var nameTextField = new Ext.form.DisplayField({
             fieldLabel: 'Account Name',
             value: accountName,
             name: 'name'
        });
        nameTextField.setSize(((accountName.length+1) * 7), 20);
  
   
	var items = [];
	items.push(nameTextField);  
	Zen.AccountsListAdmin.Controls.ProfileTabPanel = new Ext.form.FormPanel({ 
        cls: 'zen-account-panel',
		id: 'ProfileTabPanel',
		border: false,
		autoScroll: true,
		layout: 'fit',
		title: 'Account: ' + nameTextField,
                items: items
                   
        });
 
	CreateAccountsListAdminTabPanel(Zen.AccountsListAdmin.Controls.ProfileTabPanel)
	LayoutLoadingHide();
	
}

[CrazyEnigma]

It's even more confusing. What is up with the nested function with global references? What are you trying to accomplish?

Are you trying to start out with a CardLayout with one Panel in it to select an item, and then when the item is selected to remove that item, and create the panel. It is a hundred time simpler than you are making it out to be.

Inside the CardLayout Panel, I have one item in it to direct the users to select something. This panel has an ID.

var tabpanel = new Ext.TabPanel({
    id: "mytabpanel",
    items: [{
        xtype: "panel",
        id: "my-instructions",  // I only use id, when I know that the panel is a Singleton
        html: "Please select something"
    }]
});

When the user selects something and the panel needs to load:

    listener: {
        click: function (b, e) {
            var tabpanel = Ext.getCmp("mytabpanel");
            var panel = Ext.getCmp("my-instructions");
            if (panel)
            {
                tabpanel.remove(panel);
            }
            // Add your new panel...
            tabpanel.add({<your config to a panel specific to the item you clicked>});
        }
    }

[North]

I've found a solution to my issue of not being able to refresh the contents of a panel. I've added a template to the panel I needed to have refreshed. Turns out, templates make it very easy to update the contents of a panel.

CrazyEnigma, Thank you for the time you spent helping me find a solution!