Extjs 4.1.1 HBox 布局未显示所有子项或项重叠

Posted 2023-02-26

【中文标题】Extjs 4.1.1 HBox 布局未显示所有子项或项重叠

【英文标题】：Extjs 4.1.1 HBox layout not showing all child items or items overlaps

【发布时间】：2013-09-13 07:18:28

【问题描述】：

我正在使用layout: 'hbox'作为容器，该容器有四个子项，如下所示

标签 Continer 包含用于消息的文本字段和 div 标签 具有用于消息的文本字段和 div 的容器

我希望这四个元素在单行中水平显示，这就是我使用 HBox 布局的原因，但它只显示前两个子项。我查找了生成的 html，发现生成了项目 3 和 4，但位置不正确。

这是下面代码http://jsfiddle.net/5znVE/的jsfiddle链接

Ext.create('Ext.Panel', 
    renderTo: Ext.getBody(),
    width: '100%',
    bodyPadding: 10,
    items: [
        xtype: 'container',
        id: 'chkNumberCtnr',
        layout: 
            type: 'hbox',
            align: 'stretch'
        ,
        items: [
            xtype: 'label',
            cls: 'field-label',
            text: 'from Check Number',
        , 
            xtype: 'container',
            id: 'frmChkFldCntr',
            cls: 'field-container',
            items: [
                xtype: 'textfield',
                id: 'fromChk'
            , 
                xtype: 'container',
                id: 'frmChkMessage',
                cls: 'error-message',
                html: '<div>This is required field</div>'
            ]
        , 
            xtype: 'label',
            text: 'to Check Number'
        ,
            xtype: 'container',
            id: 'toChkFldCntr',
            cls: 'field-container',
            items: [
                xtype: 'textfield',
                id: 'toChk'
            , 
                xtype: 'container',
                id: 'toChkMessage',
                cls: 'error-message',
                html: '<div>This is required field</div>'
            ]
        ]
    


    ]
);

【参考方案1】：

将flex: 1 添加到您的所有四个子项中，以使它们自动调整大小以填充可用宽度。