-1
我是新的使用extjs,但我一直在使用sencha extjs 4.2.1庫的mvc應用程序工作。所以我在控制器的組織方面遇到了麻煩,因爲我不知道我必須在哪裏做店面加載。我有一個簡單的Web應用程序,有2個主視圖。 1是用於登錄,而主視圖是帶有網格的標籤面板。所以這是我的代碼:Extjs MVC應用程序 - 更多信息
我登錄:
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
}
});
}
});
我的問題很簡單:雖然我的登錄工作正常,但爲什麼我看不到我的tabpanel和我的網格呢?我是否必須實例化我的觀點?...我必須在那裏做什麼?我的網格有列,但由於這個問題的大小,我已經從代碼中刪除。
謝謝您提前:D