javascript - 使用 ExtJS 切换 View

Question

这看起来很容易，但我做不到。我想在点击登录按钮后更改 View ，这是我的代码:

应用程序.js

Ext.require ('Ext.container.Viewport');
Ext.application({
  name: 'MyApp',
  appFolder: 'app',
  views: [
    'Login',
    'Main'
  ],
  controllers:[
    'Login'
  ],
  launch: function() {
    Ext.create('Ext.container.Viewport', {
      layout: 'fit',
      items: [{
        xtype: 'loginView'
      }]
    });
  }
});

Login.js( View )

Ext.define('MyApp.view.Login' ,{
  extend: 'Ext.panel.Panel',
  alias : 'widget.loginView',

  title: 'MyApp',
  layout: {
    type: 'hbox',
    pack: 'center',
    padding: 50
  },
  defaults: {
    border: false,
    width: 400,
    height: 400
  },
  items: [{
    xtype: 'panel',
    html: '<img src="resources/img/img.jpg" />'
  }, {
    xtype: 'loginForm'
  }]
});

Ext.define('MyApp.view.LoginForm', {
  extend: 'Ext.form.Panel',
  alias: 'widget.loginForm',
  title: 'PSSP',
  bodyPadding: 5,
  layout: 'anchor',
  fieldDefaults: {
    labelAlign: 'top',
    labelWidth: 100,
    labelStyle: 'font-weight:bold'
  },
  defaults: {
    anchor: '100%',
    margins: '0 0 10 0',
    allowblank: false,
    xtype: 'textfield',
  },
  items: [{
    fieldLabel: 'User',
    name: 'username',
    itemId: 'username',
  }, {
    fieldLabel: 'Password',
    name: 'password',
    itemId: 'password',
    inputType: 'password',
  }],
  buttons:[{
    text: 'Login',
    listeners: {
      click: function() {
        var username = this.up('form').down('#username').getValue();
        var password = this.up('form').down('#password').getValue();
        this.fireEvent('login', username, password);
        //Ext.Msg.alert('Datos', 'User: ' + username + '<br>Password: ' + password);
      }
    }
  }]
});

Login.js( Controller )

Ext.define('MyApp.controller.Login', {
  extend: 'Ext.app.Controller',
  init: function() {
    this.control({
      'loginView button': {
        login: this.loginUser
      }
    });
  },
  loginUser: function(username, password) {
    // check if the username and password is valid
    Ext.create('Ext.container.Viewport', {
      items:[{
        xtype: 'mainView'
      }]
    });
  }
});

Main.js( View )

Ext.define('MyApp.view.Main' , {
  extend: 'Ext.container.Viewport',
  alias : 'widget.mainView',

  layout: 'border',
  items: [{
    region: 'north',
    title: 'MyApp'
  }, {
    region: 'west',
    width: 250,
    html: 'WEST'
    //xtype: 'westView'
  }, {
    region: 'east',
    width: 250,
    html: 'EAST'
    //xtype: 'eastView'
  }, {
    region: 'center',
    html: 'CENTER'
    //xtype: 'centerView'
  }]
});

当我点击登录按钮时，我必须更改什么才能加载 MainView？？？现在，当我点击它时，Chrome 会显示此错误:

Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong.

我的代码有什么问题？

谢谢!

Answer 1

我是这样做的:基本思想是有一个父容器(我更喜欢 Viewport ，因为它是整个浏览器的可视区域)。将其布局设置为 card .它将包含 2 个 View ，一个登录 View 和一个主视图。在您的 Controller 中，使用 setActiveItem设置当前 View :

Ext.getCmp('ViewportID').getLayout().setActiveItem('ViewIndex');

您可以随意引用视口(viewport)(我个人在 Controller 中使用 ref)。

我还看到您正在尝试创建 2 个视口(viewport)。这是不可能的，因为一次只能有 1 个视口(viewport)。有关详细信息，请参阅文档。