1
//创建Tree
2Ext.onReady
3(
4 function()
5
...{
6
//实例化布局对象
7 var view = new Ext.Viewport
8 (
9
...{
10 layout:'border', //声明为border布局
11 items:
12 [
13 //头部
14 new Ext.BoxComponent
15 (
16 ...{
17 region:'north',
18 el: 'north', //填充指定id的区域内容到north区域
19 height:65
20
}
21 ),
22 //底部
23 new Ext.BoxComponent
24 (
25 ...{
26 region:'south',
27 el: 'south', //填充指定id的区域内容到south区域
28 height:20
29 }
30 ),
31 //中间
32 ...{
33 region:'center',
34 el:'center',
35 height:405,
36 width:613,
37 title:'酒店开房详细信息',
38 html:"<div id='grid'></div>"
39 },
40 //左边
41 ...{
42 region:'west',
43 split:true,
44 margins:'0 0 0 0',
45 layout:'accordion',
46 width:190,
47 el:'west', //填充指定id的区域内容到west区域
48 collapsible:true,
49 title:'酒店管理菜单',
50 layoutConfig:
51 ...{
52 animate:true
53 },
54 items:
55 [
56 ...{
57 title:'日常酒店管理',
58 border:false,
59 html:'<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>'
60 },
61 ...{
62 title:'信息中心',
63 border:false,
64 html:'<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
65 }
66 ]
67 },
68 //右边
69 ...{
70 region:'east',
71 width:160,
72 collapsible:true,
73 title:'今日房价',
74 html:"<div id='moneyGrid'></div>"
75 }
76 ]
77 }
78 );
79 //树形菜单
80 var root = new Ext.tree.TreeNode
81 (
82 ...{
83 id:'root',
84 text:'树的根'
85 }
86 );
87
88 //第一个根节点
89 var a = new Ext.tree.TreeNode
90 (
91 ...{
92 id:'a',
93 icon:'/HotelUI/Images/user3.gif',//图标文件
94 text:'普通日常管理',
95 expanded:true //展开显示
96 }
97 );
98
99 //创建第一个根节点的第一个子节点
100 var a1 = new Ext.tree.TreeNode
101 (
102 ...{
103 id:'a1',
104 icon:'/HotelUI/Images/write.gif',//图标文件
105 text:'新开房间',
106 listeners:
107 ...{
108 'click':function()
109 ...{
110 OpenRoom(); //调用新开房间方法
111 }
112 }
113 }
114 );
115
116
117 //创建第一个根节点的第三个子节点
118 var a2 = new Ext.tree.TreeNode
119 (
120 ...{
121 id:'a2',
122 icon:'/HotelUI/Images/select.gif',//图标文件
123 text:'查询账目信息',
124 listeners:
125 ...{
126 'click':function()
127 ...{
128 SerachMoney(); //调用查账方法
129 }
130 }
131 }
132 );
133
134 //添加子节点到第一个根节点
135 a.appendChild(a1);
136 a.appendChild(a2);
137
138 //第二个根节点
139 var b = new Ext.tree.TreeNode
140 (
141 ...{
142 id:'b',
143 icon:'/HotelUI/Images/user3.gif',//图标文件
144 text:'高级日常管理',
145 expanded:true //展开显示
146 }
147 );
148
149 //第三个根节点
150 var c = new Ext.tree.TreeNode
151 (
152 ...{
153 id:'c',
154 icon:'/HotelUI/Images/user.gif',//图标文件
155 text:'员工管理',
156 expanded:true //展开显示
157 }
158 );
159
160 //第三个根节点的第一个子节点
161 var c1 = new Ext.tree.TreeNode
162 (
163 ...{
164 id:'c1',
165 icon:'/HotelUI/Images/write.gif',//图标文件
166 text:'添加普通员工',
167 listeners:
168 ...{
169 'click':function(node,event)
170 ...{
171 AddUser();
172 }
173 }
174 }
175 );
176
177 //第三个根节点的第二个子节点
178 var c2 = new Ext.tree.TreeNode
179 (
180 ...{
181 id:'c2',
182 icon:'/HotelUI/Images/write2.gif',//图标文件
183 text:'删除员工',
184 listeners:
185 ...{
186 'click':function(node,event)
187 ...{
188 DelUser();
189 }
190 }
191 }
192 );
193
194 //添加子节点到第三个根节点
195 c.appendChild(c1);
196 c.appendChild(c2);
197
198 //第四个根节点
199 var d = new Ext.tree.TreeNode
200 (
201 ...{
202 id:'d',
203 icon:'/HotelUI/Images/user.gif',//图标文件
204 text:'房间类型管理',
205 expanded:true //展开显示
206 }
207 );
208
209 //第四个根节点的第一个子节点
210 var d1 = new Ext.tree.TreeNode
211 (
212 ...{
213 id:'d1',
214 icon:'/HotelUI/Images/write.gif',//图标文件
215 text:'添加房间类型',
216 listeners:
217 ...{
218 'click':function(node,event)
219 ...{
220 AddRoomType();
221 }
222 }
223 }
224 );
225
226 //第四个根节点的第二个子节点
227 var d2 = new Ext.tree.TreeNode
228 (
229 ...{
230 id:'d2',
231 icon:'/HotelUI/Images/write2.gif',//图标文件
232 text:'删除房间类型',
233 listeners:
234 ...{
235 'click':function(node,event)
236 ...{
237 DelRoomType();
238 }
239 }
240 }
241 );
242
243 //第四个根节点的第三个子节点
244 var d3 = new Ext.tree.TreeNode
245 (
246 ...{
247 id:'d3',
248 icon:'/HotelUI/Images/select.gif',//图标文件
249 text:'查看房间类型',
250 listeners:
251 ...{
252 'click':function(node,event)
253 ...{
254 SerachRoomType();
255 }
256 }
257 }
258 );
259
260
261 //添加子节点到第四个根节点
262 d.appendChild(d1);
263 d.appendChild(d2);
264 d.appendChild(d3);
265
266 //第五个根节点
267 var e = new Ext.tree.TreeNode
268 (
269 ...{
270 id:'e',
271 icon:'/HotelUI/Images/user.gif',//图标文件
272 text:'客房管理',
273 expanded:true //展开显示
274 }
275 );
276
277 //第五个根节点的第一个子节点
278 var e1 = new Ext.tree.TreeNode
279 (
280 ...{
281 id:'e1',
282 icon:'/HotelUI/Images/write.gif',//图标文件
283 text:'添加酒店客房',
284 listeners:
285 ...{
286 'click':function(node,event)
287 ...{
288 AddRoom();
289 }
290 }
291 }
292 );
293
294 //第五个根节点的第二个子节点
295 var e2 = new Ext.tree.TreeNode
296 (
297 ...{
298 id:'e2',
299 icon:'/HotelUI/Images/write2.gif',//图标文件
300 text:'删除酒店客房',
301 listeners:
302 ...{
303 'click':function(node,event)
304 ...{
305 DelRoom();
306 }
307 }
308 }
309 );
310
311 //第五个根节点的第三个子节点
312 var e3 = new Ext.tree.TreeNode
313 (
314 ...{
315 id:'e3',
316 icon:'/HotelUI/Images/select.gif',//图标文件
317 text:'查看酒店客房',
318 listeners:
319 ...{
320 'click':function(node,event)
321
MyHotelManager/HotelUI/Js/Main.js，打开代码结构图