投放本站广告请联系:
extjscn#126.com
多棵树(Multiple trees)
演示(demo)地址在文章最后.
效果图如下:
主要文件two-trees.html,two-trees.js。
two-trees.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Drag and Drop between 2 TreePanels</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="two-trees.js"></script> <!-- Common Styles for the examples --> <link rel="stylesheet" type="text/css" href="../examples.css" /> <style type="text/css"> #tree, #tree2 { float:left; margin:20px; border:1px solid #c3daf9; width:250px; height:300px; } .folder .x-tree-node-icon{ background:transparent url(../../resources/images/default/tree/folder.gif); } .x-tree-node-expanded .x-tree-node-icon{ background:transparent url(../../resources/images/default/tree/folder-open.gif); } </style> </head> <body> <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES --> <h1>Drag and Drop betweens two TreePanels</h1> <p>The TreePanels have a TreeSorter applied in "folderSort" mode.</p> <p>Both TreePanels are in "appendOnly" drop mode since they are sorted.</p> <p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p> <p>The data for this tree is asynchronously loaded with a JSON TreeLoader.</p> <p>The js is not minified so it is readable. See <a href="two-trees.js">two-trees.js</a>.</p> <div id="tree"></div> <div id="tree2"></div> </body> </html>
two-trees.js
/* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * * * http://extjs.com/license */ var TreeTest = function(){ // shorthand var Tree = Ext.tree; return { init : function(){ // yui-ext tree var tree = new Tree.TreePanel({ el:'tree', animate:true, autoScroll:true, loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}), enableDD:true, containerScroll: true, 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:'source' }); tree.setRootNode(root); // render the tree tree.render(); root.expand(false, /*no anim*/ false); //------------------------------------------------------------- // YUI tree var tree2 = new Tree.TreePanel({ el:'tree2', animate:true, autoScroll:true, //rootVisible: false, loader: new Ext.tree.TreeLoader({ dataUrl:'get-nodes.php', baseParams: {lib:'yui'} // custom http params }), containerScroll: true, 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(); root2.expand(false, /*no anim*/ false); } }; }(); Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
get-nodes.php
<?php // from php manual page function formatBytes($val, $digits = 3, $mode = "SI", $bB = "B"){ //$mode == "SI"|"IEC", $bB == "b"|"B" $si = array("", "K", "M", "G", "T", "P", "E", "Z", "Y"); $iec = array("", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi", "Yi"); switch(strtoupper($mode)) { case "SI" : $factor = 1000; $symbols = $si; break; case "IEC" : $factor = 1024; $symbols = $iec; break; default : $factor = 1000; $symbols = $si; break; } switch($bB) { case "b" : $val *= 8; break; default : $bB = "B"; break; } for($i=0;$i<count($symbols)-1 && $val>=$factor;$i++) $val /= $factor; $p = strpos($val, "."); if($p !== false && $p > $digits) $val = round($val); elseif($p !== false) $val = round($val, $digits-$p); return round($val, $digits) . " " . $symbols[$i] . $bB; } $dir = isset($_REQUEST['lib'])&&$_REQUEST['lib'] == 'yui' ? '../../../' : '../../'; $node = isset($_REQUEST['node'])?$_REQUEST['node']:""; if(strpos($node, '..') !== false){ die('Nice try buddy.'); } $nodes = array(); $d = dir($dir.$node); while($f = $d->read()){ if($f == '.' || $f == '..' || substr($f, 0, 1) == '.')continue; $lastmod = date('M j, Y, g:i a',filemtime($dir.$node.'/'.$f)); if(is_dir($dir.$node.'/'.$f)){ $qtip = 'Type: Folder<br />Last Modified: '.$lastmod; $nodes[] = array('text'=>$f, 'id'=>$node.'/'.$f/*, 'qtip'=>$qtip*/, 'cls'=>'folder'); }else{ $size = formatBytes(filesize($dir.$node.'/'.$f), 2); $qtip = 'Type: JavaScript File<br />Last Modified: '.$lastmod.'<br />Size: '.$size; $nodes[] = array('text'=>$f, 'id'=>$node.'/'.$f, 'leaf'=>true/*, 'qtip'=>$qtip, 'qtipTitle'=>$f */, 'cls'=>'file'); } } $d->close(); echo json_encode($nodes); ?>
注意例子中开头是<?,有时候PHP不会解析,把它变为 <?php 即可。
- 关键字:
- 要发表评论,请先登录