1.下载extjs的安装包,里面没有.msi文件,看好多的安装方法说都有这个.msi文件,但是我在官方下载的解压缩后没有,以为不能用。说明一下,我用的开发工具是visualstudio 2008,其实根本不用安装,直接解压缩后放到创建的网站项目的目录下,然后再也页面添加extjs的引用就行啦。
2.extjs的引用的错误。<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link rel="Stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />注意这里的顺序,一定要把ext-base放在ext-all的前面,否则虽然不报错误,但是你的页面预期的效果是不会有的。
3. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"/>这样的错误也是我学习过程中经历的。
4.menu菜单的使用过程中的错误。Menu菜单的demo中,出现页面没有报错,但是已有一条蓝线,页面什么也没有。后来才发现,原来是render函数的问题,源码:
代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="9-1.aspx.cs" Inherits="_9_1" %>
2
3
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7
8
9 <html xmlns="http://www.w3.org/1999/xhtml">
10
11 <head runat="server">
12
13 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
14
15 <script type="text/javascript" src="extjs/ext-all.js"></script>
16
17 <link rel="Stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
18
19 <title> 工具栏菜单demo</title>
20
21 <script type="text/javascript">
22
23 Ext.onReady(function(){
24
25 var menu2=new Ext.menu.Menu({
26
27 items:[
28
29 {text:"今天"},
30
31 {text:"昨天"},
32
33 {text:"一周"},
34
35 {text:"一月"}
36
37 ]
38
39 });
40
41
42
43 var menu1 = new Ext.menu.Menu({
44
45 items:[
46
47 {text:"新建"},
48
49 {text:"打开"},
50
51 {text:"保存"},
52
53 {text:"另存"},
54
55 "-",
56
57 {text:"历史",menu:menu2},
58
59 "-",
60
61 {text:"关闭"}
62
63 ]
64
65 });
66
67
68
69 var tb = new Ext.Toolbar();
70
71 tb.render("hello");
72
73
74
75
76
77
78
79 tb.add({
80
81 text:"文件",
82
83 menu:menu1
84
85 }
86
87 );
88
89 tb.add({
90
91 text:"时间",
92
93 menu:menu2});
94
95 });
96
97 </script>
98
99 </head>
100
101 <body>
102
103 <form id="form1" runat="server">
104
105 <div id="hello">
106
107 </div>
108
109 </form>
110
111 </body>
112
113 </html>
114
115
2
3
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7
8
9 <html xmlns="http://www.w3.org/1999/xhtml">
10
11 <head runat="server">
12
13 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
14
15 <script type="text/javascript" src="extjs/ext-all.js"></script>
16
17 <link rel="Stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
18
19 <title> 工具栏菜单demo</title>
20
21 <script type="text/javascript">
22
23 Ext.onReady(function(){
24
25 var menu2=new Ext.menu.Menu({
26
27 items:[
28
29 {text:"今天"},
30
31 {text:"昨天"},
32
33 {text:"一周"},
34
35 {text:"一月"}
36
37 ]
38
39 });
40
41
42
43 var menu1 = new Ext.menu.Menu({
44
45 items:[
46
47 {text:"新建"},
48
49 {text:"打开"},
50
51 {text:"保存"},
52
53 {text:"另存"},
54
55 "-",
56
57 {text:"历史",menu:menu2},
58
59 "-",
60
61 {text:"关闭"}
62
63 ]
64
65 });
66
67
68
69 var tb = new Ext.Toolbar();
70
71 tb.render("hello");
72
73
74
75
76
77
78
79 tb.add({
80
81 text:"文件",
82
83 menu:menu1
84
85 }
86
87 );
88
89 tb.add({
90
91 text:"时间",
92
93 menu:menu2});
94
95 });
96
97 </script>
98
99 </head>
100
101 <body>
102
103 <form id="form1" runat="server">
104
105 <div id="hello">
106
107 </div>
108
109 </form>
110
111 </body>
112
113 </html>
114
115
更改源码中tb.render函数的位置为</script>前面。这样预期的级联菜单效果就出来啦。
这是我在extjs学习中犯的一些低级错误,希望能够对和我一样刚开始接触extjs的有点启发。