EXTjs 拖动的应用，以及表格间行的拖动

最新推荐文章于 2023-04-16 00:35:51 发布

Hainan Chen

最新推荐文章于 2023-04-16 00:35:51 发布

阅读量4.2k

点赞数 1

分类专栏： Extjs 文章标签： extjs function table stylesheet validation border

本文链接：https://blog.csdn.net/hainan89/article/details/5957465

版权

Extjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这阵子在学习ext，第一感觉没jquery顺手！

但是随着学习的升入，不禁感慨ext之强大啊！

倒弄了几天的dd，终于有所收获，先记录一下，以备以后回顾，也共大家一同学习！

Ext 的grid功能确实强悍，但有的时候也显得有点杀鸡用牛刀的感觉，在加上ext的panel风格，

随便一个小的应用，代码量就不敢恭维，借助，ext的dd类，我们可以将表格变得更加的人性化，更加的便于操作，而又省去了grid的繁

琐，于是又了下面的学习实例！

总结起来，要实现拖动首先要有拖动的源，也就是下面的DragSource，再有就是要有拖动的目的地DropTarget，两者依靠group属性联系到一起。

再有就是在拖动的过程中对各个拖动事件的状态阶段的一些事件的处理，ext都提供了划分的很细的接口供我们个性化的处理！

这里也用到了很多，在代码中都有注释！

主要要注意的就是this的作用域，以及getEL方法获得是一个dom对象！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" mce_href="extjs/resources/css/ext-all.css"> <mce:script type="text/javascript" src="/extjs/adapter/ext/ext-base.js" mce_src="extjs/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="/extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script> <mce:script type="text/javascript" src="/extjs/build/locale/ext-lang-zh_CN.js" mce_src="extjs/build/locale/ext-lang-zh_CN.js"></mce:script> <mce:style></mce:style><style mce_bogus="1"> .target_div{ width:500px; height:200px; border:1px solid red; } </style> </head> <body> <mce:script type="text/javascript"></mce:script> <table width="500" border="1" id="drag_table"> <tr> <td>111</td><td>222</td><td>333</td><td>444</td> </tr> <tr> <td>555</td><td>666</td><td>777</td><td>888</td> </tr> <tr> <td>000</td><td>999</td><td>121</td><td>232</td> </tr> <tr> <td>343</td><td>454</td><td>565</td><td>676</td> </tr> </table> <br> <hr> <br> <table width="500" border="1" id="drag_table_target"> <tr> <td>AAA</td><td>BBB</td><td>CCC</td><td>DDD</td> </tr> <tr> <td>EEE</td><td>FFF</td><td>GGG</td><td>HHH</td> </tr> <tr> <td>III</td><td>JJJ</td><td>KKK</td><td>LLL</td> </tr> <tr> <td>MMM</td><td>NNN</td><td>OOO</td><td>PPP</td> </tr> </table> <p>拖动后这里显示当前被拖动的这一行的区域</p> <div id="show_area"></div> <p>拖动后这里显示真个target区域的数据</p> <div id="show_all_target_area"></div> </body> </html>

Hainan Chen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
EXTjs 拖动的应用，以及表格间行的拖动

<br />这阵子在学习ext，第一感觉没jquery顺手！<br /> <br />但是随着学习的升入，不禁感慨ext之强大啊！<br /> <br />倒弄了几天的dd，终于有所收获，先记录一下，以备以后回顾，也共大家一同学习！<br /> <br />Ext 的grid功能确实强悍，但有的时候也显得有点杀鸡用牛刀的感觉，在加上ext的panel风格，<br /> <br />随便一个小的应用，代码量就不敢恭维，借助，ext的dd类，我们可以将表格变得更加的人性化，更加的便于操作，而又省去了grid的繁
复制链接

扫一扫