layout - Extjs 子项未填充父容器

Question

我的问题是，即使我在边界布局中的所有子项中使用了“布局：'适合'”，它们也只是缩小到一个小盒子中，而不是填充父项，如适合布局中所述。

我希望 EDS.view.selector.Container 填充我的边界布局的“导航”部分。

(Code excerpt)

Ext.define('EDS.view.selector.Container', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.selectorcontainer',

    layout: 'fit',
    initComponent: function(){
         this.items = [
                {
                    xtype: 'tabpanel',
                    defaults: {
                        bodyPadding: 10
                    },
                    layout: 'fit',
                    items:[
                         {
                             title: 'Organization',
                             id: 'selector-organization',
                             tag: 'div',                             
                             html: 'div here',
                             height: '100%',
                         }                  
                    ]
                }
        ],
        this.callParent();
    },
});



(Controller)
init: function(){
    console.log('controller.init()');

    new Ext.Viewport({
        title: 'Data Analysis',
        layout: 'border',
        defaults: {
                collapsible: true,
                split: true,
                bodyStyle: 'padding: 15px',
        },
        items: [{
            title: 'Navigation',
            region:'west',
            margins: '5 0 0 0',
            cmargins: '5 5 0 0',
            width: 600,
            minSize: 100,
            maxSize: 250,
                items: [
                    {
                    id: 'selector-container',
                        xtype: 'selectorcontainer',
                        layout: 'fit',
                    }
            ]
        },{
            title: 'Main Content',
            collapsible: false,
            region:'center',
            margins: '5 0 0 0'
        }]
    });
}

Answer 1

您没有在边框布局中为包装容器设置布局：

items: [{
    title: 'Navigation',
    region:'west',
    layout: 'fit',
    ...
    items: [

            ]
    },{
    title: 'Main Content',
    collapsible: false,
    region:'center',
    layout: 'fit',
    ...
}]

请记住：在 ExtJS 中，任何进入items容器属性的普通 JS 对象都将转换为某种类型的 Ext 组件，并由该容器xtype的属性定义。defaultType在大多数情况下，它会是panel.