Question

我目前有这个：

  Ext.applyIf(me, {
        items: [
            {
                xtype: 'HeaderPanel',
                region: 'north'
            },
            {
                xtype: 'MainMenuPanel',
                flex: 1,
                region: 'west',
                split: false
            },
            {
                xtype: 'AccordionTreePanel',
                flex: 1,
                region: 'west',
                split: false
            },
            {
                xtype: 'ContentTabPanel',
                flex: 3,
                region: 'center'
            }
        ]
    });

我希望将“HeaderPanel”划分为子区域。类似的东西：

 {
     xtype: 'HeaderPanel',
     region: 'north',
     items: [
           {
               xtype: 'LeftHeaderPanel',
               region: 'west'
           },
           {
               xtype: 'RightHeaderPanel',
               region: 'center',
           },
     ]
 },

我能在这做些什么吗？或者我是否需要使用不同的东西来自定义我的布局？

感谢。

Answer 1

你走在正确的轨道上。您只需要在layout:'border'之后的代码的第二个块中设置region:'north'，它就可以正常工作。

事实上，边框布局嵌套在边框布局中。但是，您应该考虑是否确实需要内北区域的所有边框布局功能。您可以使用更轻的hbox布局。

Answer 2

使用您的示例和Saki的评论，您应该具有以下内容。我们假设您在示例代码中使用的xtypes是由您定义的。否则你会收到错误。

Ext.applyIf(me, {
    items: [
        {
            xtype: 'HeaderPanel', //xtype: 'container'
            region: 'north',
            layout: 'border',
            flex: 1, //or height: 150,
            items: [
                {
                    xtype: 'LeftHeaderPanel',
                    region: 'west',
                    flex: 1, // or width: 200
                },
                {
                    xtype: 'RightHeaderPanel',
                    region: 'center'
                }
            ]
        },
        {
            xtype: 'MainMenuPanel',
            flex: 1,
            region: 'west',
            width: 125,
            split: false
        },
        {
            xtype: 'AccordionTreePanel',
            flex: 1,
            region: 'west',
            split: false
        },
        {
            xtype: 'ContentTabPanel',
            flex: 3,
            region: 'center'
        }
    ]
});

编辑：从示例中移除了逗号。

我可以将extjs区域分割成子区域吗？

2 个答案: