Question

我一直试图将每个面板的宽度固定为自动，但它不起作用。然后每次我尝试删除宽度时，它都不会在我的输出中显示任何内容。

这是我的代码：

items : [{

    region: 'north',

    xtype:'panel',

    header: false,

    layout: 'hbox',

    items: [
    {
        xtype:'contactgrid', //panel alias
        height: 200,
        width:'auto',
        // width: 500,     
        region:'center',

    },
    {
        xtype:'contactdetails', //panel alias
        height:200,
        width:'auto',
        // width: 500,
        region:'east',
    }
    ]
}]

Answer 1

因为你已经给了＆＃39; hbox＆＃39;布局到父面板，您需要为每个子组件赋予flex。 ExtJS将根据flex自动排列每个面板的宽度。

例如，

items : [{

region: 'north',

xtype:'panel',

header: false,

layout: 'hbox',

items: [
{
    xtype:'contactgrid',//panel alias
    flex: 1
},
{
    xtype:'contactdetails', //panel alias
    flex: 1
}
]
}]

无需为每个面板提供硬编码高度，宽度，否则在父面板的resize事件中不会调整其大小。

由于父面板布局是＆＃39; hbox＆＃39;无需为儿童小组提供区域，因为区域需要在边界区域内进行。布局，而不是在＆＃39; hbox，vbox＆＃39;等

我希望这可以帮到你。

由于

Answer 2

您可以为子项设置flex。因此，在hbox布局中，项目将获得与flex值成比例的宽度。来自sencha docs的示例代码：

    Ext.create('Ext.Panel', {
        width: 500,
        height: 300,
        title: "HBoxLayout Panel",
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        renderTo: document.body,
        items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            flex: 2
        },{
            xtype: 'panel',
            title: 'Inner Panel Two',
            flex: 1
        },{
            xtype: 'panel',
            title: 'Inner Panel Three',
            flex: 1
        }]
    });

希望它有所帮助!!

Sencha ext：如何将Panels width设置为auto

2 个答案: