is there any way to re-render checkbox in ext js?

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??

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