[ExtJS 4.2.0.663] Ext.ux.DataView.Draggable can not be used in more than one DataView
Ext.ux.DataView.Draggable can not be used in more than one DataView in Version 4.2.0.663.
Reason is that Ext.ux.DataView.Draggable is now implemented as mixin.
Generally this is a good idea, but the implementation stores instance specific data directly in the mixin object.
Therefore, if more than one class is using the mixin, this data is overwritten which leads to unwanted side-effects.
I changed the implementation so that this data is now stored in the instance of the class that uses the mixin. That way the mixin can be used in multiple dataviews at the same time.
This is also the behaviour you can find in other mixin-classes as Ext.form.Labelable
I get the following Error when activating the mixin:
TypeError: 'undefined' is not an object (evaluating 'name.substring') ext-all-debug.js
also when leaving the Ext.each loop after creating first DataView Component.
If I remove mixin the TypeError is away :-)
I found a flag in Doc is called "draggable" can be set to true.
Does this mean the mixin isn't needed in ExtJS 4.2.1 (my Version) ?
Please reply :-) I am hanging on the DataView-Problem for 2 Weeks before I noticed may working Example is based on Ext.Container and not Ext.view.View
Maybe I understand the report wrong? => You talk about multiple Draggzones - or do you talk about draggable items ? So my DataView generated from Store is only useable if there is only one Item in ?
Here is the Part of Code I talk about:
PHP Code:
Ext.define('MyApp.view.'+deckzoneName+'CardView',{ extend: 'Ext.view.View', /*requires : [ 'Ext.ux.DataView.Draggable' ], mixins: { // draggable: 'Ext.ux.DataView.Draggable' draggable: 'app.Ux.DataView.Draggable' },*/ itemSelector : 'div.card', // extend: 'Ext.Container', // alias : 'widget.drop.'+deckzoneName+'cardViewontainer', // alias : 'widget.dnd.'+deckzoneName+'cardViewContainer', // dropGroup:undefined, draggable: true, // here is the new? flag xtype: deckzoneName+'cardView', store: deckzoneName+'Store', tpl: [ '<tpl for=".">', '<div class="card" id="card-{uniqueCardObjectId}">', '<div class="content" >', // also comment out img loading and replacing with // 'card-{uniqueCardObjectId}', // doesn't help ! So it is no timing-problem ' <img src="'+Config.Client.imageBaseUrl[0]+'/{id}.jpg" height="96" width="64">', '</div>', '</div>', '</tpl>' ].join(''), afterRender:function(){
var me = this; var container = Ext.get(me.el.id).select('div.card'); //we get our invoices objects console.log('4.2.1'); console.log(container) Ext.each(container.elements, function(el) { var dd = Ext.create('Ext.dd.DD', el.id, 'cardDnDGroup', { isTarget : true });
} ] } ); return false; // to leave after first DataView });
I figured out the expected container.elements you can only get like this:
PHP Code:
var container = Ext.get(me.el.id).select(''); // instead of select('div.card')
If I do this - I can drag all Items comes from my store.
So the right description for this bug is maybe:
DataView cannot use DnD because it is not possible to catch the DOM-Objects (like select('div.card') ) - it is only possible to select the component it self.
Solution suggestion:
I think we need an override-fix of afterRender-function to wait for items in DOM or
a change when afterRender-function is called by procession rendering phase.
Wishes:
In my opinion it is also a design question related to loading multiple items you are waiting for.
So I would prefer an option makes it possible to POST-load content inner Draggable DOM-Item (lazyLoadItemChilds=true).
So we can come up and do not wait for Images for example - but draggability is working fast.
I am also thinking about the children of the DragZone:
I can see them if I do console.log(Ext.get(this.el.id).select('')) and follow elements[0]->childNodes or children
elements[0] is an HTMLDivElement
ext-all-debug.js:10317 TypeError: 'null' is not an object (evaluating 'dom.addEventListener')
So I think they are rendered outside of DataView Rendering-Phase what means the BugFix is also related to Ext.view.View and maybe it is really effecting other parts of this Component. But this is absolute over my level of experience. Here I will stop trying to figure out a usable workaround.
Hope an other one can start on my end of engagment :-) good luck
The basic problems others could stumble over could be:
1) Data-Source: You can use a Store as data-param
2) How to find out and point onto right Values: Console.log(store..); navigate data->items->[0..]->data
for example you want the id you have to use {[values.data.id]} into the tpl (please notice both brackets [] and {})
Don't forget pushing my profile (Vote-Up Answers) for motivation ;-)