Set Checkbox boxLabel dynamically ?

[enpasos]

How to do it ?
There is a thread (with answer) for an earlier extjs version.

[enpasos]

Can one do better than

var checkbox = ...;
var text = '...';
checkbox.el.down('.x-form-cb-label').update(text); 

[mitchellsimoens]

Think this is a reusable method to do this. Should take into account if anyone changes the Ext.baseCSSPrefix.

Ext.override(Ext.form.field.Checkbox, {
    setBoxLabel : function(text) {
        var cbEl    = this.el,
            labelEl = cbEl.down('.' + this.boxLabelCls);

        labelEl.update(text);
    }
});

[nooneyet]

Mitchell, I was hoping this thread would solve my problem, but your code is just a pretty wrapper for

X.boxLabelEl.update(...)

My problem is that when I put a checkbox inside a field container with an hbox layout, updating the boxLabel only updates its text, but doesn't adjust its width.

Moreover, the closest I got to a solution (the 'Update and force layout' button in the example below), was doing a forceComponentLayout() on the field container - this at least makes the new label readable, but it heightens the container instead of readjusting the width.

Ext.onReady(function(){
	Ext.create('Ext.FormPanel', {
        title: 'Test',
        frame: true,
        width: 430,
        renderTo:Ext.getBody(),
        bodyPadding: 10,
        items: [
            {
				xtype: 'fieldcontainer',
				id: 'fld-ct',
				width: 400,
				layout: 'hbox',
				fieldLabel: '',
				items: [
					{
						xtype: 'checkbox',
						id: 'TESTCHECK',
						fieldLabel: '',
						boxLabel: 'Box Label'
					},
					{
						xtype: 'textfield',
						fieldLabel: ''
					}
				]
			},{
				xtype: 'fieldcontainer',
				id: 'fld-ct2',
				width: 400,
				layout: 'hbox',
				fieldLabel: '',
				items: [
					{
						xtype: 'checkbox',
						id: 'TESTCHECK2',
						fieldLabel: '',
						boxLabel: 'Another Box Label'
					},
					{
						xtype: 'textfield',
						fieldLabel: ''
					}
				]
			}

        ],
        buttons: [{
            text: 'Update boxLabel',
            handler: function(){Ext.getCmp('TESTCHECK').boxLabelEl.update('SOME LONGER LABEL');}
        },{
            text: 'Update and force layout',
            handler: function(){
				Ext.getCmp('TESTCHECK').boxLabelEl.update('AN EXTREMELY LONG LABEL');
				Ext.getCmp('TESTCHECK').forceComponentLayout();
			}
        }]
    });
});