PDA

View Full Version : dnd_grid_to_grid



Sebseb
10 Nov 2010, 9:29 AM
Hello,
i'm using the Drag and Drop from Grid to Grid But, each time you put an Element from the first grid to the second, the programm tidy the element in the second table by Alphabetical order.
I would like it doesn't tidy by Alphabetical order.
How can i do?
I'm searching but i don't find (probably, i don't search at the right place :-?)
Thanks

darthwes
10 Nov 2010, 9:58 AM
You just change your code to do it.

Sebseb
14 Nov 2010, 7:26 AM
I forget the code. so :


Ext.onReady(function(){

var myData = {
records : [
{ name : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 9", column1 : "9", column2 : "9" }
]
};


// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];

// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});


// Column Model shortcut array
var cols = [
{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
];

// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'First Grid'
});

var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});

// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'Second Grid'
});


//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : 'hbox',
renderTo : 'panel',
defaults : { flex : 1 }, //auto stretch
layoutConfig : { align : 'stretch' },
items : [
firstGrid,
secondGrid
],
bbar : [
'->', // Fill
{
text : 'Reset both grids',
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);

//purge destination grid
secondGridStore.removeAll();
}
}
]
});


Adn the code of the Drag and drog



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.add(records);
firstGrid.store.sort('name', 'ASC');
return true
}
});


// This will make sure we only drop to the view scroller element
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('name', 'ASC');
return true
}
});


SO ti the code of this exemple :
http://dev.sencha.com/deploy/dev/examples/dd/dnd_grid_to_grid.js

Ijust would like when you put an Element in the second grid
, it doesn't tidy by alphabetical order in the grid.

I just begin in extjs and don(t know what to do for mofify this.

Sebseb
14 Nov 2010, 11:24 AM
I find, it was easy
just suppress this line :


secondGrid.store.sort('name', 'ASC');