ExtJS，如何将红色和绿色容器（第 2 层）嵌套在第 1 层主体内？我想要第 1 层内的红色和绿色容器答案

【问题标题】：ExtJS, how to nest the red and green container (Layer 2) inside of Layer 1 body? I want the red and green containers inside Layer 1ExtJS，如何将红色和绿色容器（第 2 层）嵌套在第 1 层主体内？我想要第 1 层内的红色和绿色容器
【发布时间】：2021-12-13 01:17:22
【问题描述】：

enter image description here 我希望它看起来如何 ^

当前代码：

Ext.create('Ext.Container', { 宽度：'100%'，布局：'vbox'，渲染到：document.body，默认值：{ xtype: '容器', 宽度：'50%'，布局：'vbox'，边框：0 }, 项目： [{ 身材： {}，默认值：{ 风格： {}， }, 项目： [{}] }, { 项目： [{ xtype: '容器', 风格： {}， }, { xtype: '容器', 风格： { “背景”：“灰色”， '白颜色'， '字体大小': '15px', }, 宽度：'100%'，身高：50， html: '第 1 层标题' }, { xtype: '容器', 风格： { “背景”：“浅灰色”， '颜色：黑色'， '字体大小': '15px', }, 宽度：'100%'，身高：200， html: '第 1 层正文' }, ] }, { xtype: '容器', 风格： { “背景”：“暗红色”， '白颜色'， '字体大小': '15px', }, 宽度：'25%'，身高：200， html: '第 2 层左' }, { xtype: '容器', 风格： { “背景”：“深绿色”， '白颜色'， '字体大小': '15px', '包'：'中心'， }, 宽度：'25%'，身高：200， html: '第 2 层右' } ] });

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： extjs sencha-touch

【解决方案1】：

您可以将vbox / hbox 布局与设置为align 的stretch 组合使用以实现此布局。检查此代码，在 Fiddle 中测试（ExtJS 7.3.0 - Material，经典工具包）：

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.Container', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            renderTo: document.body,
            items: [{
                    xtype: 'container',
                    style: {
                        'background': 'grey',
                        'color': 'white',
                        'font-size': '15px',
                    },
                    height: 50,
                    html: 'Layer 1 Header'
                }, {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [, {
                        xtype: 'container',
                        flex: 1,
                        height: 200,
                        style: {
                            'background': 'darkred',
                            'color': 'white',
                            'font-size': '15px',
                        },
                        html: 'Layer 2 Left'
                    }, {
                        xtype: 'container',
                        flex: 1,
                        height: 200,
                        style: {
                            'background': 'darkgreen',
                            'color': 'white',
                            'font-size': '15px'
                        },
                        html: 'Layer 2 Right'
                    }]
                }

            ]

        });
    }
});

【讨论】：