(Ext)accordion布局

代码：

 

Ext.onReady(function(){
           //定义树的跟节点
      var root=new Ext.tree.TreeNode({
            id:"root",//根节点id
    draggable:false,
            text:"广州"
      });
    
      //定义树节点
      var c1=new Ext.tree.TreeNode({
        id:'c1',//子结点id
        text:'越秀区外经贸局'
      });

      var c2=new Ext.tree.TreeNode({
        id:'c2',
        text:'番禺区外经贸局'
      });
      var c12=new Ext.tree.TreeNode({
        id:'c12',
        text:'局长文件'
      });
    var c22=new Ext.tree.TreeNode({
        id:'c22',
        text:'局长文件'
      });
    
      root.appendChild(c1);//为根节点增加子结点c1
      root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^
      c1.appendChild(c12);//为c1增加子节点c12
   c2.appendChild(c22);
          
      //生成树形面板
   var Tree = Ext.tree;
      var tree=new Ext.tree.TreePanel({
        el:"show_tree",
        root:root,//定位到根节点
        animate:true,//开启动画效果
        enableDD:true,//允许子节点拖动
        border:false,//没有边框
   containerScroll: true,
        rootVisible:true,//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
   loader: new Tree.TreeLoader({
    dataUrl:'treedata.php'
   })
     });

//定义右键菜单
   var rightClick = new Ext.menu.Menu({
        id :'rightClickCont',
        items : [{
            id:'rMenu1',
            text : '菜单1',
            //增加菜单点击事件
            handler:function (){
                      alert('我被点击了！');
                    }
        }, {
            id:'rMenu2',
            text : '菜单2'
        }, {
            id:'rMenu3',
            text : '菜单3'
        }]
     });

     //增加右键点击事件
     c1.on('contextmenu',function(node,event){//声明菜单类型
          event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
     });

   c2.on('contextmenu',function(node,event){//声明菜单类型
          event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
     });

         var p = new Ext.Panel({//创建一个面板
          region:'west',
     //margins:'0 0 0 0',//布局需要
             //cmargins:'0 5 5 5',//布局需要
     split: true,
                title:'我的菜单',
                width:200,
                height:400,
                layout:'accordion',//声明布局类型
                layoutConfig: {
                     animate: true //动画效果启用
                },
                items:[{
                         title:'外经贸局',
       border:false,
       //items:[tree],
                         html:'<div id="show_tree" align="left"></div>'//这里可用div，方便其他元素插入
                        }, {
                         title:'菜单2',
                         html:'菜单2的内容'
                        }, {
                         title:'菜单3',
                         html:'菜单3的内容'
                        }, {
                         title:'菜单4',
                         html:'菜单4的内容'
                        }, {
                         title:'菜单5',
                         html:'菜单5的内容'
                        }]
          });
    
   var panel = new Ext.Panel({
      // margins:'0 0 0 0',//布局需要
            // cmargins:'0 5 5 5',//布局需要
     split: true,
       region:'center',
     title: '首页',
     collapsible:true,
     width:400
    
    });

var mainpanel = new Ext.Panel({
        renderTo:'show',//填充到id为show的区域
   //margins:'0 0 0 0',//布局需要
    // cmargins:'0 5 5 5',//布局需要
   split: true,
   layout:"border",
        title: '主Panel',
        collapsible:true,
        width:800,
   height:500,
   items:[p,panel]
    });
   tree.render("show_tree");
});