私はlayout: 'hbox'コンテナに使用していますが、これには以下のように4つの子アイテムがあります
- ラベル
- メッセージ用のテキストフィールドとdivを持つContiner
- ラベル
- メッセージ用のテキストフィールドと div を持つコンテナ
これらの 4 つの要素をすべて 1 行で水平に表示したいので、HBox レイアウトを使用しましたが、最初の 2 つの子項目のみを表示しています。生成された 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>'
}]
}]
}
]
});