Question

我正在创建并显示如下窗口：

var w = Ext.widget('EditPortalUserWindow');
w.show();

在视图中，这是窗口及其子组件的定义方式：

Ext.define('Customer_Portal_UI.view.MainContent.EditPortalUserWindow', {
        alias: 'widget.EditPortalUserWindow',
        extend: 'Ext.Window',
        height: 400,
        width: 500,
        modal: true,
        resizable: false,
        items: [
        {
            xtype: 'form',
            frame: false,
            bodyStyle: 'background-color:white;border-width: 0px;',
            itemId: 'EditPortalUserForm',
            trackResetOnLoad: true,
            url: GlobalVars.portalUserPostApiUrl,
            method: 'POST',
            items: [
                {
                    xtype: 'tabpanel',
                    items: [
                            {
                                xtype: 'panel',
                                itemId: 'GeneralInfoFieldsetPanel',
                                title: 'General',
                                items: [Ext.widget('GeneralInfoFieldset')]
                            },
                            {
                                xtype: 'panel',
                                itemId: 'UserRolesGridPanel',
                                title: 'Portal roles',
                                items: [Ext.widget('UserRolesGridFieldSet')]
                            }
                    ]

                }

            ]
        }
        ]
    });

    Ext.define('Customer_Portal_UI.view.MainContent.GeneralInfoFieldset', {
        extend: 'Ext.form.FieldSet',
        alias: 'widget.GeneralInfoFieldset',
        columnWidth: 0.5,
        style: 'padding: 20px;',
        bodyStyle: 'border-width: 0px;background-color:white;',
        defaults: {
            anchor: '100%'
        },
        items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'User ID',
                    name: 'UserID'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Username',
                    name: 'UserName'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Password',
                    name: 'password'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Confirm password',
                    name: 'confirmPassword'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Full name',
                    name: 'FullName'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Email Address',
                    name: 'EmailAddress'
                }
        ]
    });

   Ext.define('Customer_Portal_UI.view.MainContent.PortalUser.AvailRolesGrid', {
        alias: 'widget.AvailRolesGrid',
        itemId: 'AvailRolesGrid',
        title: 'Available roles',
        extend: 'Ext.grid.Panel',
        width: 150,
        height: 150,
        hideHeaders: true,
        store: 'portalRoleStore',
        columns: [
            { dataIndex: 'RoleDisplayName', flex: 1 }
        ]
    });

    Ext.define('SelectedRolesGrid', {
        alias: 'widget.SelectedRolesGrid',
        itemId: 'SelectedRolesGrid',
        title: 'Selected roles',
        extend: 'Ext.grid.Panel',
        width: 150,
        height: 150,
        hideHeaders: true,
        store: 'selectedPortalRoleStore',
        columns: [
            { dataIndex: 'RoleDisplayName', flex: 1 }
        ]
    });

    Ext.define('Customer_Portal_UI.view.MainContent.UserRolesGridFieldSet', {
        extend: 'Ext.form.FieldSet',
        alias: 'widget.UserRolesGridFieldSet',
        layout: 'hbox',
        items: [Ext.widget('SelectedRolesGrid'), Ext.widget('AvailRolesGrid')]
    });

第一次创建窗口并显示OK，但第二次，我在窗口的tabpanel中创建的每个选项卡都有两个不同的错误。

如果我将它们评论出来（显然，窗口没有任何内容）我没有收到错误，我打开并关闭窗口，我没有错误。

你们是否看到任何关于如何创建窗口及其组件的明显误用或明显错误？

所有Ext.define次调用均在相关视图的initComponent()方法内完成。

窗口的默认关闭操作是destroy所以我想知道选项卡是否未正确重新创建，即使我在想创建窗口时也会这么想，我要求重新创建所有内容

谢谢。

Answer 1

问题出在以下几行：Ext.widget('GeneralInfoFieldset')。取代

items: [Ext.widget('GeneralInfoFieldset')]

通过

items: [{xtype: 'GeneralInfoFieldset'}]

在第二个版本中，创建父组件时会自动创建这些组件。这可以保证它们被正确销毁并在以后重新创建在您的代码中，它们是在父组件定义时创建的。稍后在代码中创建父组件。

我不确切知道会发生什么，接下来是一个假设。有两件事是可能的

GeneralInfoFieldset被正确销毁。重新创建选项卡时会丢失它。
由于GeneralInfoFieldset是在呈现父EditPortalUserWindow之前'手动'创建的，因此未正确销毁，并且娱乐失败。

我认为这是第一种情况，如果你包含了错误，那将有助于更好地诊断。

作为一般建议：更喜欢通过xtype - 配置实例化组件，因为：

该组件是懒惰创建的。延迟创建组件是核心功能并提高了性能，因为组件仅在需要时创建。
代码流更简单，因为在xtype使用它之前不需要定义组件。框架工作将加载所有定义，然后在所有定义可用时创建组件。
应用程序逻辑也更简单。使用xtype允许简单的声明式样式，而使用Ext.widget甚至在应用程序启动之前就会创建完整的组件对象。

有关更多信息，请参阅Ext 4中的MVC实现。

Answer 2

从Ext.widget查询到{xtype:可以解决问题，但它只隐藏真正的问题，即项目的实例共享。永远不要将项放在Ext.define配置对象上，它们应该添加到initComponent中。 Here是对实例共享问题的更深入的解释。您应该可以执行以下操作：

Ext.define('Customer_Portal_UI.view.MainContent.EditPortalUserWindow', {
        alias: 'widget.EditPortalUserWindow',
        extend: 'Ext.Window',
        height: 400,
        width: 500,
        modal: true,
        resizable: false,
        initComponent: function() {
            this.items = [{
                xtype: 'form',
                frame: false,
                bodyStyle: 'background-color:white;border-width: 0px;',
                itemId: 'EditPortalUserForm',
                trackResetOnLoad: true,
                url: GlobalVars.portalUserPostApiUrl,
                method: 'POST',
                items: [{
                        xtype: 'tabpanel',
                        items: [{
                            xtype: 'panel',
                            itemId: 'GeneralInfoFieldsetPanel',
                            title: 'General',
                            items: [Ext.widget('GeneralInfoFieldset')]
                        }, {
                            xtype: 'panel',
                            itemId: 'UserRolesGridPanel',
                            title: 'Portal roles',
                            items: [Ext.widget('UserRolesGridFieldSet')]
                        }]

                    }

                ]
            }]
            this.callParent();
        });

多次创建和显示窗口时出现问题

2 个答案: