Page 1 of 2 12 LastLast
Results 1 to 10 of 14

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

    You found a bug! We've classified it as EXTJS-6670 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

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

    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
      Code:
      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
      Code:
      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


    • Ensure the drag rectangular appears selecting some images.
    • Run this code in the Console.
      Code:
      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.
      Code:
      dragSelector.proxy.destroy();
      delete dragSelector.proxy;
    • Though, sure, the DragSelector class requires some deeper modifications.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449

    Default

    Thanks for the report.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    122

    Default

    Any news on this ?

    On my controller method, I have a store load :
    Code:
    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

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    122

    Default

    I almost succeed by reassigning the store to the SelectionModel
    Code:
                /*** 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

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    Quote Originally Posted by Tchinkatchuk View Post
    - the region square is not visible after the second reload
    Hi @Tchinkatchuk,

    Please clarify did you try this?

    Quote Originally Posted by Daniil View Post
    Possible fix:
    • I have workarounded the issue calling the following code after refresh.
      Code:
      dragSelector.proxy.destroy();
      delete dragSelector.proxy;

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    122

    Default

    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.

  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    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.

  8. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    122

    Default

    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 :

    Code:
    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
    Code:
               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

  9. #9
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    Quote Originally Posted by Tchinkatchuk View Post
    If I destroy the dragSelector proxy, nothing works anymore
    Please clarify where do you do it?

  10. #10
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    122

    Default

    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.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •