Ext實現資料拖拽功能

Ext實現資料拖拽功能，以下是程式碼[@more@]

var comColumnCus = [{
header : "客戶編號",
width : 70,
sortable : true,
dataIndex : 'custId'
}, {
header : "客戶名稱",
width : 150,
sortable : true,
dataIndex : 'custNam'
}];

var yfieldCus = [{
name : 'custId',
mapping : 'custId'
}, {
name : 'custNam',
mapping : 'custNam'
}];
var schFirstGridStoreCus1 = new Ext.data.SimpleStore({
proxy : new Ext.data.HttpProxy({
url : Main.jsonRpcHttpUrl
}),
reader : new Ext.data.JsonReader({
root : 'result.list.list',// 定義讀取列表的屬性,此處不需更改
totalProperty : 'result.totalrows',// 定義後臺返回的標識總記錄數的屬性,
id : 'id'
}),
remoteSort : false,
fields : yfieldCus
});
var schSecondGridStoreCus2 = new Ext.data.SimpleStore({
fields : yfieldCus
});

// 配置關聯客戶
var configCustom = function(objectId) {
var custId = "";
schFirstGridStoreCus1.removeAll();
schSecondGridStoreCus2.removeAll();
var requireInfo = {};
requireInfo.javaClass = 'com.fesco.mis.business.bd.product.require.model.RequireInfo';
requireInfo = Main.jsonRpcClient._call('requireService.getObject',
objectId);
if (Ext.isDefined(requireInfo.customer) && requireInfo.customer != "") {
var custStore_ = Main.jsonRpcClient._call(
'bdCrmCustomerService.getList', {
condition : {
list : [{
field : 'cust_id',
relation : 'in',
value : '(' + requireInfo.customer
+ ')',
type : 'and',
javaClass : 'net.uni.util.Condition'
}],
javaClass : 'java.util.ArrayList'
},
javaClass : 'net.uni.util.SimpleCriteria'
});
if (custStore_) {
schSecondGridStoreCus2.loadData(custStore_.list.list);
}
}

var Cus = new Ext.grid.RowSelectionModel({
singleSelect : true,
listeners : {
rowselect : function(sm, row, rec) {
custId = rec.get('custId');
}
}
});
var baseCondition = [];
var firstGrid = new Ext.ux.Grid({
ddGroup : 'secondGridDDGroup',
store : schFirstGridStoreCus1,
columns : comColumnCus,
stripeRows : true,
enableDragDrop : true,
title : '客戶列表',
viewConfig : {
forceFit : true
},
condition : baseCondition,
tbar : [{
text : "查詢客戶資訊",
iconCls : 'search',
tooltip : getTooltipObject('查詢客戶資訊'),
handler : function() {
searchCus();
}
}],
sm : Cus,
dataMethod : 'bdCrmCustomerService.getList'
});
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : schSecondGridStoreCus2,
columns : comColumnCus,
stripeRows : true,
enableDragDrop : true,
title : '已配置客戶'
});
var displayPanel = new Ext.Panel({
width : 900,
height : 300,
border : false,
layout : 'hbox',
renderTo : mainName,
defaults : {
flex : 1
},
layoutConfig : {
align : 'stretch'
},
items : [secondGrid, firstGrid]
});
function searchCus() {
var custId = new Ext.form.TextField({
fieldLabel : '客戶編號',
name : 'custId',
anchor : '90%'
});
var custNam = new Ext.form.TextField({
fieldLabel : '客戶名稱',
name : 'custNam',
anchor : '90%'
});
var objectForm = new Ext.form.FormPanel({
frame : true,
hideBorders : true,
border : true,
items : [custId, custNam]
});
var serachWin = new Ext.Window({
title : '查詢客戶',
width : 350,
height : 180,
modal : true,
plain : true,
animateTarget : mainName,
items : objectForm,
buttonAlign : 'center'
});
objectForm.addButton('查詢', function() {
var formObject = objectForm.getForm().getValues();
var condition = [];
if (formObject.custId) {
condition.push({
field : ('CUST_ID'),
relation : '=',
value : formObject.custId,
type : 'and',
javaClass : 'net.uni.util.Condition'
});
};
if (formObject.custNam) {
condition.push({
field : ('CUST_NAM'),
relation : 'like',
value : "%" + formObject.custNam + "%",
type : 'and',
javaClass : 'net.uni.util.Condition'
});
};
firstGrid.updateCondition(condition);
serachWin.close();
});
objectForm.addButton('重置', function() {
objectForm.form.reset();
});
objectForm.addButton('關閉', function cancle() {
serachWin.close();
});
serachWin.show();
};

var blankRecord = Ext.data.Record.create(yfieldCus);
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl,
{
ddGroup : 'firstGridDDGroup',
notifyDrop : function(ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove,
ddSource.grid.store);
firstGrid.store.sort('custNam', 'ASC');
return true;
}
});
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(
secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove,
ddSource.grid.store);
secondGrid.store.add(records);
secondGrid.store.sort('custNam', 'ASC');
return true;
}
});
function saveconfigCustom() {
var userIds = "";
for (var i = 0; i < schSecondGridStoreCus2.getCount(); i++) {
if (i == 0) {
userIds = schSecondGridStoreCus2.getAt(i).get('custId');
} else {
userIds += ","
+ schSecondGridStoreCus2.getAt(i).get('custId');
}
}
Main.jsonRpcClient._call(resultCallBack,
'requireService.configCustom', objectId, userIds);
function resultCallBack(result, error) {
if (error == null) {// 如果error為空,則認為處理成功
Ext.MessageBox.alert("操作成功", "配置關聯客戶成功！", function() {
wWindow.close();
});
} else {
Ext.MessageBox.alert('操作失敗', error.message);
}
}
}

var wWindow = new Ext.Window({
title : '配置關聯客戶',
width : 900,
height : 400,
minWidth : 300,
minHeight : 220,
layout : 'form',
plain : true,
modal : true,
labelWidth : 50,
labelAlign : 'left',
animateTarget : mainName,
bodyStyle : 'padding:5px;',
buttonAlign : 'center',
items : [{
baseCls : "x-plain",
items : [displayPanel]
}],
buttons : [{
text : '儲存',
handler : saveconfigCustom
}, {
text : '返回',
handler : cancel
}]
});
wWindow.show();
function cancel() {
wWindow.close();
}
};