|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102 |
<!DOCTYPE html><head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/> <title></title> <!-- <script src="lib/extjs/vswd-ext_2.2.js"
type="text/javascript"></script>--> <!--这个一定要加在第一行！--> <link href="lib/extjs/resources/css/ext-all.css"
rel="stylesheet"
type="text/css"
/> <script src="lib/extjs/bootstrap.js"
type="text/javascript"></script> <script src="lib/extjs/ext-all-debug.js"
type="text/javascript"></script> <script src="lib/extjs/locale/ext-lang-zh_CN.js"
type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { /* *简单的树节点数据 */ var
nodes = { text: ‘日月神教‘, expanded: true, leaf: false, children: [ { id: ‘boss‘, text: ‘任我行‘, leaf: true }, { id: ‘gg‘, text: ‘令狐冲‘, leaf: true }, { id: ‘mm‘, text: ‘任盈盈‘, leaf: true } ] }; /** *这里是关键 */ var
loadNodeInfo = function (node, e) { //Ext.Msg.show("点击"); var
id = node.attributes.id; if
(!id) { Ext.Msg.alert(‘提示信息‘, ‘节点必须设置唯一的id‘); return; } var
comp = rightTab.getComponent(id); if
(!comp) { comp = new
Ext.Panel({ id: id, title: node.attributes.text || "", html: node.attributes.text }); rightTab.add(comp); } rightTab.setActiveTab(comp); rightTab.scrollToTab(comp); //??? } /** *树面板 **/ var
leftTree = new
Ext.tree.TreePanel({ id: ‘leftTree‘, title: ‘左侧树‘, region: ‘west‘, root: nodes, width: 200, autoScroll: true, split: true, //??? rootVisible: true, collapsible: true, listeners: { ‘click‘: loadNodeInfo} }); /*** *右侧的tab */ var
rightTab = new
Ext.TabPanel({ id: ‘rightTab‘, region:‘center‘ }); /**** *viewPort */ var
vp = new
Ext.Viewport({ layout: ‘border‘, items:[leftTree,rightTab] }); }); </script></head><body></body></html> |
原文：http://www.cnblogs.com/denghuachengle/p/3614567.html