问题创建和显示不止一次窗口

我创建并显示像这样的窗口：问题创建和显示不止一次窗口

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

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

如果我将它们注释掉（很明显，该窗口不包含任何内容），我不会收到错误信息，而且我会按照自己的意愿打开和关闭窗口而不会出错。

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

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

该窗口的默认关闭动作是destroy所以我想知道是否没有正确重新创建标签，即使我会这样想，因为当我创建窗口时，我要求重新创建所有内容。

谢谢。

来源

2014-07-21 Francis Ducharme

问题在于以下几行：Ext.widget('GeneralInfoFieldset')。通过

items: [{xtype: 'GeneralInfoFieldset'}]

在第二版本替换

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

，创建父组件时自动创建的那些组件。这保证它们被正确地破坏并在以后重新创建。
在您的代码中，它们是在父组件的定义时刻创建的。父组件稍后在代码中创建。

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

GeneralInfoFieldset被正确销毁。当您重新创建标签时，它会丢失。
由于GeneralInfoFieldset是在父亲EditPortalUserWindow的渲染之前“手动”创建的，因此它不会被正确销毁，并且娱乐功能会失败。

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

作为一般的建议：喜欢实例化的组件通过量的xtype - 构型，这是因为：

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

欲了解更多信息，分机4

来源

2014-07-21 17:28:03

阅读有关MVC实现从Ext.widget到{xtype:换款可以解决问题，但它只是隐藏了真正的问题是项目的实例共享。项目不应该放在配置对象上，它们应该添加到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(); 
     });

来源

2014-07-21 22:21:30 pllee

问题创建和显示不止一次窗口

回答

相关问题