PDA

View Full Version : Drag and Drop from a Tree to an EditorGrid



Shining77
14 Feb 2011, 12:46 PM
Is there a good example for Drag and Drop from a Tree to an EditorGrid?

I want to select a value from tree, drag and drop it into an EditorGrid to give there a value for it.

I only found examples from Grid to Tree (:|

arthurakay
14 Feb 2011, 12:53 PM
Here's another example: Grid to FormPanel
- http://dev.sencha.com/deploy/dev/examples/dd/dnd_grid_to_formpanel.html

The concepts are exactly the same - you're going to have to apply the example to your case.

I would suggest you try writing some of the code yourself and ask questions here in the forum when you get stuck. No one wants you copy/pasting code, particularly if you don't understand what it's doing.

Shining77
15 Feb 2011, 8:53 AM
I am working on the example but I am having still having problems.

My actual code:

var skillTreePanel = new Ext.tree.TreePanel({
enableDD:true,
ddGroup: 'skillDD',
...
});

var skillSearchGrid = new Ext.grid.EditorGridPanel({
id: 'skillSearchGrid',
...
});

var panelDropTargetEl = skillSearchGrid.getEl();

var panelDropTarget = new Ext.dd.DropTarget(panelDropTargetEl, {
ddGroup : 'skillDD',
...
});


My problem is the panelDropTargetEl.
How can I get the correct dropzone for my EditorGridPanel?

Thanks for some help

arthurakay
15 Feb 2011, 8:59 AM
Use the CODE tags when posting your code... makes it easier to read.

Try using the grid's GridView - skillSearchGrid.getView().

Looking at the code used in the example:
- http://dev.sencha.com/deploy/dev/examples/dd/dnd_grid_to_grid.html

I see:

.getView().scroller.dom

Shining77
15 Feb 2011, 9:06 AM
I have just tried it.

skillSearchGrid.getView() is defined, but unfortunately skillSearchGrid.getView().scroller is undefined

arthurakay
15 Feb 2011, 9:09 AM
What happens if you just use .getView() (i.e. no ".scroller.dom")?

Shining77
15 Feb 2011, 11:18 AM
My JS-console says

this.el is null

arthurakay
15 Feb 2011, 11:19 AM
Post your complete code and I'll try to dig into it for you.

Shining77
15 Feb 2011, 11:26 AM
<CODE>

var skillTreePanel = new Ext.tree.TreePanel({
region: 'west',
ddGroup: 'skillDD',
title: 'Suche',
height: 300,
width: 400,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
dataUrl: '/project-clouds/ajax/getSkills'
});

var cm = new Ext.grid.ColumnModel([{
header: 'Skill',
width: 220,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: 'Value',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true
})
}
]);

var skillSearchGrid = new Ext.grid.GridPanel({
id: 'skillSearchGrid',
region: 'center',
title: 'Skillbewertungen',
store: new Ext.data.Store(),
cm: cm,
autoExpandColumn: 'common',
frame: true,
clicksToEdit: 1,
enableDD : true
});

var combinedSkillPanel = new Ext.Panel({
width : 650,
height : 300,
layout : 'hbox',
defaults : { flex : 1 }, //auto stretch
layoutConfig : { align : 'stretch' },
items : [skillTreePanel,skillSearchGrid],
bbar : [
'->', // Fill
{
text : 'Reset Example',
handler : function() {
//refresh source grid

}
}
]
});

// This will make sure we only drop to the view container
var panelDropTargetEl = skillSearchGrid.getView();

var panelDropTarget = new Ext.dd.DropTarget(panelDropTargetEl, {
ddGroup : 'skillDD',
notifyEnter : function(ddSource, e, data) {
//Add some flare to invite drop.
skillSearchGrid.body.stopFx();
skillSearchGrid.body.highlight();
},
notifyDrop : function(ddSource, e, data){

// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];

// Load the record into the form
//formPanel.getForm().loadRecord(selectedRecord);

return(true);
}
});

</CODE>

arthurakay
15 Feb 2011, 11:53 AM
For future reference, the CODE tag's I'm referring are the # symbol in the WYSIWYG.. not HTML code tags :D

Anyways, several things wrong with your code.
(1) You had an "autoExpandColumn" defined in your grid config, but it didn't exist in your column model.
(2) We need to create the drop targets after the grid renders... we can't grab its GridView element before then because it doesn't exist.

Updated code:


var skillTreePanel = new Ext.tree.TreePanel({
region: 'west',
ddGroup: 'skillDD',
title: 'Suche',
height: 300,
width: 400,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: new Ext.tree.AsyncTreeNode({
expanded: true,
text: 'Root',
children: [{ text: 'Child 1' }, { text: 'Child 2' }]
})
//root: { nodeType: 'async' },
//dataUrl: '/project-clouds/ajax/getSkills'
});

var cm = new Ext.grid.ColumnModel([{
header: 'Skill',
width: 220,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
header: 'Value',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true
})
}
]);

var skillSearchGrid = new Ext.grid.GridPanel({
id: 'skillSearchGrid',
region: 'center',
title: 'Skillbewertungen',
store: new Ext.data.Store(),
cm: cm,
//autoExpandColumn: 'common',
frame: true,
clicksToEdit: 1,
enableDD : true,
listeners: {
'render': function(thisComponent) {
//// This will make sure we only drop to the view container
var panelDropTargetEl = thisComponent.getView().scroller.dom;

var panelDropTarget = new Ext.dd.DropTarget(panelDropTargetEl, {
ddGroup : 'skillDD',
notifyEnter : function(ddSource, e, data) {
//Add some flare to invite drop.
thisComponent.body.stopFx();
thisComponent.body.highlight();
},
notifyDrop : function(ddSource, e, data){
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];

// Load the record into the form
//formPanel.getForm().loadRecord(selectedRecord);

return(true);
}
});
}
}
});

var combinedSkillPanel = new Ext.Panel({
width : 650,
height : 300,
layout : 'border',
items : [
skillTreePanel,
skillSearchGrid
],
bbar : [
'->', // Fill
{
text : 'Reset Example',
handler : function() {
//refresh source grid

}
}
]
});



FYI - your notifyDrop callback gives a runtime JS error, so you'll have to debug that.