Ext 最简略的树的生成

2012-10-17

Ext 最简单的树的生成在Ext中树是经验用到的，最简单的一棵树如下：treePanelFirst new Ext.tree.TreePane

Ext 最简单的树的生成
在Ext中树是经验用到的，最简单的一棵树如下：

treePanelFirst = new Ext.tree.TreePanel({    // 自动创建树加载器 TreeLoader    dataUrl:'context.jsp',    root: {        nodeType: 'async',        text: 'Ext JS'    }});

只要dataUrl正确的返回符合javascript数组类型的json就可以自动解读成树。
下面的代码和上面实现的功能一致

treePanelFirst = new Ext.tree.TreePanel({        //      树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。//      返回值必须是以树格式的javascript数组。        loader: new Ext.tree.TreeLoader(        {dataUrl: 'context.jsp'}),//树的根节点对象 ,采用异步的方式，用于动态加载子节点        root:new Ext.tree.AsyncTreeNode({        text:'Ext JS'        })});

还有一种方法一样可以创建一棵树，效果和上面的一样：

ApiPanel = function() {    ApiPanel.superclass.constructor.call(this, {//      树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。//      返回值必须是以树格式的javascript数组。        loader: new Ext.tree.TreeLoader(        {dataUrl: 'context.jsp'//左侧目录数据源}),//采用异步的方式，用于动态加载子节点        root: new Ext.tree.AsyncTreeNode(        {//        只读属性，该节点所显示的文本.            text:'Ext JS',        })    });};Ext.extend(ApiPanel, Ext.tree.TreePanel, {    });treePanelFirst = new ApiPanel();

最后在html文件中进行测试

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">      <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>      <script type="text/javascript" src="../ext-all.js"></script>        <script type="text/javascript" src="../Tree/TreePanelTest.js"></script>  <script type="text/javascript">      Ext.onReady(function(){treePanelFirst.render("header");      });</script>   </head>  <body><div id="header"></div>  </body></html>

上面三种方法效果是一样的，当然在创建树的时候还有很多属性可以指定常用的如下：

//     True表示为显式建立头部元素，false则是跳过创建。//      缺省下，如不创建头部，将使用title的内容设置到头部去，//如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。        header: true,        width: 248,        minSize: 175,        maxSize: 500,//      True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条        collapsible: true,        margins:'0 0 5 5',        cmargins:'0 0 0 0',        //      是否隐藏根节点,ture就不隐藏根节点，false不显示根节点        rootVisible:false,        //true表示在面板上设置 overflow:auto和出现滚动条//      false 表示裁剪所有溢出的部分，不设置默认为false        autoScroll:true,        animCollapse:false,        //     是否以动画形式展开.会慢慢展开        animate: true,        //      是否显示节点左侧的小三角形头的图标        useArrows:false,        //      是否显示区分结构的虚线,useArrows:false情况下才有效果        line:true,        //      是否允许拖放，true可以拖放        enableDD:true,                collapseMode:'mini',        //      True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方        collapseFirst:false,

现在来看看后台要传递过来的数据：

String jsonData = "[{text:'测试1',leaf: true ,msg:'moreMessage1'}, " +                   "{text:'测试2',leaf: true ,msg:'moreMessage2'}, " +                    "{text:'测试3',leaf: true ,msg:'moreMessage3'}]";System.out.print(jsonData);out.write(jsonData);

其实后台就是传递过来json数组,可以由各种方法来实现。结果如下：

如果要实现多层结构的树则可以返回下面类似的json数据：

String jsonData = "[{" + "text:'测试1',msg:'moreMessage1',leaf: false," + "children:[ " +             "{text:'测试1-1',msg:'moreMessage1-1',leaf:true}," +             "{text:'测试1-2',msg:'moreMessage1-2',leaf:true}," +             "{text:'测试1-3',msg:'moreMessage1-3',leaf:true}" +           "]" +"}," +                   "{text:'测试2',msg:'moreMessage2',leaf:true}, " +                    "{text:'测试3',msg:'moreMessage3',leaf:true}  " +                    "]";

结果如下：

本人新手，刚刚开始学习Ext，有错请指出，谢谢

热点排行

Web前端

Ext 最简略的树的生成