如何在ExtJS7中实现无线电分组

Question

我是ExtJS的新手，在实现无线电分组时遇到了一些困难。

我的结构如下:我有一个装载tab.Panel的form.Panel，它应该包括一个无线电组和其他东西。

选项卡面板的文件包含：

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

我得到的只是“未识别的错误: Ext.createByAlias无法识别的别名: widget.radiogroup”。

请注意，诸如放射性字段、文本框、组合框等的东西似乎工作得很好(尽管如果我使用布局：“form”，由于某种原因，放射性字段不能工作。)它们不会抛出错误，而只是不会出现)。

Answer 1

你确定用的是extjs 7而不是extjs 6.7吗？

检查alert(Ext.versions.ext.version)以检查版本。

radiogroup只能从7.0中获得。

不允许在extjs中使用radiogroup，6.7将得到错误消息(正如您所得到的)。

未识别错误: Ext.createByAlias未识别别名: widget.radiogroup

下面是extjs7.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
                    }, ]
                }]
            }]
        })
    }
});