Extjs 4.07 MVC干的登录页面，请看看哪里不对
日期：2014-05-16 浏览次数：20819 次
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%',
selectOnF
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%',
selectOnF
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
