[img]http://dl2.iteye.com/upload/attachment/0096/2178/c88dd04b-ea98-302b-8fe8-bc26c50c53ec.jpg[/img]
//实现grid拖拽
Ext.onReady(function(){
var dragRec = Ext.data.Record.create([
{name: 'name'},
{name: 'age'},
{name: 'kind'}
]);
var dragReader = new Ext.data.ArrayReader({
// id: 0 // 提供数组的下标位置存放记录的ID(可选的) // The subscript within row Array that provides an ID for the Record (optional)
}, dragRec);
var dropRec = Ext.data.Record.create([
{name: 'name'},
{name: 'age'},
{name: 'kind'}
]);
var dropReader = new Ext.data.ArrayReader({
// id: 0 // 提供数组的下标位置存放记录的ID(可选的) // The subscript within row Array that provides an ID for the Record (optional)
}, dropRec);
var dragStore = new Ext.data.GroupingStore({
reader:dragReader,
sortInfo:{field: 'age', direction: "ASC"},//必须要有
groupField:'kind',
data:[['张三',20,'a'],['李四',30,'a'],['王柳',18,'b'],
['王丹丹',30,'b'],['张鼎鼎',28,'c']
]
});
var dropStore = new Ext.data.GroupingStore({
reader:dropReader,
sortInfo:{field: 'age', direction: "ASC"},//必须要有
groupField:'kind',
data:[]
});
var dragGrid = new Ext.grid.GridPanel({
store: dragStore,
columns: [
{ header: "姓名", width: 100, sortable: true, dataIndex: 'name'},
{header: "年龄", width: 80, sortable: true, dataIndex: 'age'},
{header: "类别", width: 80, sortable: true, dataIndex: 'kind'}
],
margins : '3 3 3 3',
enableDragDrop :true,
ddGroup : 'dragGridDDGroup',
viewConfig: {
// forceFit: true
},
view: new Ext.grid.GroupingView({
forceFit : true,
startCollapsed:false,//分组是关闭的
hideGroupedColumn:true,//隐藏分组列
groupTextTpl : '{text} ({[values.rs.length]} 条记录)'
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
// width:400,
flex:1,
height:300,
frame:true,
title:'选择'
});
var dropGrid = new Ext.grid.GridPanel({
store: dropStore,
columns: [
{ header: "姓名", width: 100, sortable: true, dataIndex: 'name'},
{header: "年龄", width: 80, sortable: true, dataIndex: 'age'},
{header: "类别", width: 80, sortable: true, dataIndex: 'kind'}
],
margins : '3 3 3 3',
enableDragDrop :true,
ddGroup : 'dropGridDDGroup',
viewConfig: {
// forceFit: true
},
view: new Ext.grid.GroupingView({
forceFit : true,
startCollapsed:false,//分组是关闭的
hideGroupedColumn:true,//隐藏分组列
groupTextTpl : '{text} ({[values.rs.length]} 条记录)'
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
//width:400,
flex:1,
height:300,
frame:true,
title:'已选'
});
var panel = new Ext.Panel({
layout:'hbox',
border:false,
width:1000,
height:350,
renderTo:Ext.getBody(),
items:[dragGrid,dropGrid],
buttons : [{
text:'复位',
handler:function(){
alert('arrNewId:'+arrNewId+'</br>arrDelId:'+arrDelId)
}
}]
});
var dropGridDropTargetEl = dropGrid.getView().el.dom.childNodes[0].childNodes[1];
var dropGridDropTarget = new Ext.dd.DropTarget(
dropGridDropTargetEl, {
ddGroup : 'dragGridDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data) {
function addRow(record, index, allItems) {
dropGrid.getStore().addSorted(record);//addSorted排序添加
ddSource.grid.store.remove(record);
}
// Loop through the selections
Ext.each(ddSource.dragData.selections, addRow);
dropGrid.getView().refresh();
ddSource.grid.getView().refresh();
return (true);
}
});
var dragGridDropTargetEl = dragGrid.getView().el.dom.childNodes[0].childNodes[1];
var dragGridDropTarget = new Ext.dd.DropTarget(
dragGridDropTargetEl, {
ddGroup : 'dropGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data) {
function addRow(record, index, allItems) {
dragGrid.getStore().addSorted(record);
ddSource.grid.store.remove(record);
}
Ext.each(ddSource.dragData.selections, addRow);
dropGrid.getView().refresh();
ddSource.grid.getView().refresh();
return (true);
}
});
});