最近在试图使用 ExtJS 构建系统,没想到一开始就卡住了。非常郁闷,……
最近在试图使用 ExtJS 构建系统,没想到一开始就卡住了。
先是在一个php文件的末尾的两个空行使得 Ext.data.XmlReader 无法解析 xml 文件,后来好不容易写了一个 Grid ,但是从 Firefox 2.0 切到 IE 7 以后又发现了一个非常严重的问题:
所有Window 在IE里面都不能拖拽,并且所有的 Ext.MessageBox 都处于未激活的状态。
写了十几个Demo、费了整整两天也没看出来什么问题,无奈之下把 smarty 扔掉,用 php 硬编码了 HTML 语句,居然就正常了。可憎的是用文件比较器查看两个版本的HTML代码,居然是一模一样的,所有相关的文件均已转化为 UTF-8 编码,并去除了 BOM 和空行。
症状整理如下,希望经历过的同胞能帮忙解决一下。如图:
这个是正常的显示情况:
这个是不正常的显示情况(注意色彩和阴影):
这个是正常情况下的登录错误时的提示:
这个是非正常情况下的提示,根本无法点击到 MessageBox :
还有,非正常情况下,只要拖拽这个 Window ,就会变成这样:
使用的 JavaScript 代码:
正常版本使用的 php 代码(硬编码了输出 ):
实际产生的 HTML 代码(从 IE 查看源代码 得到,两个版本完全相同,就不贴两遍了):
PS : 最后验证还是BOM的问题。
先是在一个php文件的末尾的两个空行使得 Ext.data.XmlReader 无法解析 xml 文件,后来好不容易写了一个 Grid ,但是从 Firefox 2.0 切到 IE 7 以后又发现了一个非常严重的问题:
所有Window 在IE里面都不能拖拽,并且所有的 Ext.MessageBox 都处于未激活的状态。
写了十几个Demo、费了整整两天也没看出来什么问题,无奈之下把 smarty 扔掉,用 php 硬编码了 HTML 语句,居然就正常了。可憎的是用文件比较器查看两个版本的HTML代码,居然是一模一样的,所有相关的文件均已转化为 UTF-8 编码,并去除了 BOM 和空行。
症状整理如下,希望经历过的同胞能帮忙解决一下。如图:
这个是正常的显示情况:
这个是不正常的显示情况(注意色彩和阴影):
这个是正常情况下的登录错误时的提示:
这个是非正常情况下的提示,根本无法点击到 MessageBox :
还有,非正常情况下,只要拖拽这个 Window ,就会变成这样:
使用的 JavaScript 代码:
使用的JavaScript代码
1Ext.onReady(function(){
2 Ext.QuickTips.init();
3 Ext.form.Field.prototype.msgTarget = 'side';
4
5 var login = new Ext.FormPanel({
6 labelWidth:100,
7 url:'login.php',
8 frame:true,
9 width:230,
10 padding:200,
11 defaultType:'textfield',
12 bodyBorder:false,
13 border:false,
14 monitorValid:true,
15 waitMsgTarget:true,
16
17 items:[{
18 fieldLabel:_LANG['loginDialogUsernameLabel'],
19 name:'username',
20 allowBlank:false,
21 selectOnFocus:true,
22 maskRe:/[0-9a-zA-Z]/,
23 maxLength:20
24 },{
25 fieldLabel:_LANG['loginDialogUserPasswordLabel'],
26 name:'password',
27 inputType:'password',
28 allowBlank:false,
29 maskRe:/[0-9a-zA-Z]/,
30 maxLength:12,
31 minLength:6
32 }],
33
34 buttons:[{
35 text:_LANG['loginDialogSubmitButton'],
36 formBind: true,
37 type: 'submit',
38 handler:function(){
39 login.getForm().submit({
40 method:'POST',
41 waitTitle:_LANG['loginDialogWaitTitle'],
42 waitMsg:_LANG['loginDialogWaitMsg'],
43
44 success:function(){
45 var redirect = 'index.php';
46 window.location = redirect;
47 },
48
49 failure:function(form, action){
50 if(action.failureType == 'server'){
51 obj = Ext.util.JSON.decode(action.response.responseText);
52 Ext.MessageBox.alert(_LANG['loginFailTitle'], obj.errors.reason);
53 }
54 else{
55 Ext.MessageBox.alert(_LANG['loginFailTitle'], _LANG['loginFailUnreachable'] + action.response.responseText);
56 }
57 login.getForm().reset();
58 }
59 });
60 }
61 }]
62 });
63
64 var win = new Ext.Window({
65 layout:'fit',
66 el:'hello-win',
67 title:_LANG['loginDialogTitle'],
68 width:300,
69 height:150,
70 closable: false,
71 resizable: false,
72 plain: true,
73 items: [login]
74 });
75 win.show();
76});
1Ext.onReady(function(){
2 Ext.QuickTips.init();
3 Ext.form.Field.prototype.msgTarget = 'side';
4
5 var login = new Ext.FormPanel({
6 labelWidth:100,
7 url:'login.php',
8 frame:true,
9 width:230,
10 padding:200,
11 defaultType:'textfield',
12 bodyBorder:false,
13 border:false,
14 monitorValid:true,
15 waitMsgTarget:true,
16
17 items:[{
18 fieldLabel:_LANG['loginDialogUsernameLabel'],
19 name:'username',
20 allowBlank:false,
21 selectOnFocus:true,
22 maskRe:/[0-9a-zA-Z]/,
23 maxLength:20
24 },{
25 fieldLabel:_LANG['loginDialogUserPasswordLabel'],
26 name:'password',
27 inputType:'password',
28 allowBlank:false,
29 maskRe:/[0-9a-zA-Z]/,
30 maxLength:12,
31 minLength:6
32 }],
33
34 buttons:[{
35 text:_LANG['loginDialogSubmitButton'],
36 formBind: true,
37 type: 'submit',
38 handler:function(){
39 login.getForm().submit({
40 method:'POST',
41 waitTitle:_LANG['loginDialogWaitTitle'],
42 waitMsg:_LANG['loginDialogWaitMsg'],
43
44 success:function(){
45 var redirect = 'index.php';
46 window.location = redirect;
47 },
48
49 failure:function(form, action){
50 if(action.failureType == 'server'){
51 obj = Ext.util.JSON.decode(action.response.responseText);
52 Ext.MessageBox.alert(_LANG['loginFailTitle'], obj.errors.reason);
53 }
54 else{
55 Ext.MessageBox.alert(_LANG['loginFailTitle'], _LANG['loginFailUnreachable'] + action.response.responseText);
56 }
57 login.getForm().reset();
58 }
59 });
60 }
61 }]
62 });
63
64 var win = new Ext.Window({
65 layout:'fit',
66 el:'hello-win',
67 title:_LANG['loginDialogTitle'],
68 width:300,
69 height:150,
70 closable: false,
71 resizable: false,
72 plain: true,
73 items: [login]
74 });
75 win.show();
76});
正常版本使用的 php 代码(硬编码了输出 ):
使用的硬编码的 php 代码
1<?php
2require_once '../config.php';
3require_once '../include/security.inc.php';
4
5if($_SERVER['REQUEST_METHOD'] == 'POST'){
6 $username = securePOST('username');
7 $password = securePOST('password');
8 $password = md5($password);
9 $sql = "SELECT * FROM `{$_DATABASE_TABLE_PREFIX_}admin` WHERE `user_name` = '$username' AND `password` = '$password' LIMIT 1";
10 $db->query($sql);
11
12 if($db->result != 0){
13 $sql = "UPDATE `{$_DATABASE_TABLE_PREFIX_}admin` SET `last_login_ip` = '{$_SERVER['REMOTE_ADDR']}', `login_fail_time` = '0'";
14
15 session_cache_expire(15);
16 session_start();
17 $_SESSION['adminName'] = $db->result['user_name'];
18 $_SESSION['role'] = $db->result['role'];
19 echo "{success:true}";
20 }
21 else{
22 $sql = "UPDATE `{$_DATABASE_TABLE_PREFIX_}admin` SET `last_login_ip` = '{$_SERVER['REMOTE_ADDR']}', `login_fail_time` = `login_fail_time` + 1 WHERE `user_name` = '$username' LIMIT 1";
23 $db->query($sql);
24 echo "{success:false, errors:{reason:'". $_LANG['Message']['ErrorLogin'] . "'}}";
25 }
26}
27else{
28?>
29<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
30<html xmlns="http://www.w3.org/1999/xhtml">
31 <head>
32 <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
33 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
34 <meta http-equiv="Content-Language" content="UTF-8" />
35 <link href="../style/admin.css" rel="stylesheet" type="text/css" />
36 <link href="../style/leaf.css" rel="stylesheet" type="text/css" />
37 <script type="text/javascript" src="../include/ExtJS/ext-base.js"></script>
38 <script type="text/javascript" src="../include/ExtJS/ext.js"></script>
39 <script type="text/javascript" src="../include/ExtJS/ext-lang-zh_CN.js"></script>
40 <script type="text/javascript" src="../languages/ZH_CN_UTF-8/lang.js" ></script>
41 <script type="text/javascript" src="../include/admin/login.js"></script>
42 <link href="../include/ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
43 <title>欢迎使用 CMSmarty</title>
44 </head>
45 <body>
46 <div class="changeLanguageDiv">
47 <span id="ZH_CN_UTF-8"><a href="../changeLang.php?language=ZH_CN_UTF-8">简体中文</a></span>
48 <span id="EN_UTF-8"><a href="../changeLang.php?language=EN_UTF-8">English</a></span>
49 </div>
50 <div id="hello-win" class="x-hidden">
51 </div>
52 </body>
53</html>
54<?php
55}
56?>
1<?php
2require_once '../config.php';
3require_once '../include/security.inc.php';
4
5if($_SERVER['REQUEST_METHOD'] == 'POST'){
6 $username = securePOST('username');
7 $password = securePOST('password');
8 $password = md5($password);
9 $sql = "SELECT * FROM `{$_DATABASE_TABLE_PREFIX_}admin` WHERE `user_name` = '$username' AND `password` = '$password' LIMIT 1";
10 $db->query($sql);
11
12 if($db->result != 0){
13 $sql = "UPDATE `{$_DATABASE_TABLE_PREFIX_}admin` SET `last_login_ip` = '{$_SERVER['REMOTE_ADDR']}', `login_fail_time` = '0'";
14
15 session_cache_expire(15);
16 session_start();
17 $_SESSION['adminName'] = $db->result['user_name'];
18 $_SESSION['role'] = $db->result['role'];
19 echo "{success:true}";
20 }
21 else{
22 $sql = "UPDATE `{$_DATABASE_TABLE_PREFIX_}admin` SET `last_login_ip` = '{$_SERVER['REMOTE_ADDR']}', `login_fail_time` = `login_fail_time` + 1 WHERE `user_name` = '$username' LIMIT 1";
23 $db->query($sql);
24 echo "{success:false, errors:{reason:'". $_LANG['Message']['ErrorLogin'] . "'}}";
25 }
26}
27else{
28?>
29<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
30<html xmlns="http://www.w3.org/1999/xhtml">
31 <head>
32 <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
33 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
34 <meta http-equiv="Content-Language" content="UTF-8" />
35 <link href="../style/admin.css" rel="stylesheet" type="text/css" />
36 <link href="../style/leaf.css" rel="stylesheet" type="text/css" />
37 <script type="text/javascript" src="../include/ExtJS/ext-base.js"></script>
38 <script type="text/javascript" src="../include/ExtJS/ext.js"></script>
39 <script type="text/javascript" src="../include/ExtJS/ext-lang-zh_CN.js"></script>
40 <script type="text/javascript" src="../languages/ZH_CN_UTF-8/lang.js" ></script>
41 <script type="text/javascript" src="../include/admin/login.js"></script>
42 <link href="../include/ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
43 <title>欢迎使用 CMSmarty</title>
44 </head>
45 <body>
46 <div class="changeLanguageDiv">
47 <span id="ZH_CN_UTF-8"><a href="../changeLang.php?language=ZH_CN_UTF-8">简体中文</a></span>
48 <span id="EN_UTF-8"><a href="../changeLang.php?language=EN_UTF-8">English</a></span>
49 </div>
50 <div id="hello-win" class="x-hidden">
51 </div>
52 </body>
53</html>
54<?php
55}
56?>
实际产生的 HTML 代码(从 IE 查看源代码 得到,两个版本完全相同,就不贴两遍了):
实际产生的 HTML 代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
5 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
6 <meta http-equiv="Content-Language" content="UTF-8" />
7 <link href="../style/admin.css" rel="stylesheet" type="text/css" />
8 <link href="../style/leaf.css" rel="stylesheet" type="text/css" />
9 <script type="text/javascript" src="../include/ExtJS/ext-base.js"></script>
10 <script type="text/javascript" src="../include/ExtJS/ext.js"></script>
11 <script type="text/javascript" src="../include/ExtJS/ext-lang-zh_CN.js"></script>
12 <script type="text/javascript" src="../languages/ZH_CN_UTF-8/lang.js" ></script>
13 <script type="text/javascript" src="../include/admin/login.js"></script>
14 <link href="../include/ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
15 <title>欢迎使用 CMSmarty</title>
16 </head>
17 <body>
18 <div class="changeLanguageDiv">
19 <span id="ZH_CN_UTF-8"><a href="../changeLang.php?language=ZH_CN_UTF-8">简体中文</a></span>
20 <span id="EN_UTF-8"><a href="../changeLang.php?language=EN_UTF-8">English</a></span>
21 </div>
22 <div id="hello-win" class="x-hidden">
23 </div>
24 </body>
25</html>
26
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
5 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
6 <meta http-equiv="Content-Language" content="UTF-8" />
7 <link href="../style/admin.css" rel="stylesheet" type="text/css" />
8 <link href="../style/leaf.css" rel="stylesheet" type="text/css" />
9 <script type="text/javascript" src="../include/ExtJS/ext-base.js"></script>
10 <script type="text/javascript" src="../include/ExtJS/ext.js"></script>
11 <script type="text/javascript" src="../include/ExtJS/ext-lang-zh_CN.js"></script>
12 <script type="text/javascript" src="../languages/ZH_CN_UTF-8/lang.js" ></script>
13 <script type="text/javascript" src="../include/admin/login.js"></script>
14 <link href="../include/ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
15 <title>欢迎使用 CMSmarty</title>
16 </head>
17 <body>
18 <div class="changeLanguageDiv">
19 <span id="ZH_CN_UTF-8"><a href="../changeLang.php?language=ZH_CN_UTF-8">简体中文</a></span>
20 <span id="EN_UTF-8"><a href="../changeLang.php?language=EN_UTF-8">English</a></span>
21 </div>
22 <div id="hello-win" class="x-hidden">
23 </div>
24 </body>
25</html>
26
PS : 最后验证还是BOM的问题。