Question

我的问题是，即使我在寄宿生布局中的所有子项目中使用“layout：'fit'”，它们只会收缩到一个小方框而不是填充父级，如适合布局中所述。

我希望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。

Extjs子项未填充父容器

1 个答案: