[4.1.1 rc2] Ext.ux.DataView.DragSelector bugs.

[Daniil]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1 rc2

Browser versions tested against:

• Any

Description:

• There are several issues. Start with the initial one for me. If you'd call

  dataview.refresh();

  then the drag rectangular doesn't appear anymore. Please see the screenshot to understand what rectangular I am talking about.
• My first thought to workaround that issue was reinitializing the plugin. First, I need to destroy that plugin. But I can't see the destroy method. I would consider it a bug as well, because it creates the Ext.dd.DragTracker, Ext.util.Region, Ext.Element instances, which, as far as I can understand, won't be destroyed with DataView.
• Also I wanted to access the plugin using the DataView getPlugin method and the DragSelector pluginId, but discovered that my DragSelector instance has not got "pluginId" from the config. I have realized that the DragSelector class is not inherited from the Ext.AbstractPlugin and there is no

  Ext.apply(this, config);

  calling

Steps to reproduce the problem:

• Here are the steps to reproduce the initial issue with disappearing the drag rectangular.
• Please open, for example, in Chrome

http://docs.sencha.com/ext-js/4-1/#!/example/view/data-view.html

• Ensure the drag rectangular appears selecting some images.
• Run this code in the Console.

  window.frames[0].Ext.getCmp('images-view').items.get(0).refresh()

• Try to select the images again - no drag rectangular. Though the images are still selectable.

The result that was expected:

• The drag rectangular still appears.

The result that occurs instead:

• The drag rectangular doesn't appear anymore

Test Case:
http://docs.sencha.com/ext-js/4-1/#!/example/view/data-view.html


HELPFUL INFORMATION

Screenshot or Video:

• The drag rectangular that I am talking about which doesn't appear anymore after refresh.

1.jpg
Possible fix:

• I have workarounded the issue calling the following code after refresh.

  dragSelector.proxy.destroy();
  delete dragSelector.proxy;

• Though, sure, the DragSelector class requires some deeper modifications.

[mitchellsimoens]

Thanks for the report.

[Tchinkatchuk]

Any news on this ?

On my controller method, I have a store load :

callback: function(records, operation, success) 
                {
                    this.getMediasDataview().refresh();
                    this.getMediasDataview().plugins[0].proxy.refresh();
                }

But this does not "reload" the selector.

Do you have a solution ?

Thanks

[Tchinkatchuk]

I almost succeed by reassigning the store to the SelectionModel

            /*** Filters are set                                                ***/
            mediasStore.load(
            {
                scope: this,
                params:
                {
                    type        : 'import',
                    import_id   : record.raw.id
                },
                callback: function(records, operation, success) 
                {
                    // Bug lors d'un reload d'une dataview avec un dragSelector
                    this.getMediasDataview().getSelectionModel().store = mediasStore;
                    // Refresh de la grille
                    this.getMediasDataview().refresh();
                }
            });

The selection works by click & drag.
But :
- selection by "ctrl + click" does not work at all
- the region square is not visible after the second reload

[Daniil]

- the region square is not visible after the second reload

Hi @Tchinkatchuk,

Please clarify did you try this?

Possible fix:

• I have workarounded the issue calling the following code after refresh.

  dragSelector.proxy.destroy();
  delete dragSelector.proxy;

[Tchinkatchuk]

hi @Daniil & thx for the help.

I have tried your tip but it does not work at all for me.
Without it, I do not see the drag selector but selection works.
With the proxy deletion, the selector does not appear and selection failed.

I do not understand how this deletion could reload the selector.
I'll still try to find out.

[Daniil]

I think posting a test case can help me to try sort it out.

Also it will help the ExtJS team in fixing this case.

[Tchinkatchuk]

Hi.
You're right, it could be much easier.

I'll try to print my code properly and explain the results at the end.

Here's my panel and dataview file :

Ext.define('DAM.view.medias.panel.dataview.View',
{
    extend  : 'Ext.view.View', 
    xtype   : 'dam-view-medias-panel-dataview-view',
    mixins  : 
    {
        dragSelector: 'Ext.ux.DataView.DragSelector',
        draggable   : 'Ext.ux.DataView.Draggable'
    },


    initComponent: function()
    {
        this.store = Ext.create('DAM.store.DamMedias', {}); 
        Ext.apply(this, 
        {
            tpl     :
            [
                '<tpl for=".">',
                    '<div class="thumb-wrap" id="media_{id}">',
                        '<div class="thumb">',
                            '<img src="<tpl if="source">{source.Thumbnails.taille1}</tpl>{thumb}" title="<tpl if="source">{source.Filename}</tpl>{filename}" width="150px" />',
                        '</div>',
                        '<div class="infos">',
                            '{name}',
                        '</div>',
                        '<div class="icons">',
                            '<input type="checkbox" name="dragselector[]" value="{id}" />',
                            '<span class="icon-pencil" action="edit"></span>',
                            '<span class="icon-magnifier" action="magnify"></span>',
                        '</div>',
                    '</div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ],
            
            title : "bite",
            multiSelect     : true,
            singleSelect    : true,
            autoScroll      : true,
            trackOver       : true,
            overItemCls     : 'x-item-over',
            itemSelector    : 'div.thumb-wrap',
            
            listeners       : 
            {
                selectionchange: function(dv, nodes )
                {
                    var l = nodes.length,
                        s = l !== 1 ? 's' : '';
                    this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
                }
            }
        });
        this.mixins.dragSelector.init(this);
        this.mixins.draggable.init(this, 
        {
            ddConfig    : 
            {
                ddGroup: 'mediaDropGroup'
            },
            ghostTpl: [
                '<tpl for=".">',
                    '<img src="{thumb}" />',
                    '<tpl if="xindex % 4 == 0"><br /></tpl>',
                '</tpl>',
                '<div class="count">',
                    '{[values.length]} images selected',
                '<div>'
            ]
        });
        this.callParent();
    }
});






Ext.define('DAM.view.medias.panel.Dataview', 
{
  
    extend  : 'Ext.Panel', 
    xtype   : 'dam-view-medias-panel-dataview',




    requires: 
    [
        'Ext.view.View',
        'Ext.ux.DataView.DragSelector',
        'DAM.view.medias.panel.Pagination'
    ],


    initComponent: function()
    {
        Ext.apply(this, 
        {
            layout      :
            {
                type    : 'fit'
            },
            items       : 
            {
                xtype       : 'dam-view-medias-panel-dataview-view',
                trackOver   : true
            },
            dockedItems:
            [
                {
                    dock    : 'bottom',
                    xtype   : 'pagingtoolbar'
                }
            ]
        });
        this.callParent();
    }
  
});

Here's my store reload

           store.load(
            {
                scope: this,
                params:
                {
                    type        : type,
                    id          : param.raw.id,
                    from_date   : param.raw.from_date,
                    to_date     : param.raw.to_date
                },
                callback: function(records, operation, success) 
                {
                }
            });

First load :
- the single click selector works
- the drag selector is visible
- the drag selector works
- the cmd+click does not work

More load :
- the single click selector works
- the drag selector is not visible
- the drag selector works
- the cmd+click does not work

If I destroy the dragSelector proxy, nothing works anymore

[Daniil]

If I destroy the dragSelector proxy, nothing works anymore

Please clarify where do you do it?

[Tchinkatchuk]

I do the store load in a controller event method.
I have a tree.
I control the itemclick on the nodes

When a node is clicked, the store is reloaded with the node id parameter.

I'll try to destroy and recreate the dataview with the store and see what happens instead.

Sorry for my bad writing english level.