Extjs 4.07 MVC做的登录页面，请看看哪里不对
DX们新年快乐！
我想要的效果是：窗体中间显示600X478的登录背景图（login.jpg），用CSS定位；在登录背景图右下角的空白处显示登录Form（mainview），用CSS定位并通过Extjs4 mvc实现。
结果只显示了login.jpg，mainview没有显示。FF中调试信息如下：
[22:54:07.209] GET http://127.0.0.1/app/controller/LoginController.js?_dc=1326812047191 [HTTP/1.1 404 Not Found 1ms]
目录结构：
WebRoot/ext-4.0.7-gpl (Extjs 4.07文件夹)
WebRoot/resources/image/login.jpg （登录背景图）
WebRoot/login/app.js
WebRoot/login/app/controller/LoginController.js
WebRoot/login/app/view/Main.js
WebRoot/index.html （入口）
源程序如下：
1、index.html
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0.7-gpl/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-4.0.7-gpl/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="login/app.js"></script>
<style type="text/css">
#loginPanel{
background: url(resources/image/login.jpg);
position:absolute;
display:inline;
top:50%; left:50%; width:600px; height:478px;
margin-left:-300px; margin-top:-239px;
}
#loginForm{
position:relative;
float:right;
overflow:hidden;
top: 12em;
left: -20em;
width: 21em;
height: 6em
}
</style>
</head>
<body bgcolor="#666688">
<div id='loginPanel'>
<div id="loginFrom">
</div>
</div>
</body>
</html>
2、app.js
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'LM',
appFolder: 'app',
controllers: [
'LoginController'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
defaults: {
border:false
},
items: [{
xtype: 'mainview'
}]
});
}
});
3、main.js
Ext.define('LM.view.Main', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainview',
layout : "border",
defaults: {
border:false
},
AutoWidth : true,
AutoHeight: true,
plain: true,
renderTo:'#loginForm',
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'form',
plain: true,
border: 0,
bodyPadding: 5,
items: [
{
itemId: 'userName',
xtype: 'textfield',
fieldLabel: '用户名：',
name: 'userName',
allowBlank: false,
anchor: '100%',
selectOnFocus: true
},
{
xtype: 'textfield',
fieldLabel: '登录密码：',
name: 'password',
allowBlank: false,
inputType: 'password',
anchor: '100%',
selectOnFocus: true
}
],
buttons:[
{
text: "登录",
type: "submit",
action: "login",
formBind: true,
}
]
}]
});
this.callParent(arguments);
},
defaultFocus: 'userName'
});
initComponent: function() {
this.callParent(arguments);
}
4、LoginController.js
Ext.define('LM.controller.LoginController', {
extend: 'Ext.app.Controller',
views: [
'LM.view.Main'
],
init: function() {
this.control({
'mainview': {
render: this.onPanelRendered
},
'mainview button[action=login]': {
click: this.login
},
'mainview textfield': {
specialkey: this.keyenter
}
});
},
refs: [
{
ref: 'mainview',
selector: 'mainview'
}
],
views: ['mainview'],
onPanelRendered: function(panel) {
},
login: function(button) {
},
keyenter: function() {
},
logout: function(button) {
}
});
[解决办法]
试试在 LM.view.Main 中添加这个属性 region : "center",
