Using two View with Draggable mixins results in this.el = undefined

[Scorpie]

REQUIRED INFORMATION Ext version tested:

• Ext 4.0.1 to 4.0.7

Browser versions tested against:

• IE7/8
• FF11.0 (firebug 1.9 installed)
• Safari 5

DOCTYPE tested against: Description:

• When using two Views with Ext.ux.DataView.Draggable mixins, initialisation fails with an 'this.el is null' exception

Steps to reproduce the problem:

• Create two dataviews with Draggable mixins, see URL below

The result that was expected:

• Two dataviews are created which can both be dragged

The result that occurs instead:

• Exception on rendering, rendering stopped.

Test Case:

DATAVIEW 1:

 
Ext.define('VAM.view.imageeditor.elements.ProductImagesDataView', {
    extend:'Ext.view.View',
    alias:'widget.imageeditor.elements.ProductImagesDataView',
    itemId: 'productImagesDataView',
    store: 'Images',
    tpl: [
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    ],
    trackOver: true,
    overItemCls: 'x-item-over',
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images to display',
    requires : [
        'Ext.ux.DataView.DragSelector',
        'Ext.ux.DataView.Draggable'
    ],
    mixins: {
        dragSelector: 'Ext.ux.DataView.DragSelector',
        draggable   : 'Ext.ux.DataView.Draggable'
    },
    prepareData: function(data) {
        Ext.apply(data, {
            shortName: Ext.util.Format.ellipsis(data.name, 15),
            sizeString: Ext.util.Format.fileSize(data.size),
            dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
        });
        return data;
    },
    listeners: {
        render: function(v){
          VAMApp.getController('ImageEditor').initializeImageProductsDragZone(v);
        },
        selectionchange: function(dv, nodes ){
          var panel = Ext.ComponentQuery.query('[xtype=imageeditor.ImagesEditorPanel]')[0];
          console.log('selection has changed');
          panel.selectedImageNodes = nodes;
        }
    },
    
    initComponent: function() {
      this.mixins.dragSelector.init(this);
      this.mixins.draggable.init(this, {
        ddConfig: {
            ddGroup: 'someGroup'
        }
      });
      this.callParent(); 
    }
});

DATAVIEW 2:

Ext.define('VAM.view.imageeditor.elements.DiscountImagesDataView', {
    extend:'Ext.view.View',
    alias:'widget.imageeditor.elements.DiscountImagesDataView',
    itemId: 'discountImagesDataView',
    store: 'DiscountImages',
    tpl: [
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    ],
    trackOver: true,
    overItemCls: 'x-item-over',
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images to display',
    requires : [
        'Ext.ux.DataView.DragSelector',
        'Ext.ux.DataView.Draggable'
    ],
    mixins: {
        dragSelector: 'Ext.ux.DataView.DragSelector',
        draggable   : 'Ext.ux.DataView.Draggable'
    },
    prepareData: function(data) {
        Ext.apply(data, {
            shortName: Ext.util.Format.ellipsis(data.name, 15),
            sizeString: Ext.util.Format.fileSize(data.size),
            dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
        });
        return data;
    },
    listeners: {
        render: function(v){
          VAMApp.getController('ImageEditor').initializeImageDiscountDragZone(v);
        },
        selectionchange: function(dv, nodes ){
          var panel = Ext.ComponentQuery.query('[xtype=imageeditor.ImagesEditorPanel]')[0];
          panel.selectedDiscountNodes = nodes;
        },
    },
    initComponent: function() {
      this.mixins.dragSelector.init(this);
      this.mixins.draggable.init(this, {
        ddConfig: {
            ddGroup: 'someGroup'
        }
      });
      this.callParent(); 
    }
});

HELPFUL INFORMATION Screenshot or Video:

• None

See this URL for live test case: http://supranet.dyndns.org/VAM/viewport.html Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css
• custom css (include details)

Operating System:

• Windows 7
• WinXP Pro

[scottmartin]

Can you please verify if this still a problem with 4.1?
http://www.sencha.com/forum/showthread.php?194793

Regards,
Scott.

[Scorpie]

Hi Scott,

I have created a testcase for both 4.0.7 and 4.1 RC3. Bug still occurs.

Drop this code into an html file inside /example directory of 4.0.7 or 4.1 RC3

<html>
    <head>
        <title>Ext JS 4.0 Dataview bug</title>
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />
        <link rel="stylesheet" type="text/css" href="ux/DataView/DragSelector.css" />

        <script type="text/javascript" src="../ext-all-debug.js"></script>
        <script type="text/javascript" src="ux/DataView/DragSelector.js"></script>
        <script type="text/javascript" src="ux/DataView/Draggable.js"></script>
    </head>
    <body>
        <script>
      var myData = [['Test', 'sandbox/images/im48x48.png', 122067, 1333368392000]];

      var store = Ext.create('Ext.data.ArrayStore', {
        // store configs
        autoDestroy : true,
        storeId : 'ExampleStore',
        // reader configs
        idIndex : 0,
        fields : [{
          name : 'name'
        }, {
          name : 'url'
        }, {
          name : 'size',
          type : 'float'
        }, {
          name : 'lastmod',
          type : 'date',
          dateFormat : 'timestamp'
        }],
        data : myData
      });

      Ext.define('My.Example.Class1', {
        extend : 'Ext.view.View',
        
        requires : [
          'Ext.ux.DataView.DragSelector',
          'Ext.ux.DataView.Draggable'
        ],
        mixins: {
          dragSelector: 'Ext.ux.DataView.DragSelector',
          draggable   : 'Ext.ux.DataView.Draggable'
        },
        
        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.name, 15),
                sizeString: Ext.util.Format.fileSize(data.size),
                dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
            });
            return data;
        },
        
        itemSelector : 'div.thumb-wrap',

        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],

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

          this.store = store;

          this.callParent(arguments);
        }
      });
        
      Ext.define('My.Example.Class2', {
        extend : 'Ext.view.View',
        
        requires : [
          'Ext.ux.DataView.DragSelector',
          'Ext.ux.DataView.Draggable'
        ],
        mixins: {
          dragSelector: 'Ext.ux.DataView.DragSelector',
          draggable   : 'Ext.ux.DataView.Draggable'
        },
        
        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.name, 15),
                sizeString: Ext.util.Format.fileSize(data.size),
                dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
            });
            return data;
        },
    
        itemSelector : 'div.thumb-wrap',

        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],

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

          this.store = store;

          this.callParent(arguments);
        }
      });
    
    
      Ext.application({
        name : 'AM',

        launch : function() {
          Ext.create('Ext.container.Viewport', {
            layout : 'fit',
            items : [{
                xtype: 'panel',
                region: 'center',
                items: [
                    Ext.create('My.Example.Class1'),
                    Ext.create('My.Example.Class2')
                ]    
            }]
          });
        }
      });

        </script>

    </body>
</html>

[scottmartin]

Thank you for your report.

Regards,
Scott.

[Animal]

Well, I dug through that code, cleaned it up, and can't find a bug.

DragSelector is a plugin

And Draggable (which just makes dataview nodes draggable, does not make the view droppable on) works just fine.

Here's a cleaned up version which will drop into examples/<anywhere> and run with no modification.

Unless you can show me an actual bug, I plan to close this ticket.

<html>
<head>
    <title>Ext JS 4.0 Dataview bug</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/extjs/css/extjs.css" />
    <link rel="stylesheet" type="text/css" href="../ux/DataView/DragSelector.css" />
    <style type="text/css">
        .thumb-wrap {
            float: left;
            padding: 5px;
        }
        .x-item-selected {
            background: #eff5fb url(selected.gif) no-repeat right bottom;
            border: 1px solid #99bbe8;
            padding: 4px!important;
        }
    </style>

    <script type="text/javascript" src="../../ext-all.js"></script>
<script>
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    '*',
    'Ext.ux.DataView.DragSelector',
    'Ext.ux.DataView.Draggable'
]);
Ext.onReady(function() {
    var myData = [['Test', '../sandbox/images/im48x48.png', 122067, 1333368392000]];

    var store = Ext.create('Ext.data.ArrayStore', {
        // store configs
        autoDestroy : true,
        storeId : 'ExampleStore',
        // reader configs
        idIndex : 0,
        fields : [{
            name : 'name'
        }, {
            name : 'url'
        }, {
            name : 'size',
            type : 'float'
        }, {
            name : 'lastmod',
            type : 'date',
            dateFormat : 'timestamp'
        }],
        data : myData
    });

    Ext.define('My.Example.Class1', {
        extend : 'Ext.view.View',

        requires : [
            'Ext.ux.DataView.DragSelector',
            'Ext.ux.DataView.Draggable'
        ],
        mixins: {
            draggable   : 'Ext.ux.DataView.Draggable'
        },

        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.name, 15),
                sizeString: Ext.util.Format.fileSize(data.size),
                dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
            });
            return data;
        },

        itemSelector : 'div.thumb-wrap',

        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],

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

            this.store = store;

            this.callParent(arguments);
        }
    });

    Ext.define('My.Example.Class2', {
        extend : 'Ext.view.View',

        requires : [
            'Ext.ux.DataView.DragSelector',
            'Ext.ux.DataView.Draggable'
        ],
        mixins: {
            draggable   : 'Ext.ux.DataView.Draggable'
        },

        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.name, 15),
                sizeString: Ext.util.Format.fileSize(data.size),
                dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
            });
            return data;
        },

        itemSelector : 'div.thumb-wrap',

        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],

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

            this.store = store;

            this.callParent(arguments);
        }
    });

    Ext.create('My.Example.Class1', {
        renderTo: document.body,
        plugins: Ext.create('Ext.ux.DataView.DragSelector', {}),
        height: 200, width: 400,
        style: {
            border: '5px solid #99bbe8',
            margin: '20px',
            padding: '5px'
        }
    });
    Ext.create('My.Example.Class2', {
        renderTo: document.body,
        plugins: Ext.create('Ext.ux.DataView.DragSelector', {}),
        height: 200, width: 400,
        style: {
            border: '5px solid #99bbe8',
            margin: '20px',
            padding: '5px'
        }
    });
});
</script>
</head>
<body>
</body>
</html>

[Scorpie]

Thanks Animal, I will take a look into it later this week.