extjs - 如何将面板添加到 Extjs 选项卡

Question

我正在尝试将面板添加到选项卡面板的选项卡（如下所示），但我在控制台中收到“布局运行失败”

任何指针或一般如何将组件添加到选项卡，因为示例我在选项卡中看到它只是 html

谢谢。

{
                            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.