YUI缁?浠朵腑锛???涓ゆ５????绀轰?锛?涓?涓????ㄦ???峰???版????锛?涓?妫垫????杩???????json??浠舵?ヨ?峰???版????锛??板?绀轰???涓?浜?娉ㄩ??锛?璁板?濡?涓?锛?
two-tree.js??浠讹???瀹瑰?涓?锛?
var tree;
var root;
var child;
var TreeTest = function(){
??? // shorthand
??? var Tree = Ext.tree;
???
??? return {
??????? init : function(){
??????????? // yui-ext tree
??????????? var tree = new Tree.TreePanel('tree', {?????????????????? //tree??id,涓?椤甸?㈢??寮??ㄧ?稿?瑰?
??????????????? animate:true,
??????????????? loader: new Ext.tree.TreeLoader({
??????????????????? dataUrl:'Tree1',????????????????????????????????? //Tree1姝ゅ?????eb.xml涓?瀹?涔???Servlet,涔???浠ユ??tree.jsp绛?
??????????????????? baseParams: {flag:'tree1',selected:'0'}???????? //?瀹?涔??????帮?杩?????涓や釜???帮?涓?涓?lag,涓?涓?elected
??????????????? }),
??????????????? enableDD:true,
??????????????? containerScroll: true,
??????????????? dropConfig: {appendOnly:true}
??????????? });
????????????
??????????????????????????????
??????????? // set the root node
?????????????????????
??????????? var root = new Tree.AsyncTreeNode({
??????????????? text: "??娴?璇?",??????????????????????????????????????????????????? //?硅???规?剧ず????瀹???????????????? draggable:false, // disable root node dragging
??????????????? id:'1',
??????????????? cls: 'folder'????????????????????????????
??????????? });
??????????? tree.setRootNode(root);
??????????? // render the tree
??????????? tree.render();
???????????
??????????? //root.expand(false, false);
???????????
??????????? //-------------------------------------------------------------
???????????
??????????? // YUI tree???????????
??????????? var tree2 = new Tree.TreePanel('tree2', {
??????????????? animate:true,
??????????????? //rootVisible: false,
??????????????? loader: new Ext.tree.TreeLoader({
??????????????????? dataUrl:'tmp1.json',
??????????????????? 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: 'Hello EXT',
??????????????? draggable:false,
??????????????? id:'1'
??????????? });
??????????? tree2.setRootNode(root2);??? //璁剧疆?硅??????????????? tree2.render();???????????????????????? //杈??烘??
???????????
?????????? // root2.expand(false, false);?? 灞?寮?锛?
??????? }
??? };
}();
//Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
Ext.onReady(TreeTest.init,TreeTest,true);????????????? //?ㄩ〉??腑?剧ず锛?????涓??芥?剧ず?ㄩ〉??腑
?
?
tmp1.json??浠跺??瀹瑰?涓?锛?
[{'text':'?版??搴?搴???,'id' :'1','treeDiv'? :'testTree','cls' :'folder'},{'text':'绉诲?ㄥ???','id'? :'2','treeDiv'?? :'testTree','cls' :'folder'}]
?
two-tree.html??浠讹???瀹瑰?涓? 锛?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Drag and Drop between 2 TreePanels</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
??? <script type="text/javascript" src="yui-utilities.js"></script>
??? <script type="text/javascript" src="ext-yui-adapter.js"></script>
???
??? <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="resources/css/ext-all.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
??? <link rel="stylesheet" type="text/css" href="resources/css/ytheme-aero.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="examples.css" target="_blank" rel="external nofollow" />
<style type="text/css">
??? #tree, #tree2 {
??? ?float:left;
??? ?margin:20px;
??? ?border:1px solid #c3daf9;
??? ?width:250px;
??? ?height:300px;
??? ?overflow:auto;
??? }
??? .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>
<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" target="_blank" rel="external nofollow" >two-trees.js</a>.</p>
<div id="tree"></div>
<div id="tree2"></div>
</body>
</html>
![AS3 Signals之入门篇[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)