使用ext封裝自定義元件-導航欄元件

/**
 * 導航元件。
 * User: zhangzg [email protected]
 * 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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  treeId="{id}">{text}</a> ' +
            '{[xindex === xcount ? "" : ">>"]} </tpl></div>' +
            '<div class="student-sta-iconname"><tpl for="children">{% if (xcount === 0) break; %} ' +
            '<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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:[]
            }
        }});
           

效果圖