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

Question

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.

Answer 1

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?

Answer 2

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
}