[Drag & Drop][Mixins] Plusieurs vues
Bonsoir,
Je souhaite mettre en place un drag and drop.
D'un coté, j'ai un DataView contenant des objets que je peux "dragger", et d'un autre coté, j'ai mon arbre dans lequel je veux déposer "dropper" mes éléments.
Mon problème est en fait que cela fonctionne très bien lorsque j'utilise le plugin 'treeviewdragdrop' dans une seule vue, mais si je désire mettre en place ce Drag&Drop dans plusieurs vues, une erreur intervient.
Voilà comment tout ceci est mis en place :
Dans mon treePanel :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| viewConfig :
{
id : 'treeView',
stripeRows: true,
plugins :
[
{
ddGroup : 'treeGroup',
ptype : 'treeviewdragdrop'
}
]
} |
Dans ma première vue :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| 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">',
(!Ext.isIE6? '<img src="../media/com_projidcontracts/images/{type}.png" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../media/com_projidcontracts/images/{type}.png\')"></div>'),
'</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);
}
}); |
Jusque là, le drag et drop fonctionne très bien, manque juste les restrictions du drop dans des noeuds particuliers de l'arbre.
Mais quand je décide d'ajouter également le plugin dans une autre View :
De cette manière :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| 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">',
(!Ext.isIE6? '<img src="../media/com_projidcontracts/images/{type}.png" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../media/com_projidcontracts/images/{type}.png\')"></div>'),
'</div>',
'<div><img id="status" src="../media/com_projidcontracts/images/{indicator_status_img}.png" class="{indicator_status_img}" /><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);
}
}); |
Plus rien ne fonctionne et je me retrouve avec l'erreur suivante dans la console de débug :
Citation:
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||...
Merci énormément d'avance pour me dire comment mettre en place ce Drag & Drop à partir de plusieurs vues.
:roll::roll:
