您的位置：首页 > Web前端 > JavaScript

ExtJS4.X TreeStore,TreePanel 动态加载菜单和Tab页

2013-10-30 22:49 447 查看
前面一篇文章实现了业务系统的整体布局(《ExtJS4.X Boder 布局实现系统页面框架》)，接下来我们来实现一个经常使用的菜单，前台不用说当然是使用Ext，后台代码使用C#，最终实现了一个动态加载菜单并且点击菜单后实现Tab页的加载。

首先说下treestore的数据结构，treestore就是treepanel的本地构建的数据源

01
var
store
= Ext.create(
'Ext.data.TreeStore'
,
{
02
root:
{
03
expanded:
true
,
04
children:
[
05
{
text:
"会员管理"
,
leaf:
true
 
},
06
{
text:
"系统管理"
,
expanded:
true
,
children: [
07
{
text:
"权限管理"
,
leaf:
true
 
},
08
{
text:
"管理员管理"
,
leaf:
true
}
09
]
},
10
{
text:
"业务管理"
,
leaf:
true
 
}
11
]
12
}
13
});
看完上面的treestore，我们大概知道了treestore接受的json有如下一些东西：

1
{id:
'01'
,text:
'a01'
,children:[
2
{id:
'01-01'
,text:
'a01-01'
,leaf:
true
},
3
{id:
'01-02'
,text:
'a01-02'
,children:[
4
{id:
'01-02-01'
,text:
'b01-02-01'
,leaf:
true
},
5
{id:
'01-02-02'
,text:
'a01-02-02'
,leaf:
true
}
6
]},
7
{id:
'01-03'
,text:
'b01-03'
,leaf:
true
}
8
]},
9
{id:
'02'
,text:
'b02'
,leaf:
true
}
这样我们可以在后台构建如下一个类来构建Json：

01
[Serializable]
02
public
 
class
 
Menu
03
{
04
public
 
long
 
id
{
get
;
set
;
}
05
06
public
 
string
 
text
{
get
;
set
;
}
07
08
public
 
string
 
cls
{
get
;
set
;
}
09
public
 
string
 
url
{
get
;
set
;
}
10
11
public
 
bool
 
expanded
{
get
;
set
;
}
12
13
public
 
List<Menu>
children =
new
 
List<Menu>();
14
15
public
 
bool
 
leaf
{
get
;
set
;
}
16
}
回到前台：

01
//Ajax实例
02
   
var
 
store
= Ext.create(
'Ext.data.TreeStore'
,
{
03
   
checked:
false
,
04
root:
{
05
expanded:
true
06
}
07
,
08
proxy:
{
09
type:
'ajax'
,
10
url:
'../ajax.ashx'
11
}
12
});
13
14
var
 
tree
= Ext.create(
'Ext.tree.Panel'
,
{
15
title:
name,
16
width:
200,
17
height:
150,
18
store:
store,
19
rootVisible:
false
20
});
21
tree.on(
'itemclick'
,
function
 
(view,
node,item,index,e) { 
//当我点击某个节点的时候会出发这个事件
22
addtab(node.raw.id,
node.raw.url,node.raw.text);
//调用上面对应的方法，注意url属性是自定义的，用于打开tab页。
23
});
24
pnWest.add(tree);
25
26
//打开tab页
27
function
 
addtab(id,
link,name) {
//这里我定义一个方法，是在节点单击的时候触发这个方法，
28
var
 
tabId
=
"tab-"
 
+
id;
29
var
 
tabTitle
= name;
30
var
 
tabLink
= link;
31
currentPage
= tabId;
32
var
 
tab
= pnCenter.getComponent(tabId);
33
var
 
subMainId
=
'tab-'
 
+
id +
'-main'
;
34
35
if
 
(!tab)
{
//判断Tab中是否存在这个页面，如果不存在
36
tab
= pnCenter.add(
new
 
Ext.Panel({
37
id:
tabId,
38
title:
tabTitle,
39
autoScroll:
true
,
40
iconCls:
'tabIconCss'
,
41
title:
name,
42
layout:
'fit'
,
//layout一定要是fit，不然显示grid会有问题。
43
border:
false
,
44
tools:
[{id:
'refresh'
}],
45
closable:
true
,
46
fitToFrame:
true
,
47
autoLoad:
{
48
url:
link,
49
scripts:
true
,
50
discardUrl:
true
,
51
//renderer
: 'data',
52
text:
"页面加载中,请稍候……"
53
}
54
}));
55
pnCenter.setActiveTab(tab);
//将焦点指向我点击节点打开的页面
56
}
else
 
{
//如果tab中存在，那么就直接将节点指向这个页面
57
pnCenter.setActiveTab(tab);
58
}
59
}
后台根据C#定义的Menu类拼装json后就可以了，结合上面提到的那篇文章，整个一个菜单树和在Tab页中打开新网页已经实现。

文章发布在：http://coderman.cn
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航