Как реализовать радиогруппу в ExtJS7

Question

Я новичок в ExtJS и у меня возникли проблемы с внедрением радиогруппы.

Моя структура выглядит следующим образом: У меня есть вкладка. Панель, которая загружает форму. Панель, которая должна включать в себя радиогруппу, среди прочего.

Файл для панели вкладок содержит:

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'
        }
    ]
});

И файл для формы теста содержит:

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},
             ]
        }
    ]
});

Все, что я получаю, это ошибка "Uncaught Error: [Ext.createByAlias] Нераспознанный псевдоним: widget.radiogroup".

Обратите внимание, что такие вещи, как радиополя, текстовые поля, выпадающие списки и т. Д., Похоже, работают просто отлично (хотя радиополя не работают, если я по какой-то причине использую макет: 'form'. Они не выдают ошибку, а просто не делают ')не показывай).

Answer 1

Вы уверены, что использовали extjs 7 вместо extjs 6.7?

Установите alert(Ext.versions.ext.version) для проверки версии.

radiogroup доступен только с 7.0.

Использование radiogroup в extjs 6.7 не разрешено, и выполучит сообщение об ошибке (как вы получили)

Uncaught Error: [Ext.createByAlias] Нераспознанный псевдоним: widget.radiogroup

Вот пример рабочего кода в 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
                    }, ]
                }]
            }]
        })
    }
});