1. #1
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    0
    gruppler is on a distinguished road

      0  

    Default Draggable vs Panel.draggable

    Draggable vs Panel.draggable


    I'm trying to make a panel draggable and add my own handlers for tap and swipe events.

    I've tried putting the draggable options in the 'draggable' attribute when creating the panel, but when my handler is fired, I can't move the panel, presumably because it doesn't have a "moveTo" function.

    I've tried creating a Ext.util.Draggable object, but regardless of the arguments I pass it, I get the error "Uncaught TypeError: Cannot call method 'addCls' of null." This leads me to believe that my version of the framework is out of date (v1.1.0?), but I'm not receiving the email containing the download link for the free commercial version.

    So, I'm wondering what the difference is between the two methods of creating a draggable element, and why the panel doesn't have the moveTo method if the Ext.util.Draggable object does. If I use the first method, is there a separate draggable child element? If so, how do I access it?

    I cannot find any relevant documentation, tutorials, or examples for manually moving a panel. I've been searching for hours for help doing something that, in my mind, is very trivial and could be accomplished in seconds with JQuery.

    Any help on any part of these issues would be greatly appreciated.

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    How are you calling util.Draggable? can you post some code.

    Make sure you have your code inside Ext.setup

    Code:
    Ext.setup({ 
    	   useLoadingMask: true, 
    	   fullscreen: true, 
    	   onReady: function() { 
            
         new Ext.util.Draggable('idOFPanel', {
                    revert: true
                    });
      	}
      });

  3. #3
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    0
    gruppler is on a distinguished road

      0  

    Default


    Thanks for the quick reply!

    Here's the relevant part of my code:

    Code:
    Ext.setup({
        onReady: function(){
            var bottomPanelDrop = new Ext.Element({
                id: 'bottomPanelDrop',
                droppable: {
                    group: 'bottomPanel'
                }
            });
    
            var bottomPanel = new Ext.Panel({
                id: 'bottomPanel',
                items: [
                    bottomPanelHandle,
                    bottomPanelContent
                ],
                draggable: {
                    group: 'bottomPanel',
                    direction: 'vertical',
                    constrain: 'bottomPanelDrop',
                    animationDuration: 150,
                    listeners: {
                        // I'd like to move this to be either fully exposed or fully hidden after dragging or tapping
    
                        drag: function(target, e){
                            var limit = window.innerHeight - 26;
                            if(e.pageY > limit){
                                this.el.setY(window.innerHeight - 15);
                                // console.log(this.el);
                            }
                        }
                    }
                },
                listeners: {
                    el: {
                        tap: function(){
                            if(bottomPanel.isOpen){
                                bottomPanel.isOpen = false;
                                new Ext.Anim({
                                    duration: 300,
                                    out: false,
                                    autoClear: false,
                                    to: {
                                         '-webkit-transform': 'translate3d(0px, 0px, 0px)'
                                    }
                                }).run(this);
                                console.log('tap', this, bottomPanel.isOpen);
                            }else{
                                bottomPanel.isOpen = true;
                                new Ext.Anim({
                                    duration: 300,
                                    out: false,
                                    autoClear: false,
                                    to: {
                                         '-webkit-transform': 'translate3d(0px, -165px, 0px)'
                                    }
                                }).run(this);
                                console.log('tap', this, bottomPanel.isOpen);
                            };
                        }
                    }
                }
            });
        }
    });
    When I try "new Ext.util.Draggable('test')", I get the error I mentioned in the first post.

    The problem with the 'tap' event handler above is that the position of the panel is no longer in sync with the draggable properties. For example, if I tap the panel, it slides up. If I then drag it, it jumps to the bottom where it was before I tapped it. I'm not sure how to access the draggable properties of the panel, nor what the right way to implement this behavior is.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    I dont see 'test' element in the code?

    Also you are missing fullscreen attribute unless you have another panel with this setting?
    Code:
    fullscreen:true,

  5. #5
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    0
    gruppler is on a distinguished road

      0  

    Default


    The test element isn't in the code because it breaks it. (If I enter "new Ext.util.Draggable('test')" into the Webkit JS console, I get the same error as when I include it in the code.)

    My full code is very long, so I only included the parts I thought were relevant. I do have a fullscreen panel. Everything looks good when I test it, except for the dragging issues I described.

    Is there a way to manually set the location for a draggable element?

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    You can set x and y or use setPosition()

  7. #7
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    0
    gruppler is on a distinguished road

      0  

    Default


    Quote Originally Posted by bharatn View Post
    You can set x and y or use setPosition()
    What object would I use setPosition on? I can't seem to find one with that method.

    As you can see, I had to attach the "tap" event handler to bottomPanel.el, and the "drag" handler to the "draggable" property of bottomPanel. The "draggable" property doesn't seem to allow handlers for any events other than "drag". This seems overly confusing to me, and I don't understand why I can't attach both handlers to the same object.

  8. #8
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    0
    gruppler is on a distinguished road

      0  

    Default


    I was using the minified version of sencha-touch.js. When I started using the debug version, I was able to create a util.Draggable object. I still haven't achieved the behavior I'm looking for yet, but I'm making progress.

  9. #9
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    0
    gruppler is on a distinguished road

      0  

    Default


    Here's what I have now. The problem is that when I manually set the CSS transform property, and then drag the panel, it jumps to the position it was before I manually set the position. I cannot find a better way to set the position, though, since I need to use the CSS transform instead of absolute positioning.

    Also, the "cancelSelector" property doesn't seem to have any effect.

    Code:
    var bottomPanel = new Ext.Panel({
        id: 'bottomPanel',
        items: [
            bottomPanelHandle,
            bottomPanelContent
        ],
        draggable: {
            group: 'bottomPanel',
            direction: 'vertical',
            constrain: 'bottomPanelDrop',
            useCssTransform: true,
            animationDuration: 150,
            listeners: {
                drag: function(target, e){
                    if(target.offset.y > 0){
                        bottomPanel.el.setStyle("-webkit-transform", "translate3d(0,0,0)");
                    }
                },
                dragend: function(target, e){
                    if(target.offset.y > -165 && target.offset.y < 0){
                        bottomPanel.fireEvent(bottomPanel.isOpen ? "close" : "open");
                    }else{
                        bottomPanel.isOpen = target.offset.y < 0;
                    }
                }
            }
        },
        listeners: {
            el: {
                tap: function(target, e){
                    bottomPanel.fireEvent(bottomPanel.isOpen ? "close" : "open");
                }
            }
        }
    });
    
    
    bottomPanel.on("open", function(){
        bottomPanel.isOpen = true;
        new Ext.Anim({
            duration: 300,
            out: false,
            autoClear: false,
            to: {
                 '-webkit-transform': 'translate3d(0px, -165px, 0px)'
            }
        }).run(bottomPanel.el);
    });
    
    
    bottomPanel.on("close", function(){
        bottomPanel.isOpen = false;
        new Ext.Anim({
            duration: 300,
            out: false,
            autoClear: false,
            to: {
                 '-webkit-transform': 'translate3d(0px, 0px, 0px)'
            }
        }).run(bottomPanel.el);
    });

  10. #10
    Touch Premium Member
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    0
    gruppler is on a distinguished road

      0  

    Default


    I was able to finally achieve the behavior I wanted by removing the "constrain" property and manually constraining in the "drag" even handler.

Thread Participants: 1

Tags for this Thread

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