2008-01-21

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



　好了,今天就先到这里,明天写后台的数据结构.
  • 8354108e-d4c5-376b-945d-ef7213860919-thumb
  • 描述: 生成的效果图
  • 大小: 137.5 KB
评论
ecsun 2008-06-20
得,俺对那叫什么南的没兴趣,看来咱俩没啥共同语言了,俺只对仁杰有兴趣,咱俩没共同语言.
kayzhan 2008-06-17
因为我有共同爱好！柯南和福尔摩斯是我的最爱，当然还有越狱！哈哈
kayzhan 2008-06-17
^哈哈 ！！stevenwang 的推理倒是有意思，适合做侦探
ja3939 2008-05-23
qishi001 写道
4.使用Java时间不长，或者比较守旧，不喜欢新技术
-------tomcat



那什么才是新技术呢?????
qishi001 2008-05-16
4.使用Java时间不长，或者比较守旧，不喜欢新技术
-------tomcat
andy37 2008-05-14
应该是从效果图上看出来滴
2.使用笔记本，并且是最近一年买的
--图上可以看到电池图标&操作系统是vista
3.英文不算很好，但是经常阅读英文资料
--ie装了google工具栏，启用了字词翻译器
4.使用Java时间不长，或者比较守旧，不喜欢新技术
--这个是咋看出来的捏？
ecsun 2008-03-08
后台的已经写了
在博客上面
看一下了~~
ecsun.javaeye.com
jackzhangyunjie 2008-03-08
你的后台数据到什么时候才能写完呀，现在也在写这样的东西，我们用的是XTree 实现的树。
kooyeed 2008-02-22
看到你写的这些东西，我只能对你说3个字：你有病
stevenwang 写道
ecsun 写道
前些天写了一些学习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(); 
  }
};



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

===================================
从阁下的图片中可以推断出如下事实：
1.宋海鹏是你的真名（source注释也有你的名字）
2.使用笔记本，并且是最近一年买的
3.英文不算很好，但是经常阅读英文资料
4.使用Java时间不长，或者比较守旧，不喜欢新技术
InnocentBoy 2008-02-18
估计是认识你的朋友，其他没什么可能。
yjzengli 2008-02-02
我也想知道是怎么判断的
ecsun 2008-01-29
完全有可能.
wolfarmy 2008-01-28
楼上的兄弟，你怎么判断的呀，让我们也看看你的依据，最近是不是越狱看多了呀
ecsun 2008-01-24
2.使用笔记本，并且是最近一年买的

什么理由啊?

3.英文不算很好，但是经常阅读英文资料

什么理由啊?

4.使用Java时间不长，或者比较守旧，不喜欢新技术

什么理由啊?

兄弟不会是....吧?
stevenwang 2008-01-24
ecsun 写道
前些天写了一些学习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(); 
  }
};



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

===================================
从阁下的图片中可以推断出如下事实：
1.宋海鹏是你的真名（source注释也有你的名字）
2.使用笔记本，并且是最近一年买的
3.英文不算很好，但是经常阅读英文资料
4.使用Java时间不长，或者比较守旧，不喜欢新技术
fangzhouxing 2008-01-24
请教一下：用DWRTreeLoader为何会与权限控制有关？
ecsun 2008-01-24
个人觉得,后台程序还是不可缺少的,因为作为我们的树形结构,它大多情况下, 都需要与系统的权限结合在一起,才可以达到更好的效果.
如果只是展现一棵不加任何控制的树出来,我想没有太多的实体意义,而只有加上了完整的权限控制的树形结构,才可以在一个项目的推进过程中,很好的控制模块的分配,权限的规划.

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

毕竟,控制权限,在服务器端控制,比用JS控制,要安全的多,有效的多.
fangzhouxing 2008-01-24
用DWRTreeLoader实现同样的功能，可以大大简化前后台程序。
ecsun 2008-01-21
peter_wu 写道
抢了沙发再看，正在找这样的东西。viewport 里面的组件还需要给它们指定el（div）标签位置么，那么这个时候div标签怎么写呢？div会影响布局么，我写了以后怎么都显示不出来treepanel


　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>
ecsun 2008-01-21
<script type="text/javascript">
Ext.onReady(com.faceye.layout.Home.init,com.faceye.layout.Home);
</script>
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

ecsun
搜索本博客
我的相册
959d6764-20ee-3f5d-8e7d-62b829f243a0-thumb
Faceye基础版(开源)新建标签页
共 24 张
最近加入圈子
存档
最新评论