CODEWITHSUNDEEP
extjs
Panzer
Panzer

Reputation: 13

How to implement a radiogroup in ExtJS7

I'm new to ExtJS and have some trouble implementing a radiogroup.

My structure is as follows: I have a tab.Panel that loads form.Panel which is supposed to include a radiogroup amongst other things.

The file for the tab panel contains:

Ext.define('Test-Application.view.tab.Panel',{
    extend: 'Ext.tab.Panel',
    alias: 'widget.tab', 
    xtype: 'tab',
    fullscreen: true,

    controller: 'main',


    requires: [
        'Test-Application.view.form.TestForm'
    ],

    items: [
        {
            title: 'Testform',
            xtype: 'testform'
        }
    ]
});

And the file for the testform contains:

Ext.define('Test-Application.view.form.TestForm', {
    extend: 'Ext.form.Panel', 
    xtype: 'testform',

//    layout: 'form',


    items: [
        {
             xtype: 'radiogroup',
             label: 'Auto Layout:',
             items:
             [
                 { label: 'Item 1', value: 1},
                 { label: 'Item 2', value: 2, checked: true },
                 { label: 'Item 3', value: 3},
                 { label: 'Item 4', value: 4},
                 { label: 'Item 5', value: 5},
             ]
        }
    ]
});

All I get is the error "Uncaught Error: [Ext.createByAlias] Unrecognized alias: widget.radiogroup".

Note that things like radiofields, textfields, comboboxes etc. seem to work just fine (though the radiofields don't work if I use layout: 'form' for some reason. They don't throw an error but simply don't show up).

Upvotes: 0

Views: 350

Answers (1)

norbeq
norbeq

Reputation: 3066

Are you sure you used extjs 7 instead of extjs 6.7 ?

Check alert(Ext.versions.ext.version) to check the version.

radiogroup is only available from 7.0.

Using radiogroup in extjs 6.7 is not allowed and you will get error message (as you got)

Uncaught Error: [Ext.createByAlias] Unrecognized alias: widget.radiogroup

Here is example of working code in extjs 7.0.0:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create("Ext.Panel", {
            renderTo: Ext.getBody(),
            fullscreen:true,
            autoShow: true,
            items: [{
                xtype: 'formpanel',
                items: [{
                    xtype: 'radiogroup',
                    label: 'Auto Layout:',
                    items: [{
                        label: 'Item 1',
                        value: 1
                    }, {
                        label: 'Item 2',
                        value: 2,
                        checked: true
                    }, {
                        label: 'Item 3',
                        value: 3
                    }, {
                        label: 'Item 4',
                        value: 4
                    }, {
                        label: 'Item 5',
                        value: 5
                    }, ]
                }]
            }]
        })
    }
});

Upvotes: 2

Related Questions