PDA

View Full Version : Drag and Drop between 2 panels, after searching



arjenzwerver
23 Feb 2009, 4:38 PM
Hi,

I'm busy building an online mp3-player. This works with a flashplayer. I have a grid called playlist and a grid with search results. The search-field I use is from this example: http://www.extjs.com/deploy/dev/examples/form/custom.html

There's also Drag and Drop functionality from the search results to the playlist. This works almost fine. If I do a search by clicking the search button, then I can drag one of the row's to the playlist. But when I do a search by hitting Enter after typing in my query, then I have to click the grid first before I can drag a row to the playlist.

Searchgrid:

Example.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
// hard coded - cannot be changed from outside

this.ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy ( {
url: 'search.php',
method: 'GET'
} ),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'song',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'comp', mapping: 'comp'},
'path', 'file','ip', 'size', 'link'
])

});

this.ds.on({
'load':{
fn: function(store, records, options){
console.info("Geladen: ", this);
this.getSelectionModel().selectFirstRow();
},
scope:this
}});

this.ds.load();

var config = {
ddGroup : 'secondGridDDGroup',
enableDragDrop : true,

store: this.ds
,columns: [
{header: "Computer", width: 80, dataIndex: 'comp', sortable: true},
{header: "Path", width: 180, dataIndex: 'path', sortable: true},
{header: "Filename", width: 115, dataIndex: 'file', sortable: true},
{header: "Size", width: 60, dataIndex: 'size', sortable: true},
{header: "IP", width: 100, dataIndex: 'ip', sortable: true, hidden: true},
{header: "Link", width: 100, dataIndex: 'link', sortable: true, hidden: true}
],
tbar: [
'Search: ', ' ',
new Ext.app.SearchField({
store: this.ds,
width: 250
})
]
,viewConfig:{forceFit:true},
sm: new Ext.grid.RowSelectionModel({singleSelect: true})

}; // eo config object




console.info("Configuratie: ", config);



// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
Example.Grid.superclass.initComponent.apply(this, arguments);


}, // eo function initComponent


});Drag and Drop definitions:

var firstGridStore = Ext.getCmp('searchgrid').getStore();
var firstGridDropTargetEl = Ext.getCmp('searchgrid').getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data){

// Generic function to add records.
function addRow(record, index, allItems) {

// Search for duplicates
var foundItem = firstGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);

// Call a sort dynamically
firstGridStore.sort('name', 'ASC');

//Remove Record from the source
ddSource.grid.store.remove(record);
}
}

// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});

var secondGridStore = Ext.getCmp('playlist').getStore();
// This will make sure we only drop to the view container
var secondGridDropTargetEl = Ext.getCmp('playlist').getView().el.dom.childNodes[0].childNodes[1]

var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){

// Generic function to add records.
function addRow(record, index, allItems) {

// Search for duplicates
var foundItem = secondGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
secondGridStore.sort('name', 'ASC');

//Remove Record from the source
//ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});Is there a way to prevent having to click on the grid first before dragging is possible?

arjenzwerver
24 Feb 2009, 4:59 AM
Someone knows how to fix this?