ExtJS中DragDrop插件的一些使用實例

DragDrop這個插件為GridView提供了拖放功能，另外一個插件TreeViewDragDrop為TreeView提供拖拽功能，這里主要是對DragDrop插件的使用做一些說明。

使用這個插件源于目前在做的一個項目：需求方要求新增一個可以在頁面上通過拖拽對數據進行排序的功能，因之前數據需要用戶手動輸入一個序號來完成數據的排序。

目前官方文檔中對該插件的使用，有在兩個列表頁之間拖拽數據和對列表頁某一單元格中的數據的拖拽的實例。沒有在同一列表頁中拖拽一行數據的實例。

直接代碼：

Ext.onReady(function(){

Ext.create('Ext.data.Store',{

storeId : 'simpsonsStore',

fields : ['num','name'],

data : [[1,'張三'],[2,'李四'],[3,'王五'],[4,'趙六']],

proxy : {

type : 'memory',

reader : 'array'

}

});

var gridpanel = Ext.create('Ext.grid.Panel',{

id : 'gridpanel',

store : 'simpsonsStore',

forceFit : true,

columns : [{

width : 40,

dataIndex : 'num',

header : '序號'

},{

header : '姓名',

dataIndex : 'name',

renderer : function(value,meta,record){

return value;

}

}],

viewConfig : {

plugins : {

ptype : 'gridviewdragdrop',

dragText :'拖拽完成排序'

}

},

heigth : 200,

width : 400,

renderTo : Ext.getBody()

  });

  gridpanel.getView().on('drop', function(){

var store = gridpanel.store;

for(var i = 0; i<store.totalCount; ){

store.getAt(i).set("num", ++i);

}

  });

});

注：代碼參考網上示例修改

圖片1

圖片2

    圖片3

當然，完成拖拽排序后，將這些修改過的數據保存到數據庫中就可以了