Adding an Ext.Button class into a Box Component

Question

Hello, I'm working with extjs 2.2.1, having a bit of a trouble adding a button into a box component class. From my understanding, because box component extends the component 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 boxcomponent class? Any help in the right direction is greatly appreciated. Thank you.

Answer 1

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.

Answer 2

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])
  });