How To Add A Panel To Extjs Tab

Question

Am trying to add a panel to tab of a tabpanel (like below) but i get "Layout run failed" in the console

Any pointers or in general how to add components to the tab because the examples i see its just html in the tab

Thanks.

{
                            xtype: 'tabpanel',
                            activeTab: 0,
                            width: 632,
                            //height: 300,
                            items: [
                                {
                                    title: 'Companies',
                                    layout: 'border',

                                    items: [
                                        {
                                            xtype: 'panel',
                                            region: 'center',
                                            width: 500,
                                            title: 'Tooler',

                                            items: []
                                        },
                                        {
                                            xtype: 'toolbar',
                                            region: 'south',
                                            width: 500,

                                            items: [
                                                '->',
                                                { text: 'Edit Company', action: 'edit' }
                                            ]//toolbar items
                                        }
                                    ]
                                },
                                {
                                    title: 'Access Group'
                                },
                                {
                                    title: 'Roles'
                                },
                                {
                                    title: 'Menus'
                                },
                                {
                                    title: 'Forms'
                                }
                            ]
                        }

Answer 1

Try something more like:

{
  xtype:'tabpanel',
  activeTab: 0,
  width: 632,
  height: 300,
  /*
  * -or- instead of specifying height/width,
  * depending on the parent container use a
  * layout e.g. layout:'fit'
  *
  */
  items:[
    {
       xtype:'panel'
       title'tab1',
       /*
       * again, try, e.g. layout:'fit',
       * also note you should put the toolbar here
       * using, e.g. tbar: Ext.create('Ext.toolbar.Toolbar, {properties, items...}),
       *
       */
       items:[
              ...etc....
       ]

    },
    {
       xtype:'panel'
       title'tab2',
       // again, try, e.g. layout:'fit',
       items:[
              ...etc....
       ]
    }
  ]
}

The general logic is- create a tabpanel, each tab is then an item (panel) of this tab panel, its title text becomes the tab text. You can then set the content of each child panel depending on what they need to show, either by defining their html, or by adding further child items to them, under their items property.

Toolbars should not be specified as an item if possible, but should be defined using the tbar property of the component the toolbar is for. If you want a toolbar to appear at the bottom of a panel instead of the top, specify it the same, but use the bbar property instead of tbar.