PDA

View Full Version : [Drag & Drop][Mixins][Two DataViews]



nikko49
29 Oct 2013, 11:54 PM
Bonsoir,

I would set a Drag & Drop action in my app.
On one hand, I have a DataView with draggable objects and, on the other hand, I have my TreePanel to drop objects into.

To do that, I use the useful 'treeviewdragdrop' plugin like that :

In my treePanel :


viewConfig :
{
id : 'treeView',
stripeRows: true,
plugins :
[
{
ddGroup : 'treeGroup',
ptype : 'treeviewdragdrop'
}
]
}

In my first view (it's in a tabPanel -> Tab 0) :

Ext.define('module_contracts.view.ServiceShop',
{
extend : 'Ext.view.View',
alias : 'widget.serviceShop',
id : 'serviceShop',
store : 'Services',

mixins:
{
draggable : 'Ext.ux.DataView.Draggable'
},

tpl:
[
'<tpl for=".">',
'<div class="thumb-service" id="{id}">',
'<div class="thumb">',
'<img src="{type}.png" />',
'</div>',
'<input type="checkbox" id="check_{id}">',
'<span>{service_code}</span>',
'</div>',
'</tpl>'
],

itemId : 'thumb-service',
itemSelector : 'div.thumb-service',
cls : 'x-image-view',
height : 310,
trackOver : true,

initComponent : function()
{
this.mixins.draggable.init(this,
{
ddConfig:
{
ddGroup: 'treeGroup'
}
});

this.callParent(arguments);
}
});

For this moment, this works perfectly.
But, when I decide to set up a second view with te same method / plugin in order to drag these objects too, I have the following error :



TypeError: this.el is null
...(l&&l.label?l.label.getBBox():{width:0,height:0}),w=20,t=10,s=10,r;if(!a.width||...

In my second view (it's in a tabPanel -> Tab 1), here the code :


Ext.define('module_contracts.view.IndicatorShop',
{
extend : 'Ext.view.View',
alias : 'widget.indicatorShop',
id : 'indicatorShop',
store : 'Indicators',

mixins:
{
draggable : 'Ext.ux.DataView.Draggable'
},

tpl:
[
'<tpl for=".">',
'<div class="thumb-indicator" id="{id}">',
'<div class="thumb">',
'<img src="{type}.png"/>' :
'<div><img id="status" src="{indicator_status_img}.png"/><input type="checkbox" id="check_{id}"></div>',
'<span>{indicator_code}</span>',
'</div>',
'</tpl>'
],
itemId : 'thumb-indicator',
itemSelector : 'div.thumb-indicator',
cls : 'x-image-view',
height : 310,
trackOver : true,

initComponent : function()
{
this.mixins.draggable.init(this,
{
ddConfig:
{
ddGroup: 'treeGroup'
}
});

this.callParent(arguments);
}
});

Thanks you very well in advance for your advices to set up a drag & drop on two views with the 'treeviewdragdrop' plugin.

:roll::roll:

Gary Schlosberg
1 Nov 2013, 11:32 AM
So you have items from your dataview(s) being dragged into the tree as nodes? The error occurs at render of second dataview or when you try to drag/drop?

imran
7 Apr 2014, 5:48 AM
Hi Gary,The problem is in the implementation of the Ext.ux.DataView.Draggable mixin. As currently implemented, it only works with ONE view. The moment you add the mixin to another dataview it breaks. There are more details on this here: http://www.sencha.com/forum/showthread.php?262844 On that thread it mentions a bug has been opened for this. Is there a status on that? As of 4.2.2 this issue still exists.

Gary Schlosberg
9 May 2014, 4:08 PM
Looks like that bug hasn't been fixed yet. I've noted your interest to increase the priority of the report.