如何在ExtJS7中实现radiogroup

我是ExtJS新手，在实现radiogroup时遇到了一些问题

我的结构如下： 我有一个tab.Panel可以加载form.Panel，其中应该包括一个radiogroup

选项卡面板的文件包含：

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

testform的文件包含：

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”

---

请注意，诸如radiofield、textfields、combobox等功能似乎很好（尽管出于某种原因，如果我使用layout:'form'，radiofields不起作用。它们不会抛出错误，但不会显示出来）。

您确定使用了

extjs 7

而不是

extjs 6.7

检查

警报（Ext.versions.Ext.version）

以检查版本

radiogroup

仅从7.0版开始提供

不允许在extjs

6.7

中使用

radiogroup

，您将收到错误消息（如您所看到的）

未捕获错误：[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
                    }, ]
                }]
            }]
        })
    }
});

---

您确定使用了

extjs7

而不是

extjs6.7

检查

警报（Ext.versions.Ext.version）

以检查版本

radiogroup

仅从7.0版开始提供

不允许在extjs

6.7

中使用

radiogroup

，您将收到错误消息（如您所看到的）

未捕获错误：[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
                    }, ]
                }]
            }]
        })
    }
});

---

首先，您将

Classic

与

Modern

小部件混合使用。您使用的是

Classic

还是

model

？参数

全屏

仅在现代版中，组件

Ext.tab.面板

仅在经典版中。第二，您正试图覆盖现有的widget-

选项卡

@norbeq啊，是的，关于经典元素，您是对的。那是我在摆弄各种各样的东西。将其更改回Ext.tabPanel，这是一种现代的工具，并且修复覆盖问题似乎并不能解决问题，但不幸的是。首先，您将

Classic

与

modern

小部件混合使用。您使用的是

Classic

还是

model

？参数

全屏

仅在现代版中，组件

Ext.tab.面板

仅在经典版中。第二，您正试图覆盖现有的widget-

选项卡

@norbeq啊，是的，关于经典元素，您是对的。那是我在摆弄各种各样的东西。将其更改回Ext.tabPanel，这是一种现代的方式，并且修复覆盖问题似乎并不能解决问题，但不幸的是。哦，哇，你是对的。我只使用Cmd 7.0.0.40，但使用extjs 6.7.0.210。这就是我信任同事建立系统的原因。如果我的答案是正确的，请将其标记为“这个答案很有用”，让其他人看到问题已经解决。哦，哇，你是对的。我只使用Cmd 7.0.0.40，但使用extjs 6.7.0.210。这就是我信任同事建立系统的原因。如果我的答案是正确的，请将其标记为“此答案有用”，以让其他人看到问题已经解决。