自己写的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);