有没有办法在 ext js 中重新渲染复选框？

Question

i have following code

    extend: 'Ext.container.Viewport',
    initComponent: function () {
        var me = this;
        me.items = [
            {
                xtype: 'checkbox',
                fieldLabel: 'RPTest',
                itemId:'chk1'
            },
            {
                xtype: 'button',
                text: 'test',
                handler: function () {
                    me.chk1.setBoxLabel(me.chk1.fieldLabel);
                    me.chk1.boxLabelAlign = 'before';

                    me.chk1.setFieldLabel('');
                }
            }
        ];
        me.callParent(arguments);
        me.chk1 = me.down('#chk1');
    }
})

i want to update boxLabelAlign property whenever user click button property values changes but DOM doesn't update i have tried updateLayout() of checkbox but it doesn't works. so is there any solution of these problem? or is there any way to update DOM??

Answer 1

You should use the setConfig() method to assign the new boxLabelAlign property instead of assigning the value directly. Here is how:

var checkbox = Ext.create({
    xtype: 'checkbox',
    boxLabelAlign: 'after',
    boxLabel: 'ltest'
})

var button = Ext.create({
    xtype: 'button',
    text: 'CLICK ME',
    handler: function () {
        checkbox.setConfig({
            boxLabelAlign: 'before'
        })
    }
})

Ext.create('Ext.panel.Panel', {
    title: 'Setting label align',
    items: [
        checkbox,
        button
    ],
    renderTo: Ext.getBody()
});

You can change the initialConfigs of an Ext js element using the element.setConfig({...}) method