Extjs正在使用更新的无线电项目数组重新加载无线电组

Extjs reloading radiogroup with updated radio items array

本文关键字：无线电新加载加载数组项目更新 Extjs 项目数更新时间：2023-09-26

我有一个包含formPanel的Ext.Window。formPanel有一个radiogroup项，该项加载radioItemsArray。最初，我基于来自myRadioStore的数据创建每个radioItem，并在formpanel中映射到radiogroup。这很好，请参阅下面的代码：

this.radioItemsArr = [];
    Ext.each(myRadioStore.data.items, function(itm, i, all) {
        var radioItem = new Ext.form.Radio({
                    id : itm.data.dataId,
                    // custom radio label with text + images
                    boxLabel: 
                        '<b>Data id:</b> ' +  itm.data.dataId + '<br/>' +
                        '<b>Data:</b> ' +  itm.data.dataDetail + '<br/>' +
                        '<p>' + '<img id style="imgStyle" src='"' + itm.data.url + ''"/></p>',                          
                    name: 'radioName',
                    inputValue: itm.data.dataId ,
                    height: 'auto',
                    checked: false
                });
        this.radioItemsArr.push(radioItem);
    }, this);
this.myForm = new Ext.form.FormPanel({
            border: false,
            id:'my-form',
            frame : true,
            layout : 'fit',
            items: [{
                    autoScroll: true,
                    id: 'myFormId',
                    defaults: {
                        labelStyle: 'font-weight:bold;'
                    },
                    items: [{
                        title: 'Custom Title',
                        items: [{
                            // custom description text set on form load
                            id: 'descId',
                            style : { marginTop: '15px', border:'5px'}
                        }]
                    }, {
                        title: 'Select an item from below',
                        items: [{
                            anchor: '0',
                            autoHeight: true,
                            xtype: 'radiogroup',
                            hideLabels: true,
                            id: 'allRadiosID',
                            items: [
                                this.radioItemsArr
                            ],
                        }]
                    }
                ],
            }],
            buttonAlign :'center',
            buttons: [{
                // save button
            },{
                // cancel button
            }]
        });

这将在第一次正确加载所有单选按钮。但当myRadioStore用服务器上的新数据更新时（当用户单击按钮时会发生这种情况），我希望我的表单面板用新的单选按钮更新。因此，当更新myRadioStore时，我删除radioItemsArray中的所有项目，然后通过循环存储并推送到radioItemsArr来创建新的radioItem。我可以看到radioItemsArr有新的单选按钮选项。但是formpanel中的radiogroup没有被刷新。

调用Ext.getCmp('my-form').doLayout()似乎不起作用。有什么想法/意见吗？

编辑：我使用的是extjs 3.4

谢谢！

没有任何东西将存储直接绑定到无线电组。您可以向商店添加一个侦听器，然后使用update侦听器以程序方式添加新的商店无线电。

未测试的代码，但应该足够接近。

// Add a listener to the store, this can be defined in the `listeners` property of the store config too.
myRadioStore.addListener('update', function () {
    // get the radio group and remove all items
    var radioGroup = Ext.getCmp('allRadiosID');
    radioGroup.removeAll();
    // call the function to renew the radio array.
    getRadioArray();
    radioGroup.add(this.radioItemsArr);
    // Optionally update the container form too
    Ext.getCmp('my-form').doLayout();
}, this);

this.radioItemsArr = [];
function getRadioArray() {
    this.radioItemsArr = [];
    Ext.each(myRadioStore.data.items, function (itm, i, all) {
        var radioItem = new Ext.form.Radio({
            id: itm.data.dataId,
            // custom radio label with text + images
            boxLabel:
                '<b>Data id:</b> ' + itm.data.dataId + '<br/>' +
                '<b>Data:</b> ' + itm.data.dataDetail + '<br/>' +
                '<p>' + '<img id style="imgStyle" src='"' + itm.data.url + ''"/></p>',
            name: 'radioName',
            inputValue: itm.data.dataId,
            height: 'auto',
            checked: false
        });
        this.radioItemsArr.push(radioItem);
    }, this);
}
getRadioArray();
this.myForm = new Ext.form.FormPanel({
    border: false,
    id: 'my-form',
    frame: true,
    layout: 'fit',
    items: [{
        autoScroll: true,
        id: 'myFormId',
        defaults: {
            labelStyle: 'font-weight:bold;'
        },
        items: [{
            title: 'Custom Title',
            items: [{
                // custom description text set on form load
                id: 'descId',
                style: {
                    marginTop: '15px',
                    border: '5px'
                }
            }]
        }, {
            title: 'Select an item from below',
            items: [{
                anchor: '0',
                autoHeight: true,
                xtype: 'radiogroup',
                hideLabels: true,
                id: 'allRadiosID',
                items: [this.radioItemsArr]
            }]
        }]
    }],
    buttonAlign: 'center',
    buttons: [{
        // save button
    }, {
        // cancel button
    }]
});

在radioGroup的情况下，对表单调用布局/渲染不起作用。因此，每次更新myRadioStore时，都需要从表单中删除radiogroup，从myRadioStore创建一个radio数组，然后在form中重新添加无线电g组数组。

类似于：

Ext.getCmp('my-form').remove(Ext.getCmp('allRadiosID'), true);
// recreate `radioItemsArr[]` array of radios from updated `radioItemsArr` and add it back to form
Ext.getCmp('my-form').add(new Ext.form.RadioGroup({
                                anchor: '0',
                                autoHeight: true,
                                id: 'allRadiosID',
                                items: [
                                    radioItemsArr
                                ]
                            });