1 var load = function(){
2 /**
3 * 书籍资料目录
4 */
5 var bookIT = new Ext.tree.TreeNode({
6 text:"IT",
7 leaf:true,
8 listeners:{
9 click:function(){
10 Ext.MessageBox.alert("提示","您点击了"+bookIT.text);
11 }
12 }
13 });
14 var bookNovel = new Ext.tree.TreeNode({
15 text:"小说",
16 leaf:true,
17 listeners:{
18 click:function(){
19 Ext.MessageBox.alert("提示","您点击了"+bookNovel.text);
20 }
21 }
22 });
23 var bookFinance = new Ext.tree.TreeNode({
24 text:"金融",
25 leaf:true,
26 listeners:{
27 click:function(){
28 Ext.MessageBox.alert("提示","您点击了"+bookFinance.text);
29 }
30 }
31 });
32 var bookRoot = new Ext.tree.TreeNode({
33 id:"root",
34 text:"树的根"
35 });
36 bookRoot.appendChild(bookIT);
37 bookRoot.appendChild(bookNovel);
38 bookRoot.appendChild(bookFinance);
39 var bookTree = new Ext.tree.TreePanel({
40 id:'book_tree',
41 title:'书籍资料',
42 root:bookRoot,
43 rootVisible:false,
44 xtype:'treepanel',
45 enableDD : true, //允许子节点拖动
46 bodyStyle:'background-color:#CCCCFF' //设置面板颜色
47 //titleCollapse:true //True表示为允许单击头部区域任何一个位置都可收缩面板(无效果)
48 //loader: new Ext.tree.TreeLoader({dataUrl:'treedata.js'}),
49 //width:200
50 });
51 var houseCooking = new Ext.tree.TreeNode({
52 text:"厨具",
53 leaf:true,
54 listeners:{
55 click:function(){
56 Ext.MessageBox.alert("提示","您点击了"+houseCooking.text);
57 }
58 }
59 });
60 /**
61 * 家居用品目录
62 */
63 var houseTable = new Ext.tree.TreeNode({
64 text:"桌椅",
65 leaf:true,
66 listeners:{
67 click:function(){
68 Ext.MessageBox.alert("提示","您点击了"+houseTable.text);
69 }
70 }
71 });
72 var houseRoot = new Ext.tree.TreeNode({
73 id:"root",
74 text:"树的根"
75 });
76 houseRoot.appendChild(houseCooking);
77 houseRoot.appendChild(houseTable);
78 var houseTree = new Ext.tree.TreePanel({
79 id:'house_tree',
80 title:'家居用品',
81 root:houseRoot,
82 rootVisible:false,
83 xtype:'treepanel',
84 enableDD:true,
85 bodyStyle:'background-color:#CCCCFF' //设置面板颜色
86 //width:200,
87 });
88 /**
89 * 电子目录
90 */
91 var electronComputer = new Ext.tree.TreeNode({
92 text:"电脑",
93 leaf:true,
94 listeners:{
95 click:function(){
96 Ext.MessageBox.alert("提示","您点击了"+electronComputer.text);
97 }
98 }
99 });
100 var electronRoot = new Ext.tree.TreeNode({
101 id:"root",
102 text:"树的根"
103 });
104 electronRoot.appendChild(electronComputer);
105 var electronTree = new Ext.tree.TreePanel({
106 id:'electron_tree',
107 title:'电子',
108 root:electronRoot,
109 xtype:'treepanel',
110 rootVisible:false,
111 enableDD:true,
112 bodyStyle:'background-color:#CCCCFF' //设置面板颜色
113 //width:200
114 });
115 /**
116 * 服装目录
117 */
118 var clothesMan = new Ext.tree.TreeNode({
119 text:"男装",
120 leaf:true,
121 listeners:{
122 click:function(){
123 Ext.MessageBox.alert("提示","您点击了"+clothesMan.text);
124 }
125 }
126 });
127 var clothesGirl = new Ext.tree.TreeNode({
128 text:"女装",
129 leaf:true,
130 listeners:{
131 click:function(){
132 Ext.MessageBox.alert("提示","您点击了"+clothesGirl.text);
133 }
134 }
135 });
136 var clothesRoot = new Ext.tree.TreeNode({
137 id:"root",
138 text:"树的根"
139 });
140 clothesRoot.appendChild(clothesMan);
141 clothesRoot.appendChild(clothesGirl);
142 var clothesTree = new Ext.tree.TreePanel({
143 id:'clothes_tree',
144 root:clothesRoot,
145 rootVisible:false,
146 xtype:'treepanel',
147 enableDD:true,
148 title:'服装',
149 bodyStyle:'background-color:#CCCCFF' //设置面板颜色
150 //width:200
151 });
152
153
154 new Ext.Viewport({
155 layout: 'border',
156 items: [{
157 region: 'north',
158 //renderTo:'main_top',
159 //applyTo:'main_top',
160 contentEl:'main_top',
161 height:100,
162 //xtype:'tabpanel',
163 //title:"首页"
164 // autoHeight: true,//自动设置高度
165 border: false,
166 margins: '0 0 5 0'
167 }, {
168 region: 'west',
169 collapsible: true,//设置前面的展开、收拢效果的加减号
170 title: '分类',
171 //xtype: 'treepanel',//不能写这个，否则页面会乱
172 width: 200,
173 minSize: 100,
174 maxSize: 400,//设置左侧面板拉伸的最大宽度与最小宽度
175 collapsible: true,//允许展开和收缩
176 autoScroll: true,
177 split: true,//让用户可以动态地改变区域的大小
178 items: [bookTree,houseTree,electronTree,clothesTree],
179 //下面是ext漂亮的折叠功能
180 layout: 'accordion',
181 layoutConfig: {
182 titleCollapse: true, //默认为true，表示单击标题就可以收缩子面板，如果设置为false，则必须单击标题右边的图标来收缩面板。
183 collapseFirst : false, //当显示title bar时，是否总把收缩、展开按钮放在所有其他按钮的前面。默认值为true。
184 animate: true, //是否使用动画效果。
185 hideCollapseTool : false, //当collapsible=true且hideCollapseTool=true时，则隐藏控制收缩、伸展的那个按钮，为false时就显示它，默认值为false。
186 activeOnTop: false //默认是false，展开和收缩后子面板的位置不变。如果设置为true，就会随着展开和收缩变换位置。展开的面板总是在最顶层
187 }
188 }, {
189 region: 'center',
190 xtype: 'tabpanel',
191 contentEl:'main_right',
192 title:"物品"
193 }]
194 });
195 }//end load
196 Ext.onReady(load);
