Содержание

1 Check Tree
2 Column tree
3 ColumnTree Example
- 3.1 Drop anything into the tree
- 3.2 Two trees

Check Tree

   <source lang="html4strict">

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   var tree = new Ext.tree.TreePanel({
       renderTo:"tree-div",
       title: "My Task List",
       height: 300,
       width: 400,
       useArrows:true,
       autoScroll:true,
       animate:true,
       enableDD:true,
       containerScroll: true,
       rootVisible: false,
       frame: true,
       root: {
           nodeType: "async"
       },
       
       // auto create TreeLoader
       dataUrl: "ext-3.0.0/examples/tree/check-nodes.json",
       
       listeners: {
           "checkchange": function(node, checked){
               if(checked){
                   node.getUI().addClass("complete");
               }else{
                   node.getUI().removeClass("complete");
               }
           }
       },
       
       buttons: [{
           text: "Get Completed Tasks",
           handler: function(){
               var msg = "", selNodes = tree.getChecked();
               Ext.each(selNodes, function(node){
                   if(msg.length > 0){
                       msg += ", ";
                   }
                   msg += node.text;
               });
               Ext.Msg.show({
                   title: "Completed Tasks", 
                   msg: msg.length > 0 ? msg : "None",
                   icon: Ext.Msg.INFO,
                   minWidth: 200,
                   buttons: Ext.Msg.OK
               });
           }
       }]
   });
   tree.getRootNode().expand(true);

}); </script> </head> <body>

</body> </html>

 </source>

Column tree

   <source lang="html4strict">

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/ColumnNodeUI.css" />
   <script type="text/javascript" src="ext-3.0.0/examples/ux/ColumnNodeUI.js"></script>

<script> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   var tree = new Ext.ux.tree.ColumnTree({
       width: 550,
       height: 300,
       rootVisible:false,
       autoScroll:true,
       title: "Example Tasks",
       renderTo: Ext.getBody(),
       columns:[{
           header:"Task",
           width:330,
           dataIndex:"task"
       },{
           header:"Duration",
           width:100,
           dataIndex:"duration"
       },{
           header:"Assigned To",
           width:100,
           dataIndex:"user"
       }],
       loader: new Ext.tree.TreeLoader({
           dataUrl:"ext-3.0.0/examples/tree/column-data.json",
           uiProviders:{
               "col": Ext.ux.tree.ColumnNodeUI
           }
       }),
       root: new Ext.tree.AsyncTreeNode({
           text:"Tasks"
       })
   });

}); </script> </head> <body>

ColumnTree Example

</body> </html>

 </source>

Drop anything into the tree

   <source lang="html4strict">

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/DataView-more.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.QuickTips.init();
   // Album toolbar
   var newIndex = 3;
   var tb = new Ext.Toolbar({
       items:[{
           text: "New Album",
           iconCls: "album-btn",
           handler: function(){
               var node = root.appendChild(new Ext.tree.TreeNode({
                   text:"Album " + (++newIndex),
                   cls:"album-node",
                   allowDrag:false
               }));
               tree.getSelectionModel().select(node);
               setTimeout(function(){
                   ge.editNode = node;
                   ge.startEdit(node.ui.textNode);
               }, 10);
           }
       }]
   });
   // set up the Album tree
   var tree = new Ext.tree.TreePanel({
        // tree
        animate:true,
        enableDD:true,
        containerScroll: true,
        ddGroup: "organizerDD",
        rootVisible:false,
        // layout
        region:"west",
        width:200,
        split:true,
        // panel
        title:"My Albums",
        autoScroll:true,
        tbar: tb,
        margins: "5 0 5 5"
   });
   var root = new Ext.tree.TreeNode({
       text: "Albums",
       allowDrag:false,
       allowDrop:false
   });
   tree.setRootNode(root);
   root.appendChild(
       new Ext.tree.TreeNode({text:"Album 1", cls:"album-node", allowDrag:false}),
       new Ext.tree.TreeNode({text:"Album 2", cls:"album-node", allowDrag:false}),
       new Ext.tree.TreeNode({text:"Album 3", cls:"album-node", allowDrag:false})
   );
   // add an inline editor for the nodes
   var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {
       allowBlank:false,
       blankText:"A name is required",
       selectOnFocus:true
   });
   // Set up images view
   var view = new Ext.DataView({
       itemSelector: "div.thumb-wrap",
       style:"overflow:auto",
       multiSelect: true,
       plugins: new Ext.DataView.DragSelector({dragSafe:true}),
       store: new Ext.data.JsonStore({
           url: "../view/get-images.php",
           autoLoad: true,
           root: "images",
           id:"name",
           fields:[
               "name", "url",
               {name: "shortName", mapping: "name", convert: shortName}
           ]
       }),
       tpl: new Ext.XTemplate(
           "<tpl for=".">",

"

", "

", "{shortName}

",

           "</tpl>"
       )
   });
   var images = new Ext.Panel({
       id:"images",
       title:"My Images",
       region:"center",
       margins: "5 5 5 0",
       layout:"fit",
       
       items: view
   });
   var layout = new Ext.Panel({
       layout: "border",
       width:650,
       height:400,
       items: [tree, images]
   });
   layout.render("layout");
   var dragZone = new ImageDragZone(view, {containerScroll:true,
       ddGroup: "organizerDD"});

});

/**

* Create a DragZone instance for our JsonView
*/

ImageDragZone = function(view, config){

   this.view = view;
   ImageDragZone.superclass.constructor.call(this, view.getEl(), config);

}; Ext.extend(ImageDragZone, Ext.dd.DragZone, {

   // We don"t want to register our image elements, so let"s 
   // override the default registry lookup to fetch the image 
   // from the event instead
   getDragData : function(e){
       var target = e.getTarget(".thumb-wrap");
       if(target){
           var view = this.view;
           if(!view.isSelected(target)){
               view.onClick(e);
           }
           var selNodes = view.getSelectedNodes();
           var dragData = {
               nodes: selNodes
           };
           if(selNodes.length == 1){
               dragData.ddel = target;
               dragData.single = true;
           }else{
               var div = document.createElement("div"); // create the multi element drag "ghost"
               div.className = "multi-proxy";
               for(var i = 0, len = selNodes.length; i < len; i++){
                   div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
                   if((i+1) % 3 == 0){
                       div.appendChild(document.createElement("br"));
                   }
               }
               var count = document.createElement("div"); // selected image count
               count.innerHTML = i + " images selected";
               div.appendChild(count);
               
               dragData.ddel = div;
               dragData.multi = true;
           }
           return dragData;
       }
       return false;
   },
   // this method is called by the TreeDropZone after a node drop
   // to get the new tree node (there are also other way, but this is easiest)
   getTreeNode : function(){
       var treeNodes = [];
       var nodeData = this.view.getRecords(this.dragData.nodes);
       for(var i = 0, len = nodeData.length; i < len; i++){
           var data = nodeData[i].data;
           treeNodes.push(new Ext.tree.TreeNode({
               text: data.name,
               icon: "../view/"+data.url,
               data: data,
               leaf:true,
               cls: "image-node"
           }));
       }
       return treeNodes;
   },
   
   // the default action is to "highlight" after a bad drop
   // but since an image can"t be highlighted, let"s frame it 
   afterRepair:function(){
       for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
           Ext.fly(this.dragData.nodes[i]).frame("#8db2e3", 1);
       }
       this.dragging = false;    
   },
   
   // override the default repairXY with one offset for the margins and padding
   getRepairXY : function(e){
       if(!this.dragData.multi){
           var xy = Ext.Element.fly(this.dragData.ddel).getXY();
           xy[0]+=3;xy[1]+=3;
           return xy;
       }
       return false;
   }

}); // Utility functions function shortName(name){

   if(name.length > 15){
       return name.substr(0, 12) + "...";
   }
   return name;

}; </script>

</body> </html>

 </source>

Two trees

   <source lang="html4strict">

<head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

var TreeTest = function(){

   // shorthand
   var Tree = Ext.tree;
   
   return {
       init : function(){
           // yui-ext tree
           var tree = new Tree.TreePanel({
               animate:true, 
               autoScroll:true,
               loader: new Tree.TreeLoader({dataUrl:"get-nodes.php"}),
               enableDD:true,
               containerScroll: true,
               border: false,
               dropConfig: {appendOnly:true}
           });
           
           // add a tree sorter in folder mode
           new Tree.TreeSorter(tree, {folderSort:true});
           
           // set the root node
           var root = new Tree.AsyncTreeNode({
               text: "Ext JS", 
               draggable:false, // disable root node dragging
               id:"src"
           });
           tree.setRootNode(root);
           
           // render the tree
           tree.render("tree");
           
           root.expand(false, /*no anim*/ false);
           
           //-------------------------------------------------------------
           
           // YUI tree            
           var tree2 = new Tree.TreePanel({
               animate:true,
               autoScroll:true,
               //rootVisible: false,
               loader: new Ext.tree.TreeLoader({
                   dataUrl:"get-nodes.php",
                   baseParams: {lib:"yui"} // custom http params
               }),
               containerScroll: true,
               border: false,
               enableDD:true,
               dropConfig: {appendOnly:true}
           });
           
           // add a tree sorter in folder mode
           new Tree.TreeSorter(tree2, {folderSort:true});
           
           // add the root node
           var root2 = new Tree.AsyncTreeNode({
               text: "My Files", 
               draggable:false, 
               id:"yui"
           });
           tree2.setRootNode(root2);
           tree2.render("tree2");
           
           root2.expand(false, /*no anim*/ false);
       }
   };

}(); Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true); </script> </head> <body> </body>

 </source>

JavaScript DHTML/Ext JS/Tree

Содержание

Check Tree

Column tree

ColumnTree Example

Drop anything into the tree

Two trees

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты