2

这看起来很容易，但我无法做到。我想在单击登录按钮后更改视图，这是我的代码：

应用程序.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 会显示此错误：

未捕获的 HierarchyRequestError：节点被插入到它不属于的地方。

我的代码有什么问题？

谢谢！

4

1 回答 1

6

我就是这样做的：基本想法是拥有一个父容器（我更喜欢Viewport，因为它是整个可见的浏览器区域）。将其布局设置为card。它将包含 2 个视图，一个登录视图和一个主视图。在您的控制器中，使用setActiveItem设置当前视图：

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

您可以根据自己的喜好引用视口（我个人在 Controller 中使用ref ）。

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

于 2013-11-12T02:16:04.713 回答