ExtJS FormPanel Change labelWidth after adding fields dynamically

Question

Hi, I have a dynamic FormPanel where I need to set the label width after I have loaded in all the fields. I have tried using this.labelWidth = 200 before calling this.doLayout but it's ignoring the new value.

Can someone tell me where I can set this and redraw the form, thanks.

Answer 1

Could it be that the labelWidth config option is not taken into consideration anymore after the FormPanel is rendered? Maybe you could acquire a reference to all the labels with FormPanel.findByType, set the label widths to 200, and then calling FormPanel.doLayout?

Answer 2

After looking through the extjs source code for FormLayout I found that some variables you can set to change the label width before calling doLayout on the form.

so inside your FormPanel use the following code to change the label width:

Ext.apply(this.layout, {
    labelAdjust: this.labelWidth + 5,
    labelStyle: 'width:' + this.labelWidth + 'px;',
    elementStyle: 'padding-left:' + (this.labelWidth + 5) + 'px'
});

this.doLayout();