Ext DataView自身拖拽

Ext的examples中有组件与组件之间的数据拖拽,可就是没找到组件自身中的数据拖拽,找到一个自身拖拽的还是个TreePanel,想着实现方式应该是一样的,可以移植到DataView上去,看了后才发现是风马牛不相及。
Ext DataView分页+过滤+查询+拖拽一文中我需要这样的功能去实现排序,但是现在出现了一个BUG,那就是只有第一次拖拽的时候可以实现排序,而且被第一个拖进去的数据将会始终排在最后,所以现在需要它自身里面的数据可以拖拽,相互调换位置。
拖拽前:

拖拽后:

工作中要效率,所以能拿来直接用就拿来直接用,没必要自己花时间去想解决方案,学习的话就得先自己想办法了。
在DataView的render事件中调用如下函数即可。

function onDataViewRender(v){
  //创建拖拽对象
  var dd = new Ext.dd.DragDrop(v.el);
  //存储被拖拽的节点
  var dragData = null;
  dd.onMouseDown = function(e) {
 
          var t,idx,record;
          try {
              t = e.getTarget(v.itemSelector);
              idx = v.indexOf(t);
              record = v.getStore().getAt(idx);
 
              // Found a record to move
              if (t && record) {
                  dragData = {
                      origIdx : idx,
                      lastIdx : idx,
                      record  : record
                  };
                  return true;
              }
          } catch (ex) { dragData = null; }
          return false;
      },
  //开始拖拽
  dd.startDrag = function(x, y) {
      if (!dragData) { return false; }
      Ext.fly(v.getNode(dragData.origIdx)).addClass('thumb');
      v.el.addClass('thumb-wrap-selected');
  },
  //结束拖拽
  dd.endDrag = function(e) {
      if (!dragData) { return true; }
      Ext.fly(v.getNode(dragData.lastIdx)).removeClass('thumb');
      v.el.removeClass('thumb-wrap-selected');
      return true;
  },
 
  dd.onDrag = function(e) {
      var t,idx,record,data = dragData;
      if (!data) { return false; }
      try {
          t = e.getTarget(v.itemSelector);
          idx = v.indexOf(t);
          record = v.getStore().getAt(idx);
          if (idx === data.lastIdx) { return true; }
 
          //将数据插入到新的位置
          if (t && record) {
              data.lastIdx = idx;
              v.getStore().remove(data.record);
              v.getStore().insert(idx, [data.record]);
              Ext.fly(v.getNode(idx)).addClass('thumb');
              return true;
          }
      } catch (ex) { return false; }
      return false;
  }
}

除非另有声明,本站遵循【署名-非商业性使用-相同方式共享 3.0 共享协议】授权。

转载原创文章请注明,转载自:Neeke[http://www.ineeke.com]

本文链接: http://www.ineeke.com/archives/ext-dataview-self-drag-drop/

2009年7月14日 | 归档于 ExtJS | 2 条评论
  1. 123
    2010年3月10日 14:05 | #1

    楼主好,我做了个Ext.DataView图片浏览,图片可以拖拽,上下左右移,放大缩小和图片还原,能多选,但图片不样大,多选后,点击还原,所有图片都变成第一个被选的图片尺寸了,请问怎么解决呢

    • 2010年3月11日 09:29 | #2

      我没太看明白你的意思,不过按理来说是所有的图片大小一致是正确的,这个是在CSS里面定义好的,DataView中所有的图片都应用该样式。
      如果你是要图片显示时按各自的尺寸显示,那么去掉其所使用的样式应该就可以了。

发表评论

XHTML: 您可以使用这些标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
n:-zy n:-zr n:-zan n:-xf n:-wx n:-tz n:-tt n:-ts n:-sy n:-st n:-ss n:-sk n:-qd n:-pz n:-lh n:-kun n:-ku n:-hx n:-hd n:-gt n:-gg n:-bz

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!