java如何实现extjs组装树形菜单
展开全部
var tabs = Ext.create('Ext.tab.Panel', {
region : 'center'
});
var store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : '应用程序管理',
expanded : true,
children : [{
text : '应用程序管理',
id : 'appManage',
leaf : true
}]
}, {
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true
}, {
text : ' 页面按钮配置',
id : 'buttonManage',
leaf : true
}]
}, {
text : '用户管理',
expanded : true,
children : [{
text : '用户管理',
id : 'userManage',
leaf : true
}, {
text : '权限管理',
id : 'rowManage',
leaf : true
}]
}, {
text : '任务管理',
expanded : true,
children : [{
text : '任务管理',
id : 'taskMange',
leaf : true
}]
}]
}
});
var treePanelApp = Ext.create('Ext.tree.Panel', {
id : 'tree-panel',
title : '菜单',
region : 'west',
collapsible : true,
split : true,
height : 360,
width : 170,
rootVisible : false,
store : store
});
var tabMap = new Ext.util.HashMap();
treePanelApp.on('itemclick', function(view, record, item, index, e,
eOpts) {
if (record.get('leaf')) {
var id = record.getId();
var text = record.get('text');
var hasTab = tabMap.get(id);
console.log(hasTab);
if (!hasTab) {
var t;
if (id == 'appManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'configManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'buttonManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'userManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'rowManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'taskMange') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
}
t.on('close', function(tab, eps) {
tabMap.removeAtKey(tab.getId());
})
tabMap.add(id, t);
}
tabs.setActiveTab(id);
}
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [treePanelApp, tabs]
});
});页面效果：
如果是固定的菜单，就用不着java 后台了。
要是动态的菜单的话就返回一个 父子类型的 json 数据即可
[
{
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true }]
}
]
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
var tabs = Ext.create('Ext.tab.Panel', {
region : 'center'
});
var store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : '应用程序管理',
expanded : true,
children : [{
text : '应用程序管理',
id : 'appManage',
leaf : true
}]
}, {
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true
}, {
text : ' 页面按钮配置',
id : 'buttonManage',
leaf : true
}]
}, {
text : '用户管理',
expanded : true,
children : [{
text : '用户管理',
id : 'userManage',
leaf : true
}, {
text : '权限管理',
id : 'rowManage',
leaf : true
}]
}, {
text : '任务管理',
expanded : true,
children : [{
text : '任务管理',
id : 'taskMange',
leaf : true
}]
}]
}
});
var treePanelApp = Ext.create('Ext.tree.Panel', {
id : 'tree-panel',
title : '菜单',
region : 'west',
collapsible : true,
split : true,
height : 360,
width : 170,
rootVisible : false,
store : store
});
var tabMap = new Ext.util.HashMap();
treePanelApp.on('itemclick', function(view, record, item, index, e,
eOpts) {
if (record.get('leaf')) {
var id = record.getId();
var text = record.get('text');
var hasTab = tabMap.get(id);
console.log(hasTab);
if (!hasTab) {
var t;
if (id == 'appManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'configManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'buttonManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'userManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'rowManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'taskMange') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
}
t.on('close', function(tab, eps) {
tabMap.removeAtKey(tab.getId());
})
tabMap.add(id, t);
}
tabs.setActiveTab(id);
}
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [treePanelApp, tabs]
});
});
页面效果：
如果是固定的菜单，就用不着java 后台了。
要是动态的菜单的话就返回一个 父子类型的 json 数据即可
[
{
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true }]
}
]
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
var tabs = Ext.create('Ext.tab.Panel', {
region : 'center'
});
var store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : '应用程序管理',
expanded : true,
children : [{
text : '应用程序管理',
id : 'appManage',
leaf : true
}]
}, {
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true
}, {
text : ' 页面按钮配置',
id : 'buttonManage',
leaf : true
}]
}, {
text : '用户管理',
expanded : true,
children : [{
text : '用户管理',
id : 'userManage',
leaf : true
}, {
text : '权限管理',
id : 'rowManage',
leaf : true
}]
}, {
text : '任务管理',
expanded : true,
children : [{
text : '任务管理',
id : 'taskMange',
leaf : true
}]
}]
}
});
var treePanelApp = Ext.create('Ext.tree.Panel', {
id : 'tree-panel',
title : '菜单',
region : 'west',
collapsible : true,
split : true,
height : 360,
width : 170,
rootVisible : false,
store : store
});
var tabMap = new Ext.util.HashMap();
treePanelApp.on('itemclick', function(view, record, item, index, e,
eOpts) {
if (record.get('leaf')) {
var id = record.getId();
var text = record.get('text');
var hasTab = tabMap.get(id);
console.log(hasTab);
if (!hasTab) {
var t;
if (id == 'appManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'configManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'buttonManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'userManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'rowManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'taskMange') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
}
t.on('close', function(tab, eps) {
tabMap.removeAtKey(tab.getId());
})
tabMap.add(id, t);
}
tabs.setActiveTab(id);
}
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [treePanelApp, tabs]
});
});
页面效果：
如果是固定的菜单，就用不着java 后台了。
要是动态的菜单的话就返回一个 父子类型的 json 数据即可
[
{
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true }]
}
]
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
var tabs = Ext.create('Ext.tab.Panel', {
region : 'center'
});
var store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : '应用程序管理',
expanded : true,
children : [{
text : '应用程序管理',
id : 'appManage',
leaf : true
}]
}, {
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true
}, {
text : ' 页面按钮配置',
id : 'buttonManage',
leaf : true
}]
}, {
text : '用户管理',
expanded : true,
children : [{
text : '用户管理',
id : 'userManage',
leaf : true
}, {
text : '权限管理',
id : 'rowManage',
leaf : true
}]
}, {
text : '任务管理',
expanded : true,
children : [{
text : '任务管理',
id : 'taskMange',
leaf : true
}]
}]
}
});
var treePanelApp = Ext.create('Ext.tree.Panel', {
id : 'tree-panel',
title : '菜单',
region : 'west',
collapsible : true,
split : true,
height : 360,
width : 170,
rootVisible : false,
store : store
});
var tabMap = new Ext.util.HashMap();
treePanelApp.on('itemclick', function(view, record, item, index, e,
eOpts) {
if (record.get('leaf')) {
var id = record.getId();
var text = record.get('text');
var hasTab = tabMap.get(id);
console.log(hasTab);
if (!hasTab) {
var t;
if (id == 'appManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'configManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'buttonManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'userManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'rowManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'taskMange') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
}
t.on('close', function(tab, eps) {
tabMap.removeAtKey(tab.getId());
})
tabMap.add(id, t);
}
tabs.setActiveTab(id);
}
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [treePanelApp, tabs]
});
});
页面效果：
如果是固定的菜单，就用不着java 后台了。
要是动态的菜单的话就返回一个 父子类型的 json 数据即可
[
{
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true }]
}
]
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
var tabs = Ext.create('Ext.tab.Panel', {
region : 'center'
});
var store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : '应用程序管理',
expanded : true,
children : [{
text : '应用程序管理',
id : 'appManage',
leaf : true
}]
}, {
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true
}, {
text : ' 页面按钮配置',
id : 'buttonManage',
leaf : true
}]
}, {
text : '用户管理',
expanded : true,
children : [{
text : '用户管理',
id : 'userManage',
leaf : true
}, {
text : '权限管理',
id : 'rowManage',
leaf : true
}]
}, {
text : '任务管理',
expanded : true,
children : [{
text : '任务管理',
id : 'taskMange',
leaf : true
}]
}]
}
});
var treePanelApp = Ext.create('Ext.tree.Panel', {
id : 'tree-panel',
title : '菜单',
region : 'west',
collapsible : true,
split : true,
height : 360,
width : 170,
rootVisible : false,
store : store
});
var tabMap = new Ext.util.HashMap();
treePanelApp.on('itemclick', function(view, record, item, index, e,
eOpts) {
if (record.get('leaf')) {
var id = record.getId();
var text = record.get('text');
var hasTab = tabMap.get(id);
console.log(hasTab);
if (!hasTab) {
var t;
if (id == 'appManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'configManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'buttonManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'userManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'rowManage') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
} else if (id == 'taskMange') {
t = tabs.add({
id : id,
title : record.get('text'),
closable : true,
items : [{
xtype : 'panel'
}]
});
}
t.on('close', function(tab, eps) {
tabMap.removeAtKey(tab.getId());
})
tabMap.add(id, t);
}
tabs.setActiveTab(id);
}
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [treePanelApp, tabs]
});
});
页面效果：
如果是固定的菜单，就用不着java 后台了。
要是动态的菜单的话就返回一个 父子类型的 json 数据即可
[
{
text : '页面配置管理',
expanded : true,
children : [{
text : '页面配置管理',
id : 'configManage',
leaf : true }]
}
]
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
