我正在尝试使用 MVC 在 ExtJS 中开发应用程序。设计应用程序的目的是： 1. 创建一个登录页面以进行身份验证 2. 成功登录后，我必须在单个页面中显示 3 个网格。这 3 个网格有不同的商店和模型。
我能够设计登录页面，但在登录后我在进入下一个视图时遇到问题。=====>控制器/Login.js
Ext.define('MyApp.controller.Login', {
extend: 'Ext.app.Controller',
views: ['Login'],
refs: [
{
ref: 'viewportmain',
selector: 'viewportmain'
}
],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
},
'button[action=submitLogin]': {
click: this.submitLoginForm
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
},
submitLoginForm: function (button) {
///// DO NOT BOTHER ABOUT LOGIN AUTHENTICATION PROCESS
console.log('submitLoginForm function');
// var view = Ext.create('MyApp.view.Order', {});
var OrderController = this.getController('MyApp.controller.Order');
OrderController.showNext(button);
// I HAVE TRIED CERTAIN WAYS IN COMMENTED SECTION
// var view1 = OrderController.getOrderView();
// var form = button.up('form').getForm();
//var view1 = this.getOrder();
var form = button.up('form').getForm();
form.owner.up('viewport').getLayout().next();
//this.getViewportmain();
console.log('The ');
}
});
======> 控制器/Order.js
Ext.define('MyApp.controller.Order', {
extend: 'Ext.app.Controller',
alias: 'controller.order',
stores:['Order'],
models:['Order'],
views: ['Order'],
init: function () {
this.getOrderStore().load();
},
showNext: function(button) {
var view = Ext.create('MyApp.view.Order');
view.show();
}
});
=======> 视图/viewport.js
Ext.define('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.viewportmain',
requires: [
'MyApp.view.Login',
'MyApp.view.Order',
'MyApp.view.DisplayGrids'
],
layout: 'fit',
items: [{
xtype: 'login'
}, {
xtype: 'form',
layout: 'fit',
title: 'new form'
}]
});
=======> app.js
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'MyApp',
appFolder: 'App',
models:['Order'],
stores:['Order'],
controllers: [
'Login'//, 'Order'
],
autoCreateViewport: true
});
我正在尝试使这些网格组合在公共面板中 ========> view/DispalyGrid.js
Ext.define('MyApp.view.DisplayGrids' ,{
extend: 'Ext.form.Panel',
alias: 'widget.displaygrids',
layout: 'fit',
items: [{
xtype: 'order'
}]
});
我试图从 DisplayGrid 调用 Order，最终给出错误，所以我尝试直接使用视图/订单。
请指导我，我一直在尝试这个东西，但我做错了。我试过这个，但每次它都给我错误
Cannot read property 'buffered' of undefined
提前致谢。:D