效果图
Js代码
/**
* 程序主入口
*/
Ext.onReady(function() {
Ext.require(['Ext.panel.Panel', 'Ext.tab.Panel', 'Ext.tree.Panel',
'Ext.data.TreeStore', 'Ext.container.Viewport',
'Ext.ux.TabCloseMenu']);
/**
* 上,panel.Panel
*/
this.topPanel = Ext.create('Ext.panel.Panel', {
region : 'north',
height : 55,
contentEl : 'header'
});
/**
* 左,panel.Panel
*/
this.leftPanel = Ext.create('Ext.panel.Panel', {
region : 'west',
title : '导航栏',
width : 230,
layout : 'accordion',
collapsible : true
});
/**
* 右,tab.Panel
*/
this.rightPanel = Ext.create('Ext.tab.Panel', {
region : 'center',
layout : 'fit',
minTabWidth : 100,
plugins : Ext.create('Ext.ux.TabCloseMenu', {
closeTabText : '关闭当前页',
closeOthersTabsText : '关闭其他页',
closeAllTabsText : '关闭所有页'
}),
items : [{
title : '首页'
}]
});
/**
* 下,panel.Panel
*/
this.bottomPanle = Ext.create('Ext.panel.Panel', {
region : 'south',
height : 26,
bbar : ['->', {
xtype : 'combo',
editable : false,
labelAlign : 'right',
emptyText : '更换皮肤',
store : [['id_1', 'name_1'], ['id_2', 'name_2'], ['id_3', 'name_3']],
queryMode : 'local',
listeners : {
'select' : function(combo, record, index) {
if (combo.value != '') {
alert(combo.value);
}
}
}
}]
});
/**
* 组建树
*/
var buildTree = function(json) {
return Ext.create('Ext.tree.Panel', {
rootVisible : false,
border : false,
store : Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : json.children
}
}),
listeners : {
'itemclick' : function(view, record, item, index, e) {
var id = record.get('id');
var text = record.get('text');
var leaf = record.get('leaf');
if (leaf) {
alert('id-' + id + ',text-' + text + ',leaf-'
+ leaf);
}
},
scope : this
}
});
};
/**
* 加载菜单树
*/
Ext.Ajax.request({
url : 'data/Tree.txt',
success : function(response) {
var json = Ext.JSON.decode(response.responseText)
Ext.each(json.data, function(el) {
var panel = Ext.create('Ext.panel.Panel', {
id : el.id,
title : el.text,
layout : 'fit'
});
panel.add(buildTree(el));
leftPanel.add(panel);
});
},
failure : function(request) {
Ext.MessageBox.show({
title : '操作提示',
msg : "连接服务器失败",
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.ERROR
});
},
method : 'post'
});
/**
* Viewport
*/
Ext.create('Ext.container.Viewport', {
layout : 'border',
renderTo : Ext.getBody(),
items : [this.topPanel, this.leftPanel, this.rightPanel,
this.bottomPanle]
});
});
后台返回数据
{success:true,data:[{id:'father_1',text:'功能列表',leaf:false,children:[{id:'UserView',text:'用户管理',leaf:true}]}]}