Draggable vs Panel.draggable

[gruppler]

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.

[bharatn]

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

Make sure you have your code inside Ext.setup

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

[gruppler]

Thanks for the quick reply!

Here's the relevant part of my 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.

[bharatn]

I dont see 'test' element in the code?

Also you are missing fullscreen attribute unless you have another panel with this setting?

fullscreen:true,

[gruppler]

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?

[bharatn]

You can set x and y or use setPosition()

[gruppler]

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.

[gruppler]

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.

[gruppler]

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.

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);
});

[gruppler]

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