问Sencha ExtJS:未选择的无线电场
EN

Stack Overflow用户

提问于 2021-06-09 19:20:56

回答 1查看 11关注 0票数 1

请考虑两个模式窗口，它们引用了下面小提琴中具有radiofield组的公共容器。

https://fiddle.sencha.com/#view/editor&fiddle/3e45

最初，第一个无线R1被正确地检入到两个窗口的容器中。但是，选中其中一个窗口上的任何radiofield将取消选择另一个窗口上的所有radiofield项。

两个窗口包含容器的独立实例，因此不清楚它们如何相互影响。这种行为不会发生在任何其他元素(例如复选框)上，只会发生在无线电上。

任何想法都是非常感谢的。

extjs

回答 1

Stack Overflow用户

发布于 2021-06-09 20:14:16

将您的单选字段集放入/包装在表单面板中，在本例中它将保留值(yourForm.getValues())：

Ext.application({
    name: 'Fiddle',
    launch: function () {

        Ext.define('fsContainerHandler', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.fsContainerHandler'
        });

        Ext.define('fsContainer', {
            extend: 'Ext.form.Panel', // ---== Extending form now. ==---
            xtype: 'xFSContainer',
            sfx: '',
            controller: 'fsContainerHandler',
            items: [{
                xtype: 'fieldset',
                title: 'myFieldset',
                reference: 'fsRef',
                flex: 1,
                items: [{
                    xtype: 'radiofield',
                    checked: true,
                    name: 'myRadio',
                    boxLabel: 'R1'
                }, {
                    xtype: 'radiofield',
                    checked: false,
                    name: 'myRadio',
                    boxLabel: 'R2'
                }, {
                    xtype: 'radiofield',
                    checked: false,
                    name: 'myRadio',
                    boxLabel: 'R3'
                }]
            }]
        });

        Ext.define('mainContainerHandler', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.mainContainerHandler',
            singleton: true,
            onButton1Click: function () {
                var win = this.getView().window1;
                win.show();
            },
            onButton2Click: function () {
                var win = this.getView().window2;
                win.show();
            }
        });

        Ext.define('mainContainer', {
            extend: 'Ext.container.Container',
            width: 400,
            height: 400,
            controller: 'mainContainerHandler',
            window1: null,
            window2: null,
            initComponent: function () {
                this.window1 = Ext.create('window1');
                this.window2 = Ext.create('window2');
                this.callParent(arguments);
            },
            items: [{
                xtype: 'button',
                text: 'Window 1',
                reference: 'btn1',
                handler: mainContainerHandler.onButton1Click,
                scope: mainContainerHandler
            }, {
                xtype: 'button',
                text: 'Window 2',
                reference: 'btn2',
                handler: mainContainerHandler.onButton2Click,
                scope: mainContainerHandler
            }]
        });

        Ext.define('window1', {
            extend: 'Ext.window.Window',
            title: 'Window1',
            modal: true,
            width: 400,
            height: 400,
            closeAction: 'hide',
            referenceHolder: true,
            items: [{
                xtype: 'xFSContainer',
                reference: 'theContainer'
            }]
        });

        Ext.define('window2', {
            extend: 'Ext.window.Window',
            title: 'Window2',
            modal: true,
            width: 400,
            height: 400,
            closeAction: 'hide',
            referenceHolder: true,
            items: [{
                xtype: 'xFSContainer',
                reference: 'theContainer'
            }]
        });

        Ext.create('mainContainer', {
            renderTo: document.body
        });
    }
});