我开始学习ExtJS但是在加载视图文件时遇到了一些问题。 当我刷新浏览器时,我的控制台出现了以下错误。
ext-dev.js:10454 GET http://bugtracker.com/app/views/Login.js?_dc=1461346272737 Ext.apply.injectScriptElement @ ext-dev.js:10454Ext.apply.loadScriptFile @ ext-dev.js:10577Ext.apply.require @ ext-dev.js:10769(anonymous function) @ ext-dev.js:11123Ext.apply.doProcess @ ext-dev.js:7453Ext.apply.process @ ext-dev.js:7442Ext.Class.ExtClass @ ext-dev.js:7359Ext.ClassManager.create @ ext-dev.js:8685Ext.apply.define @ ext-dev.js:9508(anonymous function) @ Application.js?_dc=1461346272723:1
ext-dev.js:10857 Uncaught Error: [Ext.Loader] Failed loading 'app/views/Login.js', please verify that the file exists
这是我的Login.js控制器
Ext.define('BugTracker.controller.Login', {
extend: 'Ext.app.Controller',
views: ['Login'],
init: function(){
this.control({
'login form button#submit': {
click: this.onButtonClickLogin
},
'login form button#cancel': {
click: this.onButtonClickCancel
},
'login form': {
beforeaction: this.onFormBeforeAction
}
})
},
onButtonClickCancel: function (button, e, option) {
button.up('form').getForm().reset();
},
onButtonClickLogin: function (button, e, option) {
button.up('form').getForm().submit({
url: '/login',
failure: function(form, action){
switch (action, failureType){
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Invalid login details');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Server connection error');
break;
default:
Ext.Msg.alert('Error','An unknown error has occurred');
}
},
success: function(form, action){
user = Ext.create('BugTracker.model.User', action.result.user);
button.up('login').close();
Ext.create('BugTracker.view.Viewport');
}
})
}
});
这是我的Login.js视图
Ext.define('BugTracker.view.Login', {
extend: 'Ext.window.Window',
alias: 'widget.login',
autoShow: true,
height: 170,
width: 360,
layout: {
type: 'fit'
},
iconCls: 'key',
title: 'Login',
closeAction: 'hide',
closable: false,
items: [{
xtype: 'form',
frame: false,
bodyPadding: 15,
defaults: {
xtype: 'textfield',
anchor: '100%',
labelWidth: 60
},
items:[{
name: 'user',
fieldLabel: 'User'
},{
inputType: 'password',
name: 'password',
fieldLabel: 'Password'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'tbfill'
},{
xtype: 'button',
itemId: 'cancel',
iconCls: 'cancel',
text: 'Cancel'
},{
xtype: 'button',
itemId: 'submit',
iconCls: 'login',
text: 'Login'
}]
}]
}]
});
这是我的Application.js
Ext.define('BugTracker.Application', {
name: 'BugTracker',
requires: ['BugTracker.views.Login'],
extend: 'Ext.app.Application',
views: [
// TODO: add views here
],
controllers: [
// TODO: add controllers here
],
stores: [
// TODO: add stores here
],
init: function () {
Ext.apply(Ext.data.validations, {
customPassword: function (val, field) {
return /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,50})/.test(val);
},
customPasswordText: 'Not a valid password. Length should be between 6 and 65 chars. Password should contain one digit, one lovercase letter and one uppercase letter' +
'and one special symbol (@#$%)'
});
},
launch: function(){
Ext.widget('login');
}
});
你能帮我解决一下我做错了什么。 如果您需要任何附加信息,请告诉我,我会提供。 谢谢
答案 0 :(得分:1)
我发现我的问题在哪里。 问题出在Application.js中,我需要视图而不是视图!
Ext.define('BugTracker.Application', {
name: 'BugTracker',
requires: ['BugTracker.view.Login'],
extend: 'Ext.app.Application',
...