javascript - Switch view with ExtJS - Stack Overflow

admin管理员组

文章数量:1389762

It looks pretty easy but I'm unable to do it. I want to change the view after click on login button, this is my code:

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

What I have to change to load MainView when I click on login button??? Now, when I click on it, Chrome shows this error:

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

What's wrong in my code?

Thanks!

It looks pretty easy but I'm unable to do it. I want to change the view after click on login button, this is my code:

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

What I have to change to load MainView when I click on login button??? Now, when I click on it, Chrome shows this error:

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

What's wrong in my code?

Thanks!

• javascript
• extjs
• view
• switch-statement

Share Improve this question Follow edited Mar 26, 2014 at 11:58 Ala Varos asked Nov 11, 2013 at 12:57 Ala VarosAla Varos 1,72577 gold badges3434 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This is how I do it: The basic idea is to have a parent container (I prefer a Viewport, as it's the whole viewable browser area). Set its layout to card. It will contain 2 views, a Login View and a Main View. In your Controller, use setActiveItem to set the current view:

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

You can reference to the Viewport however you like (personally I use ref in Controller).

Also I see that you're trying to create 2 Viewport. This is impossible because there can be only 1 Viewport at a time. See the docs for more detail.

本文标签： javascriptSwitch view with ExtJSStack Overflow