丄諦啲仇魜ヤ
          如 果 敵 人 讓 你 生 氣 , 那 說 明 你 沒 有 勝 他 的 把 握!
          posts - 6,comments - 56,trackbacks - 1
             
          最近項目做完了 沒事 就來學(xué)習(xí)學(xué)習(xí)EXT JS   ,不過 大部分代碼是從網(wǎng)上copy 過來 學(xué)習(xí)的

          我最先學(xué)會的就是建樹了 ,EXT JS 很強(qiáng)大 ,不過看的我頭也大了,能建個樹我就很高興了,以后基礎(chǔ)知識慢慢學(xué)習(xí)吧 ,最主要是能看見效果出來

          先建個tree.jsp內(nèi)容如下:
           
          <%@ page language="java"  pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          <html>
            <head>
              <title>My JSP 'tree.jsp' starting page</title>
              <!-- ext類庫 -->
              <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
              <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
              <!-- 本頁的功能代碼 -->
              <script type="text/javascript" src="tree.js"></script>
           <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
           
            </head>
            <body>
                          <!-- 要有一定高度 EXT 2.0已經(jīng)改了 不然看不見的  -->
           <div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div> 
            </body>
          </html>

          tree.js的內(nèi)容如下:
          Ext.onReady(function(){
               /*
           var tree = new Ext.tree.TreePanel({
                      el:'tree',                  //綁定 頁面上的<div id='tree'>因為樹要在這里顯示
                      useArrows:true,        //文件夾前顯示的圖標(biāo)改變了不在是+號了
                      autoScroll:true,        //True to use overflow:'auto' on the panel's body element 
                       animate:true,        //開啟動畫效果
                       enableDD:true,       //實現(xiàn)拖拽
                                                   //是否顯示跟節(jié)點 rootVisible:false,
                      containerScroll: true,
                //利用Ext.tree.TreeLoader和后臺進(jìn)行數(shù)據(jù)交換(ajax) ,這里用了一個記事本做的名字叫tree.txt
                     loader: new Ext.tree.TreeLoader({dataUrl: 'tree.txt'})
            });
            //TreeNode是不支持ajax的,我們需要把根節(jié)點換成  AsyncTreeNode(可以動態(tài)的加載數(shù)據(jù))
             var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});  
              tree.setRootNode(root);//將樹的根節(jié)點放到樹的面板中
              tree.render();  // 開始對樹進(jìn)行  渲染
              root.expand();//
           
           */
           
           

               var Tree = Ext.tree;
                  var root=new Tree.TreeNode({
                         id:'0',
                         text:'Root',
                         draggable:false //不允許拖拽
                                                //icon:'im2.gif',//自定義節(jié)點圖標(biāo)

                  });
                  var node1=new Tree.TreeNode({id:'1',text:'node1'});
                  var node2=new Tree.TreeNode({id:'2',text:'node2'});
                  //搞個有超鏈接的葉子   // hrefTarget:'_blank'   新窗口打開鏈接
               var node11=new Tree.TreeNode({id:'11',href:'test.jsp',text:'右鍵單擊我',leaf:true});  
               node1.appendChild(node11);//添加一個葉子
                var node21=new Tree.TreeNode({id:'21',text:'請左擊我',leaf:true});
                var node22=new Tree.TreeNode({id:'22',text:'node22',leaf:true});
                  var node4=new Tree.AsyncTreeNode({
                         id:'4',
                         text:'node4',
                         leaf:false,
                         loader:new Tree.TreeLoader({dataUrl:'tree.txt'})});
                  node2.appendChild([node21,node22]);
                  root.appendChild([node1,node2,node4]);
                  var treePanel=new Tree.TreePanel({
                           el:'tree',
                           useArrows:true,
                           autoScroll:true,
                           animate:true,
                           enableDD:true,
                          //是否顯示跟節(jié)點 rootVisible:false,
                           containerScroll: true});
                  treePanel.setRootNode(root);
                  treePanel.render();
                  root.expand();





             //-----------------其他對我來說牛逼的效果-----------------------------//

             //增加點擊事件

                   node21.on('click',function(node){
                    alert('我是:"'+node.text+'",我的id是:"'+node.id+'"');//這里增加你所需要的點擊事件
               });

          //定義右鍵菜單
               var rightClick = new Ext.menu.Menu({
                  id :'rightClickCont',
                  items : [{
                      id:'rMenu1',
                      text : '菜單1',
                      //增加菜單點擊事件
                      handler:function (){
                                alert('TMD點我干嘛!');
                              }
                  }, {
                      id:'rMenu2',
                      text : '菜單2',
                      //增加鏈接
                       href:'xx.jsp'
                  }, {
                      id:'rMenu3',
                      text : '菜單3'
                  }]
               });

               //增加右鍵點擊事件
               node11.on('contextmenu',function(node,event){//聲明菜單類型
                    event.preventDefault();
                    rightClick.showAt(event.getXY());//取得鼠標(biāo)點擊坐標(biāo),展示菜單
               });       

           



          });

             
           下面是 tree.txt的內(nèi)容
          [
              {text:'01',children:[
                  {text:'01-01葉子',href:'test.jsp',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}
          ]



          下面就是顯示的結(jié)果








          posted on 2008-05-14 21:48 Crying 閱讀(966) 評論(0)  編輯  收藏 所屬分類: EXT2.0

          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 寿宁县| 博客| 武汉市| 渭源县| 达孜县| 荣昌县| 乌兰察布市| 西宁市| 易门县| 大安市| 虎林市| 通江县| 毕节市| 曲周县| 洮南市| 阿图什市| 碌曲县| 开阳县| 重庆市| 信宜市| 六盘水市| 商河县| 金昌市| 高要市| 交城县| 隆安县| 平山县| 龙南县| 包头市| 义马市| 科尔| 清水河县| 阜南县| 益阳市| 合水县| 札达县| 道孚县| 项城市| 井陉县| 乃东县| 嵩明县|