PDA

View Full Version : Drag & Drop Grid



GT_Travis
23 Sep 2009, 8:31 PM
Hi there,
I am having problem with the Drag & Drop Grid. I am wondering if there is anyone can help me with this.

I am trying to follow the Drag & Drop example to make my own Drag & Drop Grid but i have got this error:
"leftGrid.getView().scroller is undefined"

I am wondering what went wrong?

Here is my code.



<script type="text/javascript">
<!--
var subgroupStore;

Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();


var fields = [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'},
{name: 'adminId', type: 'int'},
{name: 'lastModifiedDatetime', type: 'string'}
];

// create the data store
subgroupStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '${appPath}/web/general/contact/subgroupcombostore.do'
}),
root:'rows',
id:'subgroupStore',
totalProperty: 'results'
});

var cols = [
{header: 'ID', width: 50, sortable: true, dataIndex: 'id'},
{header: 'Title', width: 100, sortable: true, dataIndex: 'title'},
{header: 'Admin ID', width: 100, sortable: true, dataIndex: 'adminId'},
{header: 'Last Modified Date', width: 75, sortable: true, dataIndex: 'lastModifiedDatetime'}
];

//Declare the source Grid
var leftGrid = new Ext.grid.GridPanel({
ddGroup : 'rightGridDDGroup',
store : subgroupStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'title',
title : 'Subgroup List'
});

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

//Create the destination Grid
var rightGrid = new Ext.grid.GridPanel({
ddGroup : 'leftGridDDGroup',
store : rightGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'title',
title : 'Destination List'
});

//Simple 'Border Layout' panel to house both grids
var displayPanel = new Ext.Panel({
anchor : '100%',
defaults : { flex : 1 },
layoutConfig : { align : 'stretch' },
items : [
leftGrid,
rightGrid
],
bbar : [
'->', //Fill
{
text : 'Reset both grids',
handler : function(){
//refresh source grid
subgroupStore.loadData();

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

// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);

//Setup Drop Targets
//This will make sure we only drop to the view scroller element
var leftGridDropTargetEl = leftGrid.getView().scroller.dom;
var leftGridDropTarget = new Ext.dd.DropTarget(leftGridDropTargetEl, {
ddGroup : 'leftGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
leftGrid.store.add(rows);
leftGrid.store.sort('id', 'ASC');
return true
}
});

//This will make sure we only drop to the view scroller element
var rightGridDropTargetEl = rightGrid.getView().scroller.dom;
var rigthGridDropTarget = new Ext.dd.DropTarget(rigthGridDropTargetEl, {
ddGroup : 'rigthGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
rightGrid.store.add(rows);
rightGrid.store.sort('id', 'ASC');
return true
}
});

displayPanel.render(Ext.get('center1'));
});
-->
</script>


Thanks very much. I will be much appreciated.

27 Sep 2009, 6:17 PM
displayPanel is not rendered when you are setting up the drop zone. You need to do it ONLY after the grid is rendered.

jankshtt
29 Sep 2009, 5:59 PM
does the above code work on extJS 2.1??

1 Oct 2009, 6:46 AM
The examples for Ext 2.x show how to drag and drop from grid to grid

vmadman
14 Oct 2009, 9:37 AM
I had the same problem and jgarcia's advice was the solution, though it took me a second to figure out how to pull of what he was saying since my grids were nested inside of other panels and so on.

In the end I had to ensure that my drop targets were defined after the main panel rendered. The main panel rendered via the 'renderTo' config variable. So, I just put the drop target code after that.

emily
29 Oct 2009, 8:38 AM
I am having this issue, but I am trying to figure out how to find out when the dom is available.

I am creating a class that is a panel that contains some grid to grid DD. I was trying to load them on afterrender or afterlayout, but neither are working :(

I intend to instantiate this panel lazily inside a window in a desktop app, so I don't want the window to have to do the DropTarget instantiation (that would be silly).

Any idea what the correct event is that I should be using? Or should I create my own?

Em

emily
29 Oct 2009, 8:57 AM
I am having this issue, but I am trying to figure out how to find out when the dom is available.

I am creating a class that is a panel that contains some grid to grid DD. I was trying to load them on afterrender or afterlayout, but neither are working :(

I intend to instantiate this panel lazily inside a window in a desktop app, so I don't want the window to have to do the DropTarget instantiation (that would be silly).

Any idea what the correct event is that I should be using? Or should I create my own?

Em

Actually figured out what I was doing wrong - I was being an *****!

29 Oct 2009, 10:04 AM
Emily, how about providing the solution to your problem and giving back to the community?

vmadman
29 Oct 2009, 11:02 AM
Emily, how about providing the solution to your problem and giving back to the community?

here here

emily
6 Nov 2009, 8:04 AM
Emily, how about providing the solution to your problem and giving back to the community?

No really it was me being a complete *****, so not really any solution to post, but I will let you know why I was being stupid and how I eventually rearranged my code to not be so stupid.

So I was creating a component that was a subclass of a panel with vbox layout that contained a panel (with an hbox layout containing two GridPanels), and a ColumnTree. The idea being that you could drop items from one grid to the other, press a button and it would populate the column tree with results from a database search based on what information was dropped into a particular grid. This was my first attempt of DnD in extjs, so I was using the grid to grid example and hacking it. I had to turn this into a class that I could instantiate so it was reusable for a couple of analogous situations in my app, but I wasn't thinking very clearly about where to define the drag and drop event listeners.

My mistake was that I was trying to define the DropTargets in the event listener for the afterrender (or afterlayout - I can't remember) event of the big panel, instead of the first child of the big panel (which contained the grids).

Anyway I have since changed it, and created a MultiGridDragDropRowOrder plugin that is used by both of the grids, and it works much better and allows me to reorder the items in both grids as well as drag and drop between them (it is a hacked version of this: http://www.extjs.com/forum/showthread.php?t=21913).

Anyway if that made any sense at all I guess it may be helpful.

Em

milanz
4 Mar 2011, 8:19 PM
I ran into the same problem. Here is my solution. Just attach the target on the afterrender event:



new Ext.grid.GridPanel({
listeners: {
scope: this,
afterrender: function(grid)
{
new Ext.dd.DropTarget(this.gridC.getView().scroller.dom, {
ddGroup : 'gridCDDgrp',
notifyDrop : function(ddSource, e, data){
...
return true;
}
}, this);
}
}
});

ofdarkness
1 Jun 2011, 3:30 PM
thanks vmadman (http://translate.googleusercontent.com/translate_c?ie=UTF8&rurl=translate.google.com&sl=en&tl=es&u=http://www.sencha.com/forum/member.php%3F91117-vmadman&usg=ALkJrhhzQMSujjCFZtQGWzwCvrrrebfZlg) i just put the code from the end and success! greetings from Oaxaca México, sorry for my bad english