/**
* 导航组件。
* User: zhangzg 492274248@qq.com
* Date: 14-7-11
* Time: 下午3:39
*
*/
Ext.define('Exp.component.Navigation',{
extend:'Ext.Component',
cls:'student-sta-titlediv',
navgData:{},
initComponent:function(){
this.callParent();
Exp.loadCss('framework/expand/src/component/css/student-sta-style.css');
this.tpl = new Ext.XTemplate('<div class="student-sta-titname"><tpl for="nodes">' +
' <a href="#" treeId="{id}">{text}</a> ' +
'{[xindex === xcount ? "" : ">>"]} </tpl></div>' +
'<div class="student-sta-iconname"><tpl for="children">{% if (xcount === 0) break; %} ' +
'<a href="#" treeId="{id}">{text}</a></tpl> </div>');
this.data = {};
this.bindEvents();
},
/**
* 绑定事件
*/
bindEvents : function(){
var me = this;
this.on('afterrender',function(){
this.update({nodes:[me.navgData[0]],
children:me.navgData[0].children});
});
this.on({
click : {
element : 'el',
fn : function(event,el){
if(el.tagName=='A'){
var data = {
id : event.getTarget().getAttribute('treeId'),
text : el.text
};
me.transData(data);
me.update(me.currentData);
}
}
}
});
},
/**
* 刷新导航栏组件。
* @param data
*/
transData:function(data){
var nodeId = data.id,
nodes = [],
flag = true,
newNodes = [],
obj = {};
while(flag){
for(var key in this.navgData){
var item = this.navgData[key];
if(item.id == nodeId){
nodes.push(item);
nodeId = item.pid;
break;
}
}
// 找到根节点之后,跳出while循环
if(nodes.length!=0 && (nodes[nodes.length-1].pid == -1 || nodes[nodes.length-1].pid==null)){
flag = false;
}
// 如果hashmap中没有该节点,那么跳出循环。
if(typeof this.navgData[nodeId] == 'undefined'){
flag = false;
}
}
for(var i = nodes.length-1;i>=0;i--){
newNodes.push(nodes[i]);
if(i==0){
obj.children = nodes[i].children;
}
}
this.currentData = Ext.apply({nodes:newNodes},obj);
},
/**
* 获取组件的值
*/
getValue:function(){
return this.currentData||{};
}
});
使用方法
var navigation = new Exp.component.Navigation({navgData:{
0:{
id:0,
text:'**师范学院',
pid:-1,
cclx:'XX',
cc:1,
children:[{
id:1,
text:'化学化工学院',
pid:0,
cclx:'XY',
cc:2,
children:[]
},{
id:2,
text:'计算机科学与技术学院',
pid:0,
cclx:'XY',
cc:2,
children:[{
id:4,
text:'软件工程',
pid:2,
cclx:'ZY',
cc:3,
children:[]
}]
},{
id:3,
text:'政法学院',
pid:0,
cclx:'XY',
cc:2,
children:[]
}]
},
1:{
id:1,
text:'化学化工学院',
pid:0,
cclx:'XY',
cc:2,
children:[]
},
2:{
id:2,
text:'计算机科学与技术学院',
pid:0,
cclx:'XY',
cc:2,
children:[{
id:4,
text:'软件工程',
pid:2,
cclx:'ZY',
cc:3,
children:[]
},{
id:5,
text:'软件技术(PHP)',
pid:2,
cclx:'ZY',
cc:3,
children:[]
},{
id:6,
text:'软件技术(Java)',
pid:2,
cclx:'ZY',
cc:3,
children:[]
},{
id:7,
text:'软件技术(.net)',
pid:2,
cclx:'ZY',
cc:3,
children:[]
}]
},
3:{
id:3,
text:'政法学院',
pid:0,
cclx:'XY',
cc:2,
children:[]
},
4:{
id:4,
text:'软件工程',
pid:2,
cclx:'ZY',
cc:3,
children:[]
}
}});
效果图