You found a bug! We've classified it as EXTJS-9698 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    2
    schiesser is on a distinguished road

      2  

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

    [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
    Attached Files

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,363
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default


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

  3. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      1  

    Default


    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,
                
    draggabletrue,  // here is the new?  flag
                
    xtypedeckzoneName+'cardView',
                
    storedeckzoneName+'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(
                 {
                    
    titledeckzoneName
                    
    ,items
                        [
                            {
                                
    xtypedeckzoneName+'cardView'
                                
    ,overflowX 'auto'
                            
    //    ,overflowX : 'scroll'
                            //    ,autoScroll: true
                                
    ,widthcountViewItemsAndCalcWidthNeeded 
                                                                      
                            
    }
                        ]
                }
            );
             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.

  4. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      1  

    Default


    After reading Code of Draggable.js I have seen Ed Spencer has done thoughts about lazy loading basically within init() by
    PHP Code:
     Ext.apply(this, {
                
    itemSelectordataview.itemSelector,
                
    ghostConfig : {}
            }, 
    config || {});

            
    Ext.applyIf(this.ghostConfig, {
                
    itemSelector'img',
                
    clsthis.ghostCls,
                
    tplthis.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
    PHP Code:
    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

  5. #5
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      1  

    Default Workaround

    Workaround


    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

    PHP Code:
    deckzones.each(function(record){
            
            var 
    deckzoneName record.internalId;
            
    Ext.define(deckzoneName+'CardView',{
                 
    extend     'Ext.Container',
                    
    alias   'widget.dnd.'+deckzoneName+'cardView',
        
                
    xtypedeckzoneName+'cardView',
                
    dataExt.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(
                 {
                    
    titledeckzoneName
                    
    ,items
                        [
                            {
                                
    xtypedeckzoneName+'cardView'
                                
    ,overflowX 'auto'
                       
                                
    ,widthcountViewItemsAndCalcWidthNeeded // 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 ;-)