Problems creating and showing a window more than once

Question

I'm creating and showing a window like such:

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

In the view, this is how the window and its child components are defined:

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

The window is created and shown OK the first time, but the 2nd time, I'm getting two different errors for each of the tabs that I'm creating within the window's tabpanel.

If I comment them out (obviously, the window holds nothing) I don't get the error and I open and close the window as I please without errors.

Do you guys see any obvious misuse or blatant mistakes about how I create the window and its components ?

All the Ext.define calls are done within the initComponent() method of the associated view.

The window's default close action is destroy so I'm wondering if the tabs are not recreated properly even though I would think so as when I'm creating the window, I'm asking for everything to be recreated.

Thank you.

score 2 · Accepted Answer · answered Jul 21 '14 at 17:28

The problem is with these lines : Ext.widget('GeneralInfoFieldset'). Replace

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

by

items: [{xtype: 'GeneralInfoFieldset'}]

In the second version, those components are created automatically when the parent component is created. This guarantees that they are correctly distroyed and later recreated.
In your code, they are created at the moment of the definition of the parent component. The parent component is created later in the code.

I don't know exactly what happens, what follows is an assumption. Two things are possible

GeneralInfoFieldset is correctly destroyed. It is missing when you recreate the tabs.
As GeneralInfoFieldset was created 'manually' before the rendering of the parent EditPortalUserWindow, it is not destroyed correctly, and the recreation failes.

I think it is rather the first case, if you'd included the error you get, it would help to better diagnose.

As a general advice: prefer instantiating a component throug the xtype-configuration, because :

The component is created lazily. Lazy creation of components is a core feature and improves performance, because the component is only created at the moment it is needed.
The code flow is simpler, because you don't need to define a component before you use it by xtype. The frame work will load all definitions, and later create the components when all definitions are available.
The application logic also is simpler. Using xtype allows for a simple declarative style, while use of Ext.widget creates full component objects even before your application gets launched.

For more information read about the MVC implementation in Ext 4.

score 1 · Answer 2 · edited May 23 '17 at 12:05

Chaging from Ext.widget to {xtype: can fix the problem but it only hides the real problem which is instance sharing of the items. Items should never be put on the Ext.define config object they should be added in the initComponent. Here is a more in depth explanation of instance sharing problems. You should be able to do something like:

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();
        });

Problems creating and showing a window more than once

2 Answers2