checkboxgroup/radiogroup issue in MODx.FormPanel

[Jako]

If a MODx.FormPanel contains a checkboxgroup/radiogroup this panel is not rendered because of nodeToRecurse.items is an array in utilities.js (line 65) for the checkboxgroup/radiogroup item and that has not the method each.

I don't know how to fix that without breaking recursive work of that function.

[argnist]

Any examples?

[Jako]

Do you want to check the issue live in my dev installation? Or should I strip the extjs code down?

Basically it is caused on this MODx.Panel:

ImportIt.panel.ImportExportForm = function (config) {
    config = config || {};
    this.ident = config.ident || 'importit-mecitem' + Ext.id();
    Ext.applyIf(config, {
        id: this.ident,
        items: [{
            xtype: 'modx-tabs',
            deferredRender: false,
            forceLayout: true,
            defaults: {
                layout: 'form',
                autoHeight: true,
                hideMode: 'offsets',
                padding: 15
            },
            items: [{
                xtype: 'modx-formpanel',
                items: [{
                    fieldLabel: _('importit.importform_mode'),
                    xtype: 'radiogroup',
                    items: [{
                        xtype: 'radio',
                        boxLabel: _('importit.importform_mode_append'),
                        name: 'mode',
                        id: 'importit-panel-importform-mode-append',
                        value: 'append',
                        inputValue: 'append',
                        checked: true
                    }, {
                        xtype: 'radio',
                        boxLabel: _('importit.importform_mode_update'),
                        name: 'mode',
                        id: 'importit-panel-importform-mode-update',
                        value: 'update',
                        inputValue: 'update'
                    }, {
                        xtype: 'radio',
                        boxLabel: _('importit.importform_mode_replace'),
                        name: 'mode',
                        id: 'importit-panel-importform-mode-replace',
                        value: 'replace',
                        inputValue: 'replace'
                    }]
                }]
            }]
        }]
    });
    ImportIt.panel.ImportExportForm.superclass.constructor.call(this, config);
};
Ext.extend(ImportIt.panel.ImportExportForm, MODx.Panel);
Ext.reg('importit-panel-importexportform', ImportIt.panel.ImportExportForm);

If the xtype: 'radiogroup', is removed, the Panel is rendered.

Otherwise there is a Uncaught TypeError: undefined is not a function in utilities.js:65

[argnist]

Here that's ok: https://github.com/modxcms/revolution/blob/master/manager/assets/modext/widgets/security/modx.panel.user.js#L492

Try to extend panel from MODx.FormPanel instead of MODx.Panel as other core panels do. See file I mentioned. It has tabs and radiogroups as you need.

[Jako]

Extend from MODx.FormPanel makes no difference (same error occurs).

For some reason on this panel the items of xtype 'radiogroup' is an array of objects instead of an Ext.util.MixedCollection containing 'items' that is an array of objects.

[argnist]

Have you removed xtype: 'modx-formpanel' after extending? Try to rewrite modx.panel.user with your fields.

[Jako]

I have removed that.

To reproduce what is going wrong you could use the following stripped code in a CMP:

ImportIt = function (config, getStore) {
    config = config || {};
    Ext.applyIf(config, {});
    ImportIt.superclass.constructor.call(this, config);
    return this;
};
Ext.extend(ImportIt, Ext.Component, {
    page: {}, window: {}, grid: {}, tree: {}, panel: {}, combo: {}, config: {}, util: {}
});
Ext.reg('importit', ImportIt);
ImportIt = new ImportIt();

Ext.onReady(function () {
    MODx.load({xtype: 'importit-page-import'});
});

ImportIt.page.Import = function (config) {
    config = config || {};
    Ext.applyIf(config, {
        formpanel: 'importit-panel-import',
        components: [{
            xtype: 'importit-panel-import'
        }]
    });
    ImportIt.page.Import.superclass.constructor.call(this, config);
};
Ext.extend(ImportIt.page.Import, MODx.Component);
Ext.reg('importit-page-import', ImportIt.page.Import);

ImportIt.panel.Import = function (config) {
    config = config || {};
    Ext.applyIf(config, {
        items: [{
            fieldLabel: 'Import Mode',
            xtype: 'radiogroup',
            items: [{
                xtype: 'radio',
                boxLabel: 'Append',
                name: 'mode',
                id: 'importit-panel-importform-mode-append',
                value: 'append',
                inputValue: 'append',
                checked: true
            }, {
                xtype: 'radio',
                boxLabel: 'Update',
                name: 'mode',
                id: 'importit-panel-importform-mode-update',
                value: 'update',
                inputValue: 'update'
            }, {
                xtype: 'radio',
                boxLabel: 'Replace',
                name: 'mode',
                id: 'importit-panel-importform-mode-replace',
                value: 'replace',
                inputValue: 'replace'
            }]
        }]
    });
    ImportIt.panel.Import.superclass.constructor.call(this, config);
};
Ext.extend(ImportIt.panel.Import, MODx.FormPanel);
Ext.reg('importit-panel-import', ImportIt.panel.Import);

If I use the following line

Ext.extend(ImportIt.panel.Import, MODx.Panel);

or if I remove

xtype: 'radiogroup',

the CMP is rendered.

[Ibochkarev]

@Jako Can you fix it now?

[Jako]

No, the issue is still there.

[sebastian-marinescu]

Hi @Jako, out of curiosity, does it work now? 🤓