ext js中是否可以重新渲染复选框？

Question

我有以下代码

    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');
    }
})

我想在用户单击按钮的属性值发生更改时更新boxLabelAlign属性，但是DOM无法更新，我尝试过复选框的updateLayout（），但它不起作用。那么这些问题有什么解决办法吗？还是有什么方法可以更新DOM？

Answer 1

您应该使用setLabelAlign()方法，而不是直接分配值。方法如下：

var checkbox = Ext.create({
    xtype: 'checkbox',
    labelAlign: 'right',
    label: 'test'
})

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

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

我不知道这是否是您想要的，但希望对您有所帮助。