CODEWITHSUNDEEP
extjslabelwidth
Gerrat
Gerrat

Reputation: 29690

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

with the following code:


var win = new Ext.Window({
    xtype: 'form',
    layout: 'form',
    items: [{
        xtype: 'textfield',
        value: 'test',
        name: 'testing',
        labelWidth: 200,
        fieldLabel: 'This is a really, really long label here',
        labelStyle: 'white-space: nowrap;'
    }]

}).show();

This label text overlaps the input section (sorry not enough reputation points to post an image).

I've tried using css with various combinations of: 'cls', 'labelStyle', 'style', and 'width' but they all seem to be ignored (at least in terms of setting the label width properly).
I am adding items to a form dynamically, and I want custom label width's for each element. On other elements, I don't want the default 100px space it reserves for the label - I want less. Is this possible with the standard textfield, or do I have to create a custom component just to do this?

Thanks for any insight provided.

Upvotes: 13

Views: 70749

Answers (6)

zoirs
zoirs

Reputation: 631

Add these properties:

labelWidth: 'auto',
labelAlign: 'right',
labelStyle: 'white-space: nowrap;',

Upvotes: 0

legrandmawak
legrandmawak

Reputation: 31

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

Upvotes: 2

Brian Moeskau
Brian Moeskau

Reputation: 20419

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?

Upvotes: 19

Christophe Blin
Christophe Blin

Reputation: 1909

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

Upvotes: 2

Lester Cheung
Lester Cheung

Reputation: 2030

What I did is simply set labelWidth to an empty string and let the browser to do its job. ;-)

{
    id: 'date0'
    ,fieldLabel: 'Start'
    ,labelWidth: ''
    ,xtype: 'datefield'
    ,emptyText: 'Select a start date'
    ,value: Ext.Date.add(new Date(), Ext.Date.DAY, -_duration)
    // ,width: 100
}

Upvotes: 0

Donatas Olsevičius
Donatas Olsevičius

Reputation: 1350

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}
    ]
}

Upvotes: 6

Related Questions