View Full Version : BorderLayout - Dynamic center region changes

24 Jun 2010, 9:33 PM
Hi I am having some simple conceptual issues with the border layout using the center region container that Jay Garcia has wonderfully explained through screencasts and in his book, both of which I have looked over (Thanks so much for your hard work Jay, your work has been a great resource). My layout is West (my links and a details window) and Center (to display the content associated with the clicked link). In my case the content that is to be changed dynamically in the center region are all extended components. So here are my 3 vars of content:

var usersaddpanel = {
xtype: 'edituserform',

var usersviewtype1panel = {
xtype: 'userlistgrid',
type: '1',

var usersviewtype2panel = {
xtype: 'userlistgrid',
type: '2',
Now in my layout manager I am using the common tree click function:

treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
Ext.getCmp("centerRegion").add(n.id +'panel');
});The problem I am having is on the line: Ext.getCmp("centerRegion").add(n.id +'panel'). I receive an 'item is undefined' error in firebug. If I hardcode it to an id -> Ext.getCmp("centerRegion").add(usersviewtype1panel) it works for that panel. I am not exactly sure if my lazy instantiation is causing this issue whereby the object is not being created or if I am missing something in my component extension. Can anybody offer any suggestions?

25 Jun 2010, 1:28 AM

xtype: 'container',
region: 'center',
id: 'centerRegion',
layout: {
type: 'card',
activeItem: 0
items: [ usersaddpanel, usersviewtype1panel, usersviewtype2panel ],

Then read up about CardLayout

25 Jun 2010, 3:31 AM
Thanks Animal I appreciate your quick response, I should have gotten into card Layout when I wrote the post. When I implemented the card Layout before it worked, however this is going to be a reasonable large application and with the dataset that I was testing with, I could already see a performance degradation using cards. Is there another way that this could work without hardcoding variable names?

25 Jun 2010, 3:45 AM
What have variable names got to do with performance degradation?

If you want to remove and destroy cards, in order to free up memory, feel free to do so.

25 Jun 2010, 4:13 AM
Sorry, Animal I miscommunicated what I meant. When I said that I was referring to adding the object directly by calling the variable name. That seems to be my issue. When I use card layout I can set active with

Ext.getCmp('content-panel').layout.setActiveItem(n.id + 'panel');

But when I am trying to add I cant add new components to the container. For instance, this will not work:

Ext.getCmp("centerRegion").add(n.id +'panel');

Even though echoing out n.id+'panel' is the variable name. But if I put the variable name in directly it will work:


I have even tried to use Ext.getCmp(n.id) within the add and still get comp is undefined. Is there something that I missed that can clear this up for me in the Help docs?


25 Jun 2010, 4:21 AM
Variable names have no bearing on anything whatsoever.

At some point you have to instantiate a Component. Then you add it to the card Container. Simple as that.