<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Multi-Select (with Drag and Drop) Tree Demo Page</title>
<link rel="stylesheet" href="../../resources/css/ext-all.css" type="text/css" media="screen" />
<link rel="stylesheet" href="column-tree.css" type="text/css" media="screen" />
<style type="text/css">
.x-dd-drag-ghost .x-tree-node-indent, .x-dd-drag-ghost .x-tree-ec-icon {display: inline !important;}
.example {
height: 500px;
width: 400px;
overflow:auto;
margin: 20px;
}
.floatleft {
float: left;
}
#ctesttree {
margin: 20px;
}
H1.explanation {
font-size: 16pt;
}
H3.explanation {
font-size: 14pt;
}
UL.explanation LI {
margin-left: 20px;
list-style-type: disc;
}
.explanation {
clear: both;
margin: 10px;
font-family: sans-serif;
}
code {
white-space: pre;
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="MultiSelectTree-1.1.js"></script>
<script type="text/javascript" src="ColumnNodeUI.js"></script>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
<script type="text/javascript" src="example3.js"></script>
<script type="text/javascript" src="example4.js"></script>
<script type="text/javascript" src="example5.js"></script>
<script type="text/javascript" src="allowContainerDrop.js"></script>
<script type="text/javascript">
//Ext.BLANK_IMAGE_URL = 'clear.gif';
//
// Override for ordering bug in Ext-2.2.1 (and earlier I assume) reported feb 4, 2009
// should be fixed in the next release (can remove then)
//
Ext.override(Ext.tree.TreeDropZone, {
completeDrop : function(de){
var ns = de.dropNode, p = de.point, t = de.target;
if(!Ext.isArray(ns)){
ns = [ns];
}
var n, node, ins = false;
if (p != 'append'){
ins = true;
node = (p == 'above') ? t : t.nextSibling;
}
for(var i = 0, len = ns.length; i < len; i++){
n = ns[i];
if (ins){
t.parentNode.insertBefore(n, node);
}else{
t.appendChild(n);
}
if(Ext.enableFx && this.tree.hlDrop){
n.ui.highlight();
}
}
ns[0].ui.focus();
t.ui.endDrop();
this.tree.fireEvent("nodedrop", de);
}
});
</script>
</head>
<body>
<h1 class="explanation">Multi Select Tree Demo Page</h1>
<p class="explanation">
This is my almost finished implementation of a multiselect tree with working drag and drop.
As far as I can tell it's nearly feature complete and overwrites all current functionality
that relies on selection or dragdata containing only a single node.
</p>
<p class="explanation">
The source is available <a href="MultiSelectTree-1.1.js">here</a>.
</p>
<h3 class="explanation">Table of Contents</h3>
<ul class="explanation">
<li><a href="#Usage">Usage</a></li>
<li><a href="#Notes">Notes</a></li>
<li><a href="#Changelog">Changelog</a></li>
<li><a href="#ComingSoon">Coming Soon</a></li>
<li><a href="#Instructions">Instructions for Drag and Drop</a></li>
<li>
<a href="#Examples">Examples</a>
<ul>
<li><a href="#Example_1">Simple Example 1</a></li>
<li><a href="#Example_2">Simple Example 2: Sorted+appendOnly tree.</a></li>
<li><a href="#Example_3">Two Trees Example 1</a></li>
<li><a href="#Example_4">Two Trees Example 2: MultiSelect and Original Tree</a></li>
<li><a href="#Example_5">Tree Columns Example (fixed)</a></li>
</ul>
</li>
<li><a href="#AllowContainerDrop">allowContainerDrop</a></li>
<li><a href="#CopyNodes">Coping Nodes</a></li>
</ul>
<a name="Usage"/>
<h3 class="explanation">Usage:</h3>
<p class="explanation">1. Add the following CSS to make the floating "drag" version of the tree indent prettily..</p>
<code>
.x-dd-drag-ghost .x-tree-node-indent,.x-dd-drag-ghost .x-tree-ec-icon {display: inline !important;}
</code>
<p class="explanation">1a. If you are using Ext-JS 2.2.1 or earlier you need to add this override! (reported as a bug should be fixed in the next version)</p>
<code>
Ext.override(Ext.tree.TreeDropZone, {
completeDrop : function(de) {
var ns = de.dropNode, p = de.point, t = de.target;
if(!Ext.isArray(ns)) {
ns = [ns];
}
var n, node, ins = false;
if (p != 'append') {
ins = true;
node = (p == 'above') ? t : t.nextSibling;
}
for(var i = 0, len = ns.length; i < len; i++) {
n = ns[i];
if (ins) {
t.parentNode.insertBefore(n, node);
} else {
t.appendChild(n);
}
if(Ext.enableFx && this.tree.hlDrop) {
n.ui.highlight();
}
}
ns[0].ui.focus();
t.ui.endDrop();
this.tree.fireEvent("nodedrop", de);
}
});
</code>
<p class="explanation">2. Instantiate like a normal tree</p>
<code>
var tree = new Ext.ux.MultiSelectTreePanel({
autoScroll:true,
width:400,
height:500,
animate:true,
containerScroll: true,
renderTo: 'target',
ddGroup: 'tree1',
enableDD: true, /* Required for Drag and Drop as of MultiSelectTree v1.1 */
root: new Ext.tree.AsyncTreeNode({
text: 'A Book',
draggable:false,
id:'node0'
}),
loader: new Ext.tree.TreeLoader({
dataUrl:'bookdata.json'
})
});
</code>
<a name="Notes"/>
<h3 class="explanation">Notes:</h3>
<ul class="explanation">
<li>Don't set a custom Selection Model as only the default supports multiple drag and drop</li>
<li>Don't set a custom TreeDragZone as only the default supports multiple drag and drop</li>
<li>Don't set a custom TreeDropZone as only the default supports multiple drag and drop</li>
<li>enableDD config attr is basically ignored.</li>
<li>When reacting to DND events use dragdata.nodes (array) instead of dragdata.node</li>
</ul>
<a name="Changelog">
<h3 class="explanation">Changelog:</h3>
<p class="explanation">
<a href="MultiSelectTree.js">v1.0</a> Initial release
</p>
<p class="explanation">
<a href="MultiSelectTree-1.1.js">v1.1</a>
</p>
<ul class="explanation">
<li>reinstated enableDD, enableDrag, enableDrop config params. *NEEDED FOR DRAG AND DROP*</li>
<li>included onContainerOver and onContainerDrop code (awaiting ExtJS fix)</li>
<li>cleaned up DDGhost generation code to be less hacky (still not ideal)</li>
<li>consolidated compareDocumentPosition code into compareNodeOrder (only works with rendered nodes)</li>
<li>cleaned up select function by above and creating selectNode function.</li>
<li>fixed several lingering postdrag selection bugs</li>
<li>fixed key events to respect shift/ctrl keys</li>
</ul>
<p class="explanation">
To upgrade to v1.1 simply use MultiSelectTree-1.1.js and make sure you include
enableDD, enableDrag or enableDrop for Drag and Drop.
</p>
<a name="ComingSoon"/>
<h3 class="explanation">Coming Soon</h3>
<ul class="explanation">
<li>copyOnDrop, copyOnDrag config attrs for cloning nodes rather
than moving the existing ones. Currently need to clone nodes
in a beforenodedrop listener.</li>
<li>Compatibility fixes for mixing with normal TreePanels.</li>
<li>Code Cleanup (ongoing process)</li>
<li>Better Documentation (ongoing process)</li>
<li>Bug fixes.</li>
<li>More examples.</li>
</ul>
<a name="Instructions"/>
<h3 class="explanation">Instructions for Drag and Drop</h3>
<p class="explanation">
Ctrl-Click to multi select (or equivalent combination)
Shift-Click to range select (tested on Safari 3.1+, Opera 9.5+, Firefox 3, MSIE6-8beta2<br>
</p>
<a name="Examples"/>
<h3 class="explanation">Examples:</h3>
<a name="Example_1"/>
<p class="explanation">
A multi-select drag and drop tree instrument
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
UxMutiDragDropTree.rar (14个子文件)
UxMutiDragDropTree
treetest.json 9KB
ColumnNodeUI.js 4KB
example1.js 499B
example5.js 640B
MultiSelectTree-1.1.js 23KB
allowContainerDrop.js 608B
column-tree.css 1KB
bookdata.json 9KB
example4.js 993B
example2.js 606B
index.html 12KB
nested_data.json 4KB
column-data.json 4KB
example3.js 1KB
共 14 条
- 1
资源评论
- lrfpop2013-11-05用户扩展控件不错,稍微改了点能用
zhouli253
- 粉丝: 15
- 资源: 135
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功