- 浏览: 212194 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
henchong:
如果提示信息全是数字的话,是不会自动换行的,不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻:
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen:
楼主能解释下为啥要用air技术呢,是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren:
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子:
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
ext提供的树本身就有拖拽的功能,也许大部分使用过TreePanel的都知道。可是光是在前台拖来拖去那是空把式不是吗?因此必须获取拖拽的事件才能与后台交互。因此现在就说一下如何获取tree的拖拽事件。
对于要想让tree可以拖拽,那么必须为tree的enableDD属性设置为true。
其实事件最常用的就是nodedrop。eg:tree.on('nodedrop',function(){ …… });
js代码:
//节点可以编辑的树
Ext.namespace('demo');
demo = function(){
this.init();//初始化函数
};
Ext.extend(demo,Ext.util.Observable,{
init:function(){
//创建一个简写
var Tree = Ext.tree;
//添加一个树形面板
this.tree = new Tree.TreePanel({
el:'tree-panel',//将树形添加到一个指定的div中
title:'可编辑的树',
autoScroll:true,
enableDD:true,//是否支持拖拽效果
containerScroll: true,//是否支持滚动条
loader:new Ext.tree.TreeLoader({
dataUrl:'tree-tz-test.json'
})
});
//创建一个根节点
this.root = new Tree.AsyncTreeNode({
text: '木叶村',
draggable:false,
id:'source'
});
//为tree设置根节点
this.tree.setRootNode(this.root);
//渲染树形
this.tree.render();
this.root.expand(true);
/*设置tree的节点放置函数此函数有一个很重要的参数对象e
e对象有三个重要的属性,分别为dropNode,target,point
1.dropNode为在拖动时鼠标抓住的节点
2.target为将要放置在某处的节点
3.point为被放置的状态,分别有append表示添加,above节点的上方,below节点的下方。
*/
this.tree.on('nodedrop',function(e){
if(e.point=='append'){
alert('当前"'+e.dropNode.text+'"被"'+e.target.text+'"录取!');
}else if(e.point=='above'){
alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面!');
}else if(e.point=='below'){
alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面!');
}
});
}
});
//实例化主程序类
Ext.BLANK_IMAGE_URL = 'images/public/s.gif"';
Ext.onReady(function(){
var myDemo = new demo(); //实例化
});
html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可拖拽的树</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="Bookmark" href="favicon.ico" />
<link href="css/default.css" rel="stylesheet" type="text/css">
<!--导入prototype文件 -->
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
</head>
<body>
<!--loading加载 -->
<div id="loadingTab">
<div class="loading-indicator">
<img src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<a href="index.html">可拖拽的树练习</a> -
<span id="loading-yfo"><a href="http://yfoffice.net.cn" target="_blank">忆凡工作室</a></span><br />
<span id="loading-msg">加载样式表和图片...</span>
</div>
</div>
<br>
<h1>拖拽tree的综合练习</h1>
<div id="tree-panel" style=" margin:30px; width:300px; height:400px"></div>
<link href="js/ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载JSUI组建...';</script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>
<script type="text/javascript" src="js/tree-tz-test.js"></script>
<script type="text/javascript">
$('loading-msg').innerHTML = '初始化完毕!!';
Ext.get('loadingTab').fadeOut({remove: true});//让加载标签消失
</script>
</body>
</html>
本例子的json:
[
{
"text":"卡卡西班",
"id":"01",
"allowDrag":false,
"children":[
{"text":"小樱","id":"0101","leaf":true,"allowDrag":true},
{"text":"鸣人","id":"0102","leaf":true,"allowDrag":true},
{"text":"佐助","id":"0103","leaf":true,"allowDrag":true}
]
},
{
"text":"凯班",
"id":"02",
"allowDrag":false,
"children":[
{"text":"小李","id":"0201","leaf":true,"allowDrag":true},
{"text":"宁次","id":"0202","leaf":true,"allowDrag":true},
{"text":"天天","id":"0203","leaf":true,"allowDrag":true}
]
}
]
看看上面json可以看出,我为节点设置了一个allowDrag属性,如果该属性为false,表示这个节点不可以拖动,否则可以.
发表评论
-
extjs+air开发
2009-06-24 21:41 2992一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1834该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 752当使用了ExtJs后,脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1153CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1164其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1613使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4559巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1543tab在ext里很常用,在点开N个tab后,是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3251<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1176ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2554page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1548本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例 ... -
带分页的表格
2009-01-09 13:43 1011主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2542<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2853<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 808对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类,构建方便的grid操作
2009-01-09 13:13 1410在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1944<script> Ext.o ... -
可直接编辑节点的tree
2009-01-09 12:03 1681其实代码并不是很复杂,只是在原有的树形添加一个TreeEdit ... -
Checkbox与RadioGroup的使用方法
2009-01-09 12:03 7053Ext提供的Checkbox与Radio, ...
相关推荐
对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖:npm i -S vuedraggable@next
VB演示树控菜单各个Tree节点的添加和拖动删除功能,测试时,请根据右侧的选项操作,可从数据库中载入TreeView、增加一个节点,清空TreeView、删除节点等功能,在实际应用中,这个技巧相当实用。
独立打包,保证可解压,内含大量源码,网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、...
独立打包,保证可解压,内含大量源码,网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、...
独立打包,保证可解压,内含大量源码,网上搜集而来。一共10几包,每个包几十兆。 Visual.C++编程技巧精选500例源代码 内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序...
独立打包,保证可解压,内含大量源码,网上搜集而来。一共10几包,每个包几十兆。 Visual.C++编程技巧精选500例源代码 内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序...
独立打包,保证可解压,内含大量源码,网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、...
.NET 2.0 泛型在实际开发中的一次小应用 C#2.0 Singleton 的实现 .Net Framwork 强类型设计实践 通过反射调用類的方法,屬性,字段,索引器(2種方法) ASP.NET: State Server Gems 完整的动态加载/卸载程序集的解决方案 ...
估计在不久之后,也可以向VB,C#一样,通过可视化工具拖拽方式即可轻松开发Web应用。 ExtJs在发展过程中不仅一步步地巩固着自己在HTML、CSS、JavaScript领域无可比拟的优势,而且已经开始向相关领域发展扩张。如从...
RicoDrag 使用Open Rico实现可拖拽的层 WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏 第16章(/C16/) 留言板源代码 所有留言板实例的源代码 数据库备份 留言板数据所需要的数据库 ...
-实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语翻译(feedback:vbelyaev)。 +2010-06-30 v2.3.1 -ExtAspNet控件将不在依赖ViewState,...
DragandDropLabel 拖动编程示例。 DragandDropSimpleDemo 文件拖放示例。 GetFocus 获取控件焦点。 KeyInputDemo 处理键盘事件示例。 LatBox 依赖属性示例。 LogicalTree 逻辑树示例。 ...
主要是CIocpSrv"伪类",实际上还是调用的DLL, IOCP完成端口 [1]---选择 - Select [2]异步选择 - WSAAsyncSelect [3]---事件选择 - WSAEventSelect [4]---重叠I [5]---完成端口 IP所在地查询器 如题。 jpeglib_demo...
2、开发注重交互的简单应用程序可以使用对话框为基础的窗口,如果文件读写简单这可利用CFile进行。 3、开发注重交互并且文件读写复杂的的简单应用程序可以利用以CFormView为基础视的单文档视结构。 4、利用对话框...
ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确...