Question

我在使用ExtJS 6.2.0制作的简单应用程序时遇到麻烦，而不使用sencha cmd。问题是，在模拟登录后我无法显示一个简单的窗口。

我的app.js：

Ext.Loader.setConfig({
  enabled: true
});

Ext.onReady(function() {
  Ext.application({
    name: 'AdeaProjects',

    requires: [
        'AdeaProjects.view.login.Login'
    ],

    views: [
        'AdeaProjects.view.main.Main'
    ],

    launch: function() {
      Ext.setGlyphFontFamily('FontAwesome');
      Ext.create('AdeaProjects.view.login.Login').show();
    }
  });
});

登录视图 - Login.js

Ext.define('AdeaProjects.view.login.Login', {
  extend: 'Ext.window.Window',
  xtype: 'login',

  requires: [
    'AdeaProjects.view.login.LoginController',
    'Ext.form.Panel'
  ],

  controller: 'login',
  bodyPadding: 10,
  title: 'Inicio de Sesión',
  closable: false,
  autoShow: true,
  draggable: false,
  resizable: false,

  items: {
    xtype: 'form',
    reference: 'form',
    items: [{
      xtype: 'textfield',
      name: 'username',
      fieldLabel: 'Nombre Usuario',
      allowBlank: false
    }, {
      xtype: 'textfield',
      name: 'password',
      inputType: 'password',
      fieldLabel: 'Contraseña',
      allowBlank: false
    }, {
      xtype: 'displayfield',
      hideEmptyLabel: false,
      value: 'Ingrese una contraseña válida.'
    }],
    buttons: [{
      text: 'Login',
      formBind: true,
      glyph: 0xf090,
      listeners: {
        click: 'onLoginClick'
      }
    }]
  }
});

控制器 - LoginController.js

Ext.define('AdeaProjects.view.login.LoginController', {
  extend: 'Ext.app.ViewController',
  alias: 'controller.login',

  onLoginClick: function() {
    localStorage.setItem("UserLoggedIn", true);
    this.getView().destroy();

    Ext.create({
      xtype: 'app-main'
    });
  }

});

最后我要展示的观点 - Main.js

Ext.define('AdeaProjects.view.main.Main', {
  extend: 'Ext.window.Window',
  alias: 'widget.app-main',

  requires: [
    'AdeaProjects.view.main.MainController',
    'AdeaProjects.view.main.MainModel'
  ],

  controller: 'main',

  viewModel: {
    type: 'main'
  },

  resizable: false,
  layout: {
    type: 'table',
    columns: 4
  },

  initComponent: function() {
    var group = '';
    this.callParent();
  },

  defaultType: 'button',
  defaults: {
    width: 50,
    height: 50,
    cls: 'btn',
    handler: 'onClickNumber'
  },

  header: {
    items: [{
      xtype: 'displayfield',
      colspan: 4,
      width: 200,
      cls: 'display',
      bind: {
        value: '{display}'
      },
      height: 60,
      padding: 0

    }]
  },
  items: [//more stuff]
});

我尝试过使用alias或xtype但是我无法显示窗口。但是，如果我更改以下内容：

Ext.create({
  xtype: 'app-main'
});

使用：

Ext.create('AdeaProjects.view.main.Main').show();

它完美无缺，但我需要知道为什么我不能使用xtype的延迟加载。

你能帮帮我吗？我做错了什么？

非常感谢

ExtJS：为什么我的视图在使用xtype时没有显示？

0 个答案: