水平布局表单字段

Question

我正在使用Ext JS 2.3.0，并且FieldSet包含许多字段

我想让它们并排放置，理想情况下，标签位于字段顶部而不是字段的左侧。 相关代码为：

    var kpiFilterCombo = new Ext.form.ComboBox({
        name: 'kpi',
        store: this.dashboardInst.servicesModel.getAvailableKPIsStore()
    });

    var kpiLower = new Ext.form.TextField({
        fieldLabel: "Lower",
        name: 'lowerBound'
    });

    var kpiUpper = new Ext.form.TextField({
        fieldLabel: "Higher",
        name: 'upperBound'
    });

    var kpiFilterFieldset = new Ext.form.FieldSet({
        title: locale['label.kpi.condition'],
        checkboxToggle: true,
        collapsed: true,
        autoHeight:true,
        items : [
            kpiLower,
            kpiFilterCombo,
            kpiUpper,
        ]
    });

Answer 1

在Extjs 2.3中，labelAlign包含在Ext.layout.FormLayout中，后者用于呈现表单。现在要设置labelAlign，您需要在字段集上添加布局表单。

var kpiFilterFieldset = new Ext.form.FieldSet({
        title: locale['label.kpi.condition'],
        layout: 'form',
        labelAlign: 'top',
        checkboxToggle: true,
        collapsed: true,
        autoHeight:true,
        items : [
            kpiLower,
            kpiFilterCombo,
            kpiUpper,
        ]
    });

在表单布局的文档中，它表示由布局表单呈现的任何容器都接受标签配置。 可接受的标签配置在文档中指定，包括labelAlign。

Answer 2

由于ExtJs2中没有CompositeField，因此可以尝试使用css float属性对齐字段。

要在顶部对齐标签，请使用表单的labelAlign选项。

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.FormPanel-cfg-labelAlign