[ExtJs] Form labelWidth drives me nuts [solved]

275 Posts

skndn60 Reply #1, 15 years, 11 months ago

I have a form for which I want to change the labelWidth, like so:

Bookings.window.DisplayBooking = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        title: _('booking_display')
        ,url: Bookings.config.connector_url
		,labelWidth: 150
		,width: 500
....

No matter what I do, the label width maintains the same default width, which is too narrow, and word wraps my labels, messing up my layout.

Any ideas why this doesn’t work?

MODx Revolution / MAMP / OS X

659 Posts

anso Reply #2, 15 years, 11 months ago

Hello

Sure it’s not the best way to do this, but labelWidth drives me crazy, so I apply a labelStyle on each label like in the following (I put it in red in the posted code below)...

Cispeo.window.updateCompany = function(config){
config = config || {};
this.ident = config.ident || ’cpoucompany’+Ext.id();

Ext.applyIf(config,{
title: _(’cispeo.company_update’),
id: this.ident,
width: 600,
url: Cispeo.config.connector_url,
action: ’mgr/company/update’,
fields: [{
xtype: ’hidden’,
name: ’id’,
id: ’cispeo-’+this.ident+’-id’
},{
xtype: ’textfield’,
fieldLabel: _(’name’),
labelStyle: ’font-weight:bold; color:green; width: 190px;’,
name: ’name’,
id: ’cispeo-’+this.ident+’-name’,
width: 300,
allowBlank: false
},

Hope that can helps..
Cheers

275 Posts

skndn60 Reply #3, 15 years, 11 months ago

Right, thanks Anso.

I inspected the HTML element with the Chrome Inspector.

As it appears, the element is rendered as:

<label for="ext-comp-1134" style="width: 100px; " class="x-form-item-label" id="ext-gen263">Name:</label>

So, despite the definition of a labelWidth of 150 at the Window level, the label is created with some mysterious default width 100.

I suspect a bug in ExtJs, otherwise I can’t explain it.

Bit of a pain to make a labelStyle for each field. But then again, a developers life is a chain of pain... :’(

MODx Revolution / MAMP / OS X

275 Posts

skndn60 Reply #4, 15 years, 11 months ago

Hmmm... I found a weird side affect of applying labelStyle=’width: 150px’ to date fields and combo’s, to force the width of labels to a specific size, overriding the default 100px.

It appears that the grey shadow, normally displayed inside the element is now offset to the left by the amount of pixels added to label width.

It’s clearly noticeable. See the attached screenshot.

Any suggestions?

MODx Revolution / MAMP / OS X

659 Posts

anso Reply #5, 15 years, 11 months ago

Hello

I didn’t notice that on my side... (maybe because I not apply labelStyle on all my fields but only on few of them)..
Just a thought, did you try to "workaround" this issue by adding a "background-position : 50px;" in labelStyle in order to align the background on the real position of field (and not on the supposed one set by the labelWidth itself); I guess it should do the trick... Let me know...

At this time I’m working on other "funny" things not at all in the wonderful MODx Land... I’ll be back soon on my 3PCs, and probably have to ask for your help... ^_^

Cheers

275 Posts

skndn60 Reply #6, 15 years, 11 months ago

Thanks for the suggestion but it did not solve the problem... hmmm, puzzled... huh

MODx Revolution / MAMP / OS X

275 Posts

skndn60 Reply #7, 15 years, 11 months ago

Oh crap... another issue: if you modify the width of the label via the labelStyle and you have Ext QuickTips enabled for error reporting, then the red bullets appear offset as well.

@Anso: do your windows have that as well?

EDIT: It’s even worse. For combos and datefields, the dropdown selector seem to be messed up and no longer works. So I guess tinkering with the label width via labelStyle is a no-go for combos.

MODx Revolution / MAMP / OS X

659 Posts

anso Reply #8, 15 years, 11 months ago

Gasp ! >:(

Don’t know for my windows at this time... I’ll have a deeper look in them this week end and I’ll let you know if I find some clue on my side... For today I’m too busy to dive in it...

Cheers

275 Posts

skndn60 Reply #9, 15 years, 11 months ago

After a flash of inspiration, I decided to tear apart MODx.window.js and there it is:

    createForm: function(config) {
        config = config || {};
        Ext.applyIf(config,{
            labelAlign: 'right'
            ,labelWidth: 100
            ,frame: true
            ,border: false
            ,bodyBorder: false
            ,autoHeight: true
            ,errorReader: MODx.util.JSONReader
            ,url: this.config.url
            ,baseParams: this.config.baseParams || {}
            ,fileUpload: this.config.fileUpload || false
        });
        return new Ext.FormPanel(config);
    }

The labelWidth property is hard coded in the createForm method. No matter what you enter as a value for the labelWidth on the window level, you’ll always have a labelWidth of 100 pixels.

A bug?

For now I will override the createForm method with the required width for my labels.

MODx Revolution / MAMP / OS X

MODX Staff
12,272 Posts

Ryan Thrash Reply #10, 15 years, 11 months ago

That certainly seems like a bug, so please file it at http://bugs.modx.com/ ... everything should be able to be overridden via CSS.

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me