1. #1
    Touch Premium Member
    Join Date
    Jan 2012
    Posts
    126
    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
    36,754
    Answers
    3462
    Vote Rating
    828
    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
    126
    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
    126
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi