CODEWITHSUNDEEP
javascriptextjs
Dónal
Dónal

Reputation: 187409

Layout form fields horizontally

I'm using Ext JS 2.3.0 and have a bunch of fields contained within a FieldSet

enter image description here

I'd like to have them laid out side-by-side instead, ideally with the label on top of the field instead of to the left of it. The relevant code is:

    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,
        ]
    });

Upvotes: 0

Views: 3079

Answers (2)

nscrob
nscrob

Reputation: 4503

in Extjs 2.3 labelAlign is contained in the Ext.layout.FormLayout which is used to render forms Now to set the labelAlign you need to add the layout form on the fieldset.

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,
        ]
    });

In the docs for the form layout it says that any container that is rendered by the layout form accepts label configs. Label configs accepted are specified in the docs, and include labelAlign.

Upvotes: 1

Andrey Selitsky
Andrey Selitsky

Reputation: 2604

As there is not CompositeField in ExtJs2 you can try to align fields using css float property.

To align labels on top use labelAlign option of the form.

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

Upvotes: 0

Related Questions