`
qinjingkai
  • 浏览: 260043 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

Ext之Tree

EXTJavaScriptCSSHTML 
阅读更多

                  关键: 1 树型数据的来源指定:

                           2 树型数据的格式

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>kaitree001.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
  
    <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css" />

  
         <script type="text/javascript" src="../scripts/ext/temp/ext-base.js"></script>
 

  <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
   
   
   
    <script type="text/javascript">
      Ext.onReady(function(){
     
                          
                               
                                 
                                var tree=new Ext.tree.TreePanel({
                                    renderTo:"kaitree001",
                                    width:1000,
                                    loader:new Ext.tree.TreeLoader({
                                         //dataUrl:'../kaiTree001Data.do'
                                         dataUrl:'kaitree001.txt'
                                    }),
       
                                root:new Ext.tree.AsyncTreeNode({
                                      text:'中国'
                                })
                                   
                                });
                               
                               
                                tree.render();
                               
                             });
                            
   
    </script>
 
   
  </head>
 
  <body>
   <div id="kaitree001"></div>
  </body>
</html>

 

其中kaitree001.txt文件内容(也就是树型数据格式)如下:

 

[
    {text:'01',children:[
        {text:'01-01',leaf:true},
        {text:'01-02',children:[
            {text:'01-02-01',leaf:true},
            {text:'01-02-02',leaf:true}
        ]},
        {text:'01-03',leaf:true}
    ]},
    {text:'02',leaf:true}
]

 

其他:

树节点各个属性的获得,和onclick事件的实现

    tree.on("click",function(node,event) {
                                    //addNewTab();
                                         //var v=node.attributes.text;
                                     var nhref=node.attributes.hrefValue ;
                                     var ntitle=node.attributes.text;
                                     var nid=node.attributes.id;
                                     var nicon=node.attributes.iconCls;
                                    
                                     //alert("内容是---"+"id----"+nid+"href---"+nhref+"-title--"+ntitle+"---icon--"+nicon);
                                     //addNewTab(nhref,ntitle,nicon,nid);
                                     //alert("hrefValue---"+nhref);
                                     addNewTab(node.attributes.hrefValue,node.attributes.text,node.attributes.iconCls,node.attributes.id);
                                    
                                     }
                                     );

 

其中对应的树节点的数据如下:

 {text:'新增SP',id:'addSpId', iconCls :'icon-sp-s-add',hrefValue:'SP/sp_add.html',leaf:true},

 

 

分享到：
| 打包和引入源码
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics