I'm working with extjs 2.2.1, having a bit of a trouble adding a button into a box ponent class. From my understanding, because box ponent extends the ponent class, it has no config options that allow an item to be added. So the code below does not work...

new Ext.Viewport({
   layout : 'border',
   items : [new Ext.BoxComponent({
      region : 'north',
      el : 'north',
      height : 50,
      items : new Ext.Button({
         iconCls : 'logout',
         text : 'logout',
         tooltip : 'logout',
         handler : function() { }
      }, mainTabPanel])
});

Is there a workaround where I can can add a button into this northern region that is made up of a boxponent class? Any help in the right direction is greatly appreciated. Thank you.

I'm working with extjs 2.2.1, having a bit of a trouble adding a button into a box ponent class. From my understanding, because box ponent extends the ponent class, it has no config options that allow an item to be added. So the code below does not work...

new Ext.Viewport({
   layout : 'border',
   items : [new Ext.BoxComponent({
      region : 'north',
      el : 'north',
      height : 50,
      items : new Ext.Button({
         iconCls : 'logout',
         text : 'logout',
         tooltip : 'logout',
         handler : function() { }
      }, mainTabPanel])
});

Is there a workaround where I can can add a button into this northern region that is made up of a boxponent class? Any help in the right direction is greatly appreciated. Thank you.

• javascript
• button
• extjs
• viewport

2 Answers 2

BoxComponent doesn't have the ability to contain child items, if you look at the docs you'll see there isn't a configuration option to do that. You will need to use a Container (or some subclass thereof) to get this effect.

There was no way around having child items in a BoxComponent class as it is not a container. so instead, I changed the BoxComponent to a container class, like Panel, that allowed me to add a button class.

new Ext.Viewport({
   layout : 'border',
   items : [new Ext.Panel({
      region : 'north',
      applyTo : 'north',
      height : 50,
      items : new Ext.Button({
         iconCls : 'logout',
         text : 'logout',
         tooltip : 'logout',
         handler : function() { }
     }, mainTabPanel])
  });