自己写的Ext树，Ext3.4，静态全部加载

var load = function(){
    /**
     * 书籍资料目录
     */
    var bookIT = new Ext.tree.TreeNode({
        text:"IT",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+bookIT.text);
            }
        }
    });
    var bookNovel = new Ext.tree.TreeNode({
        text:"小说",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+bookNovel.text);
            }
        }
    });
    var bookFinance = new Ext.tree.TreeNode({
        text:"金融",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+bookFinance.text);
            }
        }
    });
    var bookRoot = new Ext.tree.TreeNode({    
        id:"root",  
        text:"树的根"  
    }); 
    bookRoot.appendChild(bookIT);
    bookRoot.appendChild(bookNovel);
    bookRoot.appendChild(bookFinance);
    var bookTree = new Ext.tree.TreePanel({ 
        id:'book_tree',
        title:'书籍资料',
        root:bookRoot,  
        rootVisible:false,
        xtype:'treepanel',
        enableDD : true,  //允许子节点拖动
        bodyStyle:'background-color:#CCCCFF' //设置面板颜色
        //titleCollapse:true //True表示为允许单击头部区域任何一个位置都可收缩面板(无效果)
        //loader: new Ext.tree.TreeLoader({dataUrl:'treedata.js'}),
        //width:200
    }); 
    var houseCooking = new Ext.tree.TreeNode({
        text:"厨具",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+houseCooking.text);
            }
        }
    });
    /**
     * 家居用品目录
     */
    var houseTable = new Ext.tree.TreeNode({
        text:"桌椅",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+houseTable.text);
            }
        }
    });
    var houseRoot = new Ext.tree.TreeNode({
        id:"root",
        text:"树的根"
    });
    houseRoot.appendChild(houseCooking);
    houseRoot.appendChild(houseTable);
    var houseTree = new Ext.tree.TreePanel({
        id:'house_tree',
        title:'家居用品',
        root:houseRoot,
        rootVisible:false,
        xtype:'treepanel',
        enableDD:true,
        bodyStyle:'background-color:#CCCCFF' //设置面板颜色
        //width:200,
    });
    /**
     * 电子目录
     */
    var electronComputer = new Ext.tree.TreeNode({
        text:"电脑",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+electronComputer.text);
            }
        }
    });
    var electronRoot = new Ext.tree.TreeNode({
        id:"root",
        text:"树的根"
    });
    electronRoot.appendChild(electronComputer);
    var electronTree = new Ext.tree.TreePanel({
        id:'electron_tree',
        title:'电子',
        root:electronRoot,
        xtype:'treepanel',
        rootVisible:false,
        enableDD:true,
        bodyStyle:'background-color:#CCCCFF' //设置面板颜色
        //width:200
    });
    /**
     * 服装目录
     */
    var clothesMan = new Ext.tree.TreeNode({
        text:"男装",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+clothesMan.text);
            }
        }
    });
    var clothesGirl = new Ext.tree.TreeNode({
        text:"女装",
        leaf:true,
        listeners:{
            click:function(){
                Ext.MessageBox.alert("提示","您点击了"+clothesGirl.text);
            }
        }
    });
    var clothesRoot = new Ext.tree.TreeNode({
        id:"root",
        text:"树的根"
    });
    clothesRoot.appendChild(clothesMan);
    clothesRoot.appendChild(clothesGirl);
    var clothesTree = new Ext.tree.TreePanel({
        id:'clothes_tree',
        root:clothesRoot,
        rootVisible:false,
        xtype:'treepanel',
        enableDD:true,
        title:'服装',
        bodyStyle:'background-color:#CCCCFF' //设置面板颜色
        //width:200
    });
    
    
    new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            //renderTo:'main_top',
            //applyTo:'main_top',
            contentEl:'main_top',
            height:100,
            //xtype:'tabpanel',
            //title:"首页"
           // autoHeight: true,//自动设置高度
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,//设置前面的展开、收拢效果的加减号
            title: '分类',
            //xtype: 'treepanel',//不能写这个，否则页面会乱
            width: 200,
            minSize: 100,
            maxSize: 400,//设置左侧面板拉伸的最大宽度与最小宽度
            collapsible: true,//允许展开和收缩
            autoScroll: true,
            split: true,//让用户可以动态地改变区域的大小
            items: [bookTree,houseTree,electronTree,clothesTree],
            //下面是ext漂亮的折叠功能
            layout: 'accordion',
            layoutConfig: {
                titleCollapse: true, //默认为true，表示单击标题就可以收缩子面板，如果设置为false，则必须单击标题右边的图标来收缩面板。  
                collapseFirst : false,   //当显示title bar时，是否总把收缩、展开按钮放在所有其他按钮的前面。默认值为true。
                animate: true,   //是否使用动画效果。
                hideCollapseTool : false,   //当collapsible=true且hideCollapseTool=true时，则隐藏控制收缩、伸展的那个按钮，为false时就显示它，默认值为false。
                activeOnTop: false  //默认是false，展开和收缩后子面板的位置不变。如果设置为true，就会随着展开和收缩变换位置。展开的面板总是在最顶层
            }
        }, {
            region: 'center',
            xtype: 'tabpanel',
            contentEl:'main_right',
            title:"物品"
        }]
    });
}//end load
Ext.onReady(load);