sencha touch listItem 拖拽处理

因为ListItem 是从store 中取到的一行行数据，不太好进行拖拽处理，

上面的Control

control : {
			msg : {
				initialize : 'msgListInitalize',
				itemtouchstart: 'onItemtouchstart'
			},

这是页面初始化时候的控制

view.element.on({
            dragstart: {
		        fn: this.onDragStart,
		        order: 'before',
		        delegate :'.list-item',
		        scope:me
            },
            dragend: {
		        fn: this.onDragEnd,
		        delegate :'.list-item',
		        scope:me
            }
		});

 /**
     * 点击item绑定拖拽配置
     */
    onItemtouchstart: function( self, index, target, record, e, eOpts ) {
    	if (target.getDraggable() == null) {
    		var objDomMore = Ext.get(target.element.query('.more')).last().getWidth();
			target.setDraggable({direction:'horizontal',
	              constraint: {
	                min: { x: -objDomMore, y: 0 },
	                max: { x: 0, y: 0 }
	              }});
    	}
        var listitems = self.getViewItems();
        Ext.each(listitems,function(obj) { // 未被点击item的拖拽配置去除
		    if (obj != target)
		    	obj.setDraggable(null);
		})
    },
    
    onDragStart: function(self, e, dom1, dom2, eOpts) {
    	var axis={};
		axis.start={x:self.previousX,y:self.previousY};
		axis.move={x:self.pageX,y:self.pageY};
		axis.abs={x:Math.abs(self.pageX-self.previousX),y:Math.abs(self.pageY-self.previousY)}
		
    	var obj = Ext.get(self.getTarget());
    	var obj1 = obj.parent().parent();
    	var objEc = Ext.getCmp(obj1.getId());
    	var list = this.getMsg();
    	var scrolly = list.getScrollable().getIndicators().y;
    	var domListItem = dom1.parentNode.parentNode;
    	var objDomMore = Ext.get(domListItem.querySelector('.more')).getWidth();
    	
    	if (objDomMore == 0) {// 如果没有操作栏，则去除拖拽行为
    		objEc.setDraggable(null);
    		return false;
    	}
    	/** 如果有折叠部分内容让其全部显示则不能拖动 */
    	var objDomstretch = Ext.get(domListItem.querySelector('.stretch'));
    	if(objDomstretch!=null){
    	    objEc.setDraggable(null);
    		return false;
    	}
    	/** 判断初始的拖拽方向 */
    	if (axis.abs.x < axis.abs.y) {// 上下拖动时，把拖拽配置除去
	    	objEc.setDraggable(null);
	    	scrolly.setHidden(false);
    	} else {// 左右拖拽时，禁止页面滚动并隐藏滚动条
    		list.setScrollable(false);
    		scrolly.setHidden(true);
    	}
    },
    
    onDragEnd: function(self, e, dom1, dom2, eOpts) {
    	var obj = Ext.get(self.getTarget());
    	var obj1 = obj.parent().parent();
    	var objEc = Ext.getCmp(obj1.getId()),draggable = objEc.getDraggable();
    	var list = this.getMsg();
    	
    	/** 超过操作栏宽度一半时会拖拽成功，否则回弹原始状态 */
    	if (draggable && draggable.offset) {
    		var offsetObj = Ext.clone(draggable.offset),offset = offsetObj.x;
 var domListItem = dom1.parentNode.parentNode;
    		var objDomMore = Ext.get(domListItem.querySelector('.more')).getWidth();
	    	if (Math.abs(offset)>objDomMore/2) {
	    		if(offset > 0) {
	    			offsetObj ={x:0,y:0};
	    		} else {
	    			offsetObj ={x:-objDomMore,y:0};
	    		}
	    	} else {
	    		if(offset > 0) {
	    			offsetObj ={x:-objDomMore,y:0};
	    		} else {
	    			offsetObj ={x:0,y:0};
	    		}
	    	}
	    	draggable.getTranslatable().translate(offsetObj.x, offsetObj.y);
	    	if (offsetObj.x==0)// 操作栏隐藏时，拖拽配置去除
	    		objEc.setDraggable(null);
    	}
    	var scrolly = list.getScrollable().getIndicators().y;
    	if (scrolly.isHidden()) {// 如果滚动禁止状态下，list恢复滚动
    		list.setScrollable(true);
    	}
    },
    





下面是我的页面代码结构图<pre name="code" class="javascript"> new Ext.XTemplate(
				'<div class="list-item">',
					'<div class="{[this.getRightStyle(values.message.content, values.isRead)]}">',
					'<h3><b>{message.title}</b></h3><p class="collapse">{message.content}</p><span>{message.publishDate}</span></div>',
					'<div linkModule="{message.linkModule}" url="{message.url}" class="more {[this.getMoreCss(values.message.linkType)]}">',
					'<span class="detail icon-detail {[this.getMoreStyle(values.message.linkType)]}" style="text-align: center;"></span>' +
					'<span class="del icon-trash" style="text-align: center;"></span></div>',
				'</div>',
			)