Question

尝试将面板添加到tabpanel的标签页（如下所示）但我在控制台中“布局运行失败”

任何指针或一般如何将组件添加到选项卡因为我在示例中看到它只是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

尝试更多类似的内容：

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

一般逻辑是创建一个tabpanel，每个标签都是此标签面板的一个项目（panel），其title文本将成为标签文本。然后，您可以根据需要显示的内容设置每个子面板的内容，方法是在html属性下定义items，或者向其添加更多子items。

如果可能，不应将工具栏指定为项目，但应使用工具栏所用组件的tbar属性进行定义。如果您希望工具栏显示在面板底部而不是顶部，请将其指定为相同，但使用bbar属性而不是tbar。

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

1 个答案: