Extjs MVC 应用程序 - 更多信息
Posted
技术标签:
【中文标题】Extjs MVC 应用程序 - 更多信息【英文标题】：Extjs MVC Application - More info 【发布时间】：2013-07-22 20:44:54 【问题描述】：我是使用 extjs 的新手，但我一直在使用 sencha extjs 4.2.1 库在 mvc 应用程序中工作。所以我在控制器的组织方面遇到了麻烦，因为我不知道我必须在哪里进行存储加载。我有一个带有 2 个主要视图的简单网络应用程序。 1 用于记录，主视图带有一个带有网格的选项卡面板。所以这是我的代码：
我的登录：
Ext.define('MyApp.view.frmLogin',
extend: 'Ext.form.Panel',
alias: 'widget.frmLogin',
height: 150,
id: 'frmLogin',
style: 'margin: 0px auto 0px auto;\r\nvertical-align: middle;',
width: 340,
layout:
type: 'auto'
,
anchorSize: 100,
bodyPadding: 5,
url: 'index/login',
initComponent: function()
var me = this;
me.initialConfig = Ext.apply(
url: 'index/login'
, me.initialConfig);
Ext.applyIf(me,
items: [
...
items: [
xtype: 'button',
id: 'btnFrmLoginIniciar',
style: 'text-align:right;',
text: 'Iniciar'
]
]
);
me.callParent(arguments);
);
我的主视口：
Ext.define('MyApp.view.Main',
extend: 'Ext.container.Viewport',
requires: [
'MyApp.view.frmLogin',
'MyApp.view.frmMain'
],
id: 'MainViewPort',
layout:
type: 'card'
,
initComponent: function()
var me = this;
Ext.applyIf(me,
items: [
xtype: 'frmLogin',
maxHeight: 150
,
xtype: 'frmMain',
layout:
type: 'vbox'
]
);
me.callParent(arguments);
);
我的主视图：
Ext.define('MyApp.view.frmMain',
extend: 'Ext.panel.Panel',
alias: 'widget.frmMain',
initComponent: function()
var me = this;
Ext.applyIf(me,
dockedItems: [
xtype: 'toolbar',
dock: 'top',
id: 'tlbMain',
,
xtype: 'toolbar',
dock: 'bottom',
id: 'tlbStatus',
items: [
xtype: 'textfield',
id: 'txtTlbStatusGrupo',
fieldLabel: 'Grupo/Rol:',
value: 'Grupo o Rol',
readOnly: true
]
],
items: [
xtype: 'tabpanel',
id: 'pnlMainTab',
activeTab: 0,
items: [
xtype: 'gridpanel',
id: 'grdTransportes',
title: 'Listado de Transportes',
store: 'ListaFichasTransporte',
columns: [
]
,
xtype: 'gridpanel',
id: 'grdEmbarques',
title: 'Lista de Embarques',
store: 'ListaEmbarques',
columns: [
]
,
xtype: 'gridpanel',
id: 'grdCostosEmbarque',
title: 'Costos por Embarque',
store: 'ListaCostosXEmbarque',
columns: [
]
,
xtype: 'gridpanel',
id: 'grdEmpresas',
title: 'Empresas',
store: 'ListaEmpresas',
columns: [
]
,
xtype: 'gridpanel',
id: 'grdCamiones',
title: 'Camiones',
store: 'ListaCamiones',
columns: [
]
]
]
);
me.callParent(arguments);
);
我的登录控制器：
Ext.define('MyApp.controller.Login',
extend: 'Ext.app.Controller',
models: [
'Sucursal'
],
stores: [
'ListaSucursales'
],
views: [
'frmLogin'
],
refs: [
ref: 'Usuario',
selector: 'textfield[id=txtFrmLoginUsuario]',
xtype: 'Ext.form.field.Text'
,
ref: 'Clave',
selector: 'textfield[id=txtFrmLoginClave]',
xtype: 'Ext.form.field.Text'
,
ref: 'Sucursal',
selector: 'textfield[id=cmbFrmLoginSucursal]',
xtype: 'Ext.form.field.ComboBox'
],
onFrmLoginSucursalComboboxRender: function(component, eOpts)
component.getStore().load();
,
onFrmLoginIniciarButtonClick: function(button, e, eOpts)
var jsonToPost = ;
jsonToPost.usuario = this.getUsuario().getValue();
jsonToPost.clave = this.getClave().getValue();
jsonToPost.sucursal = this.getSucursal().getValue();
maincontroller = this.getController("Main");
mifuncion = this.ChangeMainLayout;
console.log(jsonToPost);
oMaincontroller = this.getController('Main');
Ext.data.JsonP.request(
url: 'http://fplweb2.localhost/index/login',
callbackKey: 'callback',
params: jsonToPost,
success: function(result, request)
var rsLogin = result.success;
if (rsLogin === "true")
mifuncion(maincontroller, jsonToPost.usuario, result.group);
oMaincontroller.LoadGrids();
else
Ext.MessageBox.alert('Inicio de Sesión', result.message);
);
,
ChangeMainLayout: function(maincontroller, user, group)
var panel = Ext.getCmp('MainViewPort');
panel.getLayout().setActiveItem(1);
console.log(panel);
maincontroller.getUsuario().setValue(user);
maincontroller.getGrupo().setValue(group);
,
init: function(application)
this.control(
"combobox[id=cmbFrmLoginSucursal]":
render: this.onFrmLoginSucursalComboboxRender
,
"button[id=btnFrmLoginIniciar]":
click: this.onFrmLoginIniciarButtonClick
);
);
我的问题很简单：虽然我的登录工作正常，但为什么我看不到我的标签面板和网格呢？我必须实例化我的观点吗？...我必须在哪里做？我的网格有列，但由于这个问题的大小，我已经从代码中删除了。
提前谢谢你：D
【问题讨论】：
【参考方案1】：是的。您需要在 app.js 文件中创建具有所需配置的“Ext.application”实例。是的。参考煎茶文档http://docs.sencha.com/extjs/4.2.0/#!/guide/getting_started
【讨论】：
以上是关于Extjs MVC 应用程序 - 更多信息的主要内容，如果未能解决你的问题，请参考以下文章
通用后台管理系统（ExtJS 4.2 + Spring MVC 3.2 + Hibernate）