水平布局表单字段

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属性对齐字段。

要对齐表单上的标签，请使用表单上的标签。

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