[ExtJS 4.2.0.663] Ext.ux.DataView.Draggable can not be used in more than one DataView

[schiesser]

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

[slemmon]

Thanks for the report! I have opened a bug in our bug tracker.

[Malte123]

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:

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
                    });
                 
                });
            }    
        });
        //var cardElements = Ext.get('')
        var countViewItemsAndCalcWidthNeeded = (Ext.getStore(deckzoneName+'Store').count())*65;
        console.log('DATAVIEW Deckzone: '+countViewItemsAndCalcWidthNeeded);

         array1.push(
             {
                title: deckzoneName
                ,items: 
                    [
                        {
                            xtype: deckzoneName+'cardView'
                            ,overflowX : 'auto'
                        //    ,overflowX : 'scroll'
                        //    ,autoScroll: true
                            ,width: countViewItemsAndCalcWidthNeeded 
                                                                  
                        }
                    ]
            }
        );
         return false; // to leave after first DataView
    }); 

I figured out the expected container.elements you can only get like this:

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.

[Malte123]

After reading Code of Draggable.js I have seen Ed Spencer has done thoughts about lazy loading basically within init() by

 Ext.apply(this, {
            itemSelector: dataview.itemSelector,
            ghostConfig : {}
        }, config || {});

        Ext.applyIf(this.ghostConfig, {
            itemSelector: 'img',
            cls: this.ghostCls,
            tpl: this.ghostTpl
        }); 

It should be driven to be a flag I think.

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

But if I try statically

Ext.create('Ext.dd.DD', 'card-0-1', 'cardDnDGroup', {
                        isTarget      : true
                    }); 

I get an Error:

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

[Malte123]

Good news - I found a solution (for my case).
I think it could help others - so I will take the time to show you my way:

Short: I did it with Ext.Container instead of Ext.view.View

deckzones.each(function(record){
        
        var deckzoneName = record.internalId;
        Ext.define(deckzoneName+'CardView',{
             extend     : 'Ext.Container',
                alias   : 'widget.dnd.'+deckzoneName+'cardView',
    
            xtype: deckzoneName+'cardView',
            data: Ext.getStore(deckzoneName+'Store'),//'Deck',

            tpl: [
                '<tpl for=".">',
                    '<div class="card" id="card-{[values.data.uniqueCardObjectId]}">',
                        '<div class="content" height="96" width="64" >',
                            //    'card-{[values.data.id]}',
                                ' <img src="'+Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg"  height="96" width="64">',
                        '</div>',
                    '</div>',
                '</tpl>'
            ].join(''),
    
            afterRender:function(){
                var me = this,container;        
                this.callParent(arguments);    
                container = Ext.get(me.el.id).select('div.card');     
                Ext.each(container.elements, function(el) { 
                    var dd = Ext.create('Ext.dd.DD', el.id, 'cardDnDGroup', {
                        isTarget      : true
                    });
                 
                });
            }    
        });

        var countViewItemsAndCalcWidthNeeded = (Ext.getStore(deckzoneName+'Store').count())*65;
        console.log('DATAVIEW Deckzone: '+countViewItemsAndCalcWidthNeeded);

         array1.push(
             {
                title: deckzoneName
                ,items: 
                    [
                        {
                            xtype: deckzoneName+'cardView'
                            ,overflowX : 'auto'
                   
                            ,width: countViewItemsAndCalcWidthNeeded // listener needed by dragNdrop recalculate
                                                                     // TODO: Global Var for Card-XY

                        }
                    ]
            }
        );
        // return false; // testing Bug EXTJSIV-9698
    }); 

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 ;-)