一棵完整的异步加载的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(); 
  }
};

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

抢了沙发再看，正在找这样的东西。viewport 里面的组件还需要给它们指定el（div）标签位置么，那么这个时候div标签怎么写呢？div会影响布局么，我写了以后怎么都显示不出来treepanel

能否给出对应的html页面源码

不用指定el属性的,可以从外面加.我很少使用el这个属性,会写一些乱七八遭的HTML代码在页面里,看着不舒服.
html代码很简单,包含进行必须的js,css,这个不多说了.
然后只用写一句
Ext.onReady(com.faceye.layout.Home.init,com.faceye.layout.Home);
就可以把整个页面加载进来了

<script type="text/javascript">
Ext.onReady(com.faceye.layout.Home.init,com.faceye.layout.Home);
</script>

　div并不总会影响到布局.
如果你想用div标签,有几种途经
第一,为div指定一个id（这个div是写在网页html代码里的.)
在js里通过
Ext.get(id)
然后对其进操作

第二,可以通过指定panel的　html:'<div id='faceye-div'></div>'来进行操作.

第三.可以在js里面通过createElement建一个.

还有很多办法都可以,其它的,再想了～～


注意这里的定义：
在定义tree时,使用：
el:'tree-viewer',

在定义panel时,使用：
html:'<div id="tree-viewer"></div>

用DWRTreeLoader实现同样的功能，可以大大简化前后台程序。

个人觉得,后台程序还是不可缺少的,因为作为我们的树形结构,它大多情况下, 都需要与系统的权限结合在一起,才可以达到更好的效果.
如果只是展现一棵不加任何控制的树出来,我想没有太多的实体意义,而只有加上了完整的权限控制的树形结构,才可以在一个项目的推进过程中,很好的控制模块的分配,权限的规划.

用DWRTreeLoader确实可以大大简化后台程序的开发,但简化的同是,我们是不是会付出其它的代价呢?
我觉得这是一个需要考虑的问题.

毕竟,控制权限,在服务器端控制,比用JS控制,要安全的多,有效的多.

请教一下：用DWRTreeLoader为何会与权限控制有关？

===================================
从阁下的图片中可以推断出如下事实：
1.宋海鹏是你的真名（source注释也有你的名字）
2.使用笔记本，并且是最近一年买的
3.英文不算很好，但是经常阅读英文资料
4.使用Java时间不长，或者比较守旧，不喜欢新技术