View Full Version : [4.0.2] beforedrop dropFunction doesn't completely work

12 Jun 2011, 11:41 AM

I'm not sure this is a bug as it looks like it does do something.
I have a beforedrop event and added a dropFunction called 'doTheDrop'. This dropFunction is created outside my View.
The code in the beforedrop event is executed completely, but the following event, drop, is not called anymore. This seems somehow correct, as the documentation says that the drop-event is cancelled when the dropFunction is returned with 0.
But in my function 'doTheDrop', I have an alert and that one is not displayed at all.
Also, the record to drop, is already shown in my grid. Not sure if that is correct either.

So somewhere something goes wrong, either in my thoughts, the documentation or Ext.

My dropfunction, completely outside the view:

function doTheDrop(a, b, c, d, e) {
alert('Doe de drop stand alone');
return 0;

My View:

Ext.define('EX.view.player.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.playerlist',

title : 'All Players'
,store: 'Players'

,viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
,ddGroup: 'MembersToTeams'
,dragGroup: 'ddPlayerGrid'
,dropGroup: 'ddPlayerGrid'
,enableDrag: true
,enableDrop: true
,listeners: {
beforedrop: function(node, data, dropRec, dropPosition, doTheDrop) {
if (data.records[0].store.storeId == 'Members') {
var tree = Ext.ComponentQuery.query('slttree');
var treeRecord = tree[0].getSelectionModel().getSelection();
if (treeRecord.length > 0) {
var recTeamId = 0;
var recLeagId = 0;
if (treeRecord[0].data.id.substring(0,1) == 't') {
recTeamId = treeRecord[0].data.id.substring(2);
recLeagId = treeRecord[0].data.parentId.substring(2);

data.records[0].set('teams_id', recTeamId);
data.records[0].set('members_id', data.records[0].get('id'));
data.records[0].set('sortorder', 0);
data.records[0].set('is_team_captain', 0);
if (data.records[0].store.storeId == 'Players') {
,drop: function(node, data, dropRec, dropPosition) {
if (data.records[0].store.storeId == 'Members') {
var member = Ext.ModelManager.create({
members_id: data.records[0].get('id')
,teams_id: data.records[0].get('teams_id')
,fullname: data.records[0].get('fullname')
,sortorder: data.records[0].get('sortorder')
,is_team_captain: 0
,id: 0
,number_subteam: ''
}, 'EX.model.Player');

if (data.records[0].store.storeId == 'Players') {
,id: 'vcPlayer'
,stripeRows: true

,initComponent: function() {
this.columns = [
{header: 'Play order', dataIndex: 'sortorder', flex: 0.3}
,{header: 'Player name', dataIndex: 'fullname', flex: 1}
,{header: 'Teamcaptain', dataIndex: 'is_team_captain', renderer: this.showCheckImg, flex: 0.3}

this.dockedItems = [{
dock: 'top'
,xtype: 'toolbar'
,items: getMenuPlayerList(0)


,showCheckImg: function(val) {
if (val == 0) return "<div class='mcc-icon-unchecked-icon' alt='not checked' title='not checked'></div>";
if (val == 1) return "<div class='mcc-icon-checked-icon' alt='checked' title='checked'></div>";
return "unknown";

*) I know the program logic should go in a controller, but I can't seem to get that to work, see another post about this in the help-forum.

Any help/ideas are appreciated!

Thanks in advance,