javascript - 标签和字段在同一行的 ExtJS 表单

Question

我正在努力创建一个带有两个带标签文本字段的 ExtJS 表单。 我希望标签和输入字段都出现在同一行上。 我想出的代码打破了文本字段，在第一行显示标签，在下一行显示输入字段。

我有:http://jsfiddle.net/aw2Pr/

修复可能非常简单，但我似乎无法弄清楚。这在 HTML 中是小菜一碟，我的意思是，像这样:

<label>Amount: <input /></label>
<label>Currency: <input /></label>

http://jsfiddle.net/AyqYr/

如何在 ExtJS 中获得类似的布局？

我已经尝试过更改布局、更改文本字段的宽度、为字段标签分配宽度、询问 Google ……到目前为止没有任何帮助。

Answer 1

要在同一行实现带有标签的字段，请通过创建水平布局的容器从默认配置中删除样式。

参见下面的示例代码:

Ext.onReady(function() {    
    var addUserForm = Ext.create(
        'Ext.container.Container',
        {
            renderTo: Ext.getBody(),
            layout: {
                type: 'hbox'
            },
            anchor: '100%',
            defaults: {
                width: 200,
                xtype: 'textfield'
            },
            items: [{
                name: 'amount',
                fieldLabel: 'Amount'
            },{
                name: 'currency',
                fieldLabel: 'Currency'
            }]
        }
    );
});