使用ExtJS切换视图

Question

它看起来很容易,但我无法做到.我想在点击登录按钮后更改视图,这是我的代码:

app.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(查看)

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(控制器)

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(查看)

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:节点被插入了它不属于的地方.

我的代码有什么问题？

谢谢!

Answer 1

这就是我的方法:基本的想法是拥有一个父容器(我更喜欢一个Viewport,因为它是整个可查看的浏览器区域).将其布局设置为卡片.它将包含2个视图,一个登录视图和一个主视图.在Controller中,使用setActiveItem设置当前视图:

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

您可以根据需要引用Viewport(我个人在Controller中使用ref).

我也看到你正在尝试创建2个视口.这是不可能的,因为一次只能有一个视口.有关更多详细信息,请参阅文档.