有没有办法在 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

您应该使用 setConfig() 方法来分配新的 boxLabelAlign 属性而不是直接分配值。方法如下：

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

您可以使用 element.setConfig({...}) 方法更改 Ext js 元素的 initialConfigs

有没有办法在 ext js 中重新呈现复选框？

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

javascript

extjs

extjs5