How can I set the label width on individual textfield labels in extjs?

Eventually, you have the option to hack afterRender of the field :

afterRender: function() {
    <PARENT>.prototype.afterRender.call(this);
    this.adjustCustomLabelWidth(300);
},
adjustCustomLabelWidth: function(w) {
    this.el.parent('.x-form-item').child('.x-form-item-label').
            setStyle('width', w);
    this.el.parent('.x-form-element').setStyle('padding-left', w + 5);
    this.ownerCt.on('afterlayout', function() {  
        this.el.setStyle('width', this.el.getWidth() - w + 100);
    }, this, {single: true})
},

If you really have to do this, the easiest way is to define a panel instead of a form field and use it as a container for something different.

{
    xtype: 'form',
    layout: 'form',
    labelWidth: 100,
    items: [
        // {some fields with labelWidth=100},
        {
            xtype: 'panel',
            layout: 'form',
            labelWidth: 200,
            items: [
                xtype: 'textfield',
                value: 'test',
                name: 'testing',
                fieldLabel: 'This is a really, really long label here',
                labelStyle: 'white-space: nowrap;'
            ]
        }
        // {some fields with labelWidth=100}
    ]
}

labelWidth is a config of FormPanel, not of Field. It is rendered and controlled at the form layout level, not at the level of each individual field. The label element itself has nothing to do with the layout of the field container -- if you look at the markup, the label is floated and the field's containing div has left-padding that gives the "label width" you're trying to control. This padding is added in code (by the layout) as a dynamic style to the .x-form-element that wraps the input. To override you'll either have to override the layout code (not trivial) or perhaps use an !important class that overrides the padding per field (using your field's id or a custom cls that you apply).

That said, the label widths should be the same, aesthetically-speaking. Not sure why you'd want to break that convention?


I try this after several CSS classes to do the same job, I did remove all css after this, works like a charm.

{
    xtype: 'whatever-with-a-field-label',
    name: 'veryMeaningFullName',
    fieldLabel: 'very long description to show above a tiny text field', 
    labelStyle: 'width:400px; white-space: nowrap;', 
    //could use width:100% if you want
    maxWidth: 20
}
  • peace

Tags:

Label

Width

Extjs