一棵完整的异步加载的Ext树 (1) Viewport布局

前些天写了一些学习ext时写的树的例子,不太全面,有些对不住,现在分几天把生成树的代码写出来,希望可以有一些帮助.
这里生成的树,使用一张数据库表生成,可以无限级的分类,与我前期写的使用Struts-menu生成树结构,有较大的不同,同时,每次只取一级节点,每展开一次,再取下一级节点,同时,所有的节点数据加载的内存中,可以有效减少访问数据库的次数,生产环境中,可以加入到cache中,更符合环境要求.

做一小推广,希望大伙可以接受～～域名（www.faceye.com/cn/net）准备出售.我个人对域名有绝对的拥有权,在中国万网注册,由于没有时间去开发,有兴趣的朋友可以和我联系，也可以合作开发.联系方式：MSN:myecsun@hotmail.com,QQ:82676683,Mail:ecsun@sohu.com

下面我们一步一步开始我们的生成树旅程.

1.Viewport布局,Ext里面提供了很多有用的layou,组合使用这些layout,几乎可以得到任何想用的布局样式,在viewport里面,可以使用更多的布局.

定义一个带左边栏树形结构的布局,运行效果参考附件.


对本布局的说明：本布局的每一部分,都可以根据需求,再进行细致的划分,基本上是目前很多项目采用的较为传统的后台布局格式.

生成本布局的EXT代码：

/**
*Common Java Scripts
*Design By 宋海鹏
*E_mail:ecsun@sohu.com,QQ:82676683,MSN:myecsun@hotmail.com
*www.faceye.com all Right Reserved
*/
Ext.namespace('com.faceye.layout');
Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/vista/s.gif';
var com.faceye.layout.Home={
  init : function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
       var viewport = new Ext.Viewport({
            layout:'border',
            items:[new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'north',
                    height:32,
                    html:'<p> north</p>'
                }),{
                region:'west',
                id:'west-panel',
                title:'West',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'35 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [
               {
                    title:'Home Navigation',
                    autoScroll:true,
                    border:false,
                    iconCls:'nav',
                    html:'<div id="tree-viewer" style="overflow:auto;height:400px;border:0px solid #c3daf9;"></div>'
                   }
                ,{
                    title:'Settings',
                    html: '<p>Set The System Property</p>',
                    border:false,
                    autoScroll:true,
                    iconCls:'settings'
                }]
            },{
                region:'center',
                margins:'35 5 5 0',
                layout:'fit',
                border:true,
                autoScroll:false,
                    items:[{
                    baseCls:'x-plain',
                    layout:'fit',
//                    columnWidth:1,
                    bodyStyle:'padding:0px 0px 0px 0px',
                    items:[{
                    	autoScroll:false,
                    	border:false,
//                        title: 'Content',
                        html: '<iframe id="content-iframe" frameborder="no" style="width:100%;height:99.9%"></iframe>'
//                        <p><iframe id="content-iframe" frameborder="no" style="width:100%;height:100%"></iframe></p>
                    }]
                }]
            
            }]
        });
  /**  
   *----------------------------------------------------------
   *开始树开结构的定义
   *Define tree Struct
   *Tree Define By Song Hai Peng
   *----------------------------------------------------------
   */     
    var tree;
    var root;
//判断树形结构是否已生成,如果已生成,将不再再次生成.
    if(!tree){
    var Tree = Ext.tree;
    tree = new Tree.TreePanel(
    {
        el:'tree-viewer',
        autoScroll:true,
        animate:true,
        border:false,
        enableDD:true,
        containerScroll: true,
        rootVisible:false,
        loader: new Tree.TreeLoader({
//从数据库加载树形结构数据
            dataUrl:'/faceye/treeAction.do?method=tree'
        })
    }
    );  
    //Defint node click event,when node is clicked,send data to inner 'div' and show data in
    // set the root node
    root = new Tree.AsyncTreeNode({
        text: 'Common Platform',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);
    /**
    *当点击叶子里,将叶子对应的URL内容,在右侧面板中展示.
　　*其中,content-iframe是在上面viewport定义中指定的HTML标签的id,当前树节点对应的URL要在本　iframe　中打开.
    */
     tree.on('click', function (node){ 
      if(node.isLeaf()){ 
         Ext.get('content-iframe').dom.src = node.attributes.link+'&node='+node.id;
         //define grid;
         return true;
     }else{
      /**
       *如是不是叶子节点,将展开目录
       */
        node.toggle();
     }
    }); 
    // render the tree
    }
    tree.render();
    root.expand(); 
  }
};

　好了,今天就先到这里,明天写后台的数据结构.