ext tree

MenuPanel = function() { 
MenuPanel.superclass.constructor.call(this, 
{ 
id:'menu-tree', 
region:'west', 
split:true, 
width: 280, 
minSize: 175, 
maxSize: 500, 
collapsible: true, 
margins:'0 0 5 5', 
cmargins:'0 0 0 0', 
rootVisible:false, 
lines:false, 
autoScroll:true, 
animCollapse:false, 
animate: false, 
collapseMode:'mini', 
loader: new Ext.tree.TreeLoader( 
{ 
dataUrl:'http://localhost:8081/pms/menu.do' 
} 
), 
root: new Ext.tree.AsyncTreeNode( 
{ 
text:'Ext JS', 
id:'root', 
expanded:true//, 
//children:[Docs.classData]//bevis:the data form 
} 
), 
collapseFirst:false 
}); 
    // no longer needed! 
    //new Ext.tree.TreeSorter(this, {folderSort:true,leafAttr:'isClass'}); 
    this.getSelectionModel().on('beforeselect', function(sm, node){return node.isLeaf(); }); 
    //added by bevis 
    //this.on('beforeload',function(node){alert(node.id);}); 
}; 
//此方法的目的是：选中对应的那个menuItem 
Ext.extend(MenuPanel, Ext.tree.TreePanel, { 
    selectClass : function(cls){ 
    //alert(cls); 
//cls=Ext.menu.DateMenu 
        if(cls){ 
            var parts = cls.split('.'); 
            var last = parts.length-1; 
            for(var i = 0; i < last; i++){ 
                var p = parts[i]; 
                var fc = p.charAt(0); 
                var staticCls = fc.toUpperCase() == fc; 
                if(p == 'Ext' || !staticCls){ 
                    parts[i] = 'pkg-'+p; 
                }else if(staticCls){ 
                    --last; 
                    parts.splice(i, 1); 
                } 
            } 
            parts[last] = cls; 
            this.selectPath('/root/000001/'+parts.join('/')); 
        } 
    } 
}); 

** 
* open a new table ,if you click a menuItem 
* @class PMSPanel 
* @extends Ext.Panel 
*/ 
PMSPanel = Ext.extend(Ext.Panel, 
{ 
    closable: true, 
    autoScroll:true, 
    initComponent : function(){ 
        var ps = this.cclass.split('.'); 
        this.title = ps[ps.length-1]; 
        PMSPanel.superclass.initComponent.call(this); 
        //tinit(); 
    }, 
    scrollToMember : function(member){ 
    var el = Ext.fly(this.cclass + '-' + member); 
    if(el){ 
    var top = (el.getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop; 
    this.body.scrollTo('top', top-25, {duration:.75, callback: this.hlMember.createDelegate(this, [member])}); 
    } 
    }, 
    scrollToSection : function(id){ 
    var el = Ext.getDom(id); 
    if(el){ 
    var top = (Ext.fly(el).getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop; 
    this.body.scrollTo('top', top-25, { 
    duration:.5, callback: function(){ 
    Ext.fly(el).next('h2').pause(.2).highlight('#8DB2E3', {attr:'color'}); 
    } 
    } 
    ); 
    } 
}, 
hlMember : function(member){ 
        var el = Ext.fly(this.cclass + '-' + member); 
        if(el){ 
            el.up('tr').highlight('#cadaf9'); 
        } 
    } 
}); 

MainPanel = function(){ 
this.searchStore = new Ext.data.Store({ 
        proxy: new Ext.data.ScriptTagProxy({ 
            url: 'http://extjs.com/playpen/api.php' 
        }), 
        reader: new Ext.data.JsonReader({root: 'data'}, 
['cls', 'member', 'type', 'doc'] 
), 
baseParams: {}, 
        listeners: { 
            'beforeload' : function(){ 
                this.baseParams.qt = Ext.getCmp('search-type').getValue(); 
            } 
        } 
    }); 

    MainPanel.superclass.constructor.call(this, { 
        id:'doc-body', 
        region:'center', 
        margins:'0 5 5 0', 
        resizeTabs: true, 
        minTabWidth: 135, 
        tabWidth: 135, 
        plugins: new Ext.ux.TabCloseMenu(), 
        enableTabScroll: true, 
        activeTab: 0, 
        items: { 
            id:'welcome-panel', 
            title: 'Main Home', 
            autoLoad: {url: PageInfo.base+'/member.do', callback:function(){}, scope: this}, 
            iconCls:'icon-docs', 
            autoScroll: true 
        } 
    }); 
}; 

Ext.extend(MainPanel, Ext.TabPanel, { 
    initEvents : function(){ 
        MainPanel.superclass.initEvents.call(this); 
        this.body.on('click', this.onClick, this); 
    }, 
    onClick: function(e, target){ 
        if(target = e.getTarget('a:not(.exi)', 3)){ 
            var cls = Ext.fly(target).getAttributeNS('ext', 'cls'); 
            e.stopEvent(); 
            if(cls){ 
                var member = Ext.fly(target).getAttributeNS('ext', 'member'); 
                this.loadClass(target.href, cls, member); 
            }else if(target.className == 'inner-link'){ 
                this.getActiveTab().scrollToSection(target.href.split('#')[1]); 
            }else{ 
                window.open(target.href); 
            } 
        }else if(target = e.getTarget('.micon', 2)){ 
            e.stopEvent(); 
            var tr = Ext.fly(target.parentNode); 
            if(tr.hasClass('expandable')){ 
                tr.toggleClass('expanded'); 
            } 
        } 
    }, 

    loadClass : function(href, cls, member){ 
        var id = 'docs-' + cls; 
        var tab = this.getComponent(id); 
        if(tab){ 
            this.setActiveTab(tab); 
            if(member){ 
                tab.scrollToMember(member); 
            } 
        }else{ 
            var autoLoad = {url: href}; 
            if(member){ 
                autoLoad.callback = function(){ 
                    Ext.getCmp(id).scrollToMember(member); 
                } 
            } 
            var p = this.add(new PMSPanel({ 
                id: id, 
                cclass : cls, 
                autoLoad: autoLoad//, 
            })); 
            this.setActiveTab(p); 
            //alert("parent init"); 
        } 
    } 
}); 

Ext.onReady(function(){ 
    Ext.QuickTips.init(); 
    var menuPanel = new MenuPanel(); 
    var mainPanel = new MainPanel(); 

    //当用户点选某一节点时就会激活此方法，但是当点选节点前面的"+-"号时不会激活此方法 
    menuPanel.on('click', function(node, e){ 
    if(node.isLeaf()){ 
            e.stopEvent(); 
            mainPanel.loadClass(node.attributes.href, node.id); 
         } 
//         else{ 
//         alert(node.text); 
//         } 
    }); 

mainPanel.on('tabchange', function(tp, tab){ 
    //alert(tab.cclass); 
        menuPanel.selectClass(tab.cclass); 
    }); 

var hd = new Ext.Panel({ 
        border: false, 
        layout:'anchor', 
        region:'north', 
        cls: 'docs-header', 
        height:60,//the head of height ,it can be change 
        items: [{ 
            xtype:'box', 
            el:'header', 
            border:false, 
            anchor: 'none -25' 
        }, 
        new Ext.Toolbar( 
        { 
        cls:'top-toolbar', 
        items:[ 
'->', 
new Ext.Toolbar.TextItem('用户名:Admin'+',登陆时间：'+new Date().getYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate()), 
            { 
                tooltip:'退出系统', 
                iconCls: 'icon-expand-members', 
                text:'退出系统', 
                enableToggle: true, 
                toggleHandler : function(b, pressed){ 
Ext.MessageBox.confirm('提示','是否退出此系统？',exitornotFun); 
function exitornotFun(data){ 
if(data=='yes'){ 
Ext.MessageBox.alert('message','you have exited the system'); 
return; 
} 
} 
            } 
            } 
] 
        }) 
        ] 

    })