1. #1
    Touch Premium Member
    Join Date
    Jan 2012
    Posts
    142
    Vote Rating
    1
    jmcfet is on a distinguished road

      0  

    Default Unanswered: make dataview dynamic elements draggable

    Unanswered: make dataview dynamic elements draggable


    I have a dataview that is populated using a store and template so the process is dynamic. I then want to make each of the container Divs (see template) draggable and use the following code. I would have expected just the container divs(image + name) to be draggable but instead the whole DataView is draggable. Was wondering what i am doing wrong?

    Code:
    Ext.define('MyApp.view.allImages', {    extend: 'Ext.dataview.DataView',
        xtype: 'cams',
        requires: [
            'MyApp.store.images'
        ],
        config: {
          
            title: 'Test',
            store: 'images',
            baseCls: 'camera-list',
    
    
            itemTpl: [
                '<div id="camimage">',
                    '<div class="image" style="background-image:url({fullimage})"></div>',
                    '<div class="name">{address}</div>',
                '</div>'
            ].join(''),
            records: null,
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'Gainesville'
                },
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Path1'
                        },
                        {
                            xtype: 'button',
                            text: 'Path2'
                        },
                        {
                            xtype: 'button',
                            text: 'Path3'
                        }
                    ]
                }
            ]
            
        },
        initialize: function () {
            this.callParent(arguments);
            //get the divs that we want to make draggable
            var images = this.element.select("div[id='camimage']");
     
           	Ext.each(images.elements, function (imageElement) {
               
                imageElement.draggable = true;
            });
    
    
        }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just doing

    Code:
    imageElement.draggable = true;
    won't do anything. You can try to create Ext.util.Draggable passing in the element you want draggable. Looking at the source there is an element config.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Jan 2012
    Posts
    142
    Vote Rating
    1
    jmcfet is on a distinguished road

      0  

    Default


    I tried the following code with the same result, the entire dataview is draggable I also checked the imageElement and it looks correct as it contains my HTML:

    Code:
     Ext.each(images.elements, function (imageElement) {            imageElement.draggable = new Ext.util.Draggable({
                    element: imageElement,
                    listeners: {
                        dragstart: function (self, e, startX, startY) {
                            console.log("test dragStart[" + startX + ":" + startY + "]");
                        },
                        drag: function (self, e, newX, newY) {
                            console.log("test drag[" + newX + ":" + newY + "]");
                        },
                        dragend: function (self, e, endX, endY) {
                            console.log("test dragend[" + endX + ":" + endY + "]");
                        }
                    }
                });
         
            });

  4. #4
    Touch Premium Member
    Join Date
    Jan 2012
    Posts
    142
    Vote Rating
    1
    jmcfet is on a distinguished road

      0  

    Default


    There are actually 2 problems here 1) the whole containing DataView moving was solved by setting the scrollable config on the dataview to false. of course this has huge side-effects but another battle as I think the Sencha draggable code is a little weak as one needs to scroll and drag. 2) I changed the select to:

    var images = this.element.select("div[class='image']");

    as a static Id cannot be used in this case and the class solves the issue

Thread Participants: 1