0

我正在使用layout: 'hbox'一个容器,它包含四个子项,如下所示

  1. 标签
  2. 具有用于消息的文本字段和 div 的 Continer
  3. 标签
  4. 具有用于消息的文本字段和 div 的容器

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

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

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>'
            }]
        }]
    }


    ]
});
4

1 回答 1

1

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

于 2013-09-13T07:22:13.127 回答