Drag a draw component

[rando]

I'm trying to give drag and drop capabilities to a draw component created with touch-charts.js. I have a simple code that draws a red rectangle but I fail to call Ext.util.Draggable which returns an error:

• "Uncaught TypeError: Cannot call method 'addCls' of null"

Is this possible with touch-charts.js?

...
    onReady: function() {
       
        // Create a draw component
        var drawComponent = new Ext.draw.Component({
            height: 400,
            width: 400,
            viewBox: false
        });


        // Create a window to place the draw component in
        this.rootpanel = new Ext.Panel({
            fullscreen:true,
            layout: 'fit',
            items: [drawComponent]
        });
 
        var redRectangle = drawComponent.surface.add({
            type: 'path',
            path: 'M 50 50 h 300 v 300 h -300 Z',
            fill: '#F44'
        });

       redRectangle.animate({
            duration: 1
        });

        new Ext.util.Draggable(redRectangle, {
            revert: true
        });

[Jamie Avins]

We aren't looking to have full support for this until the next major version.

[rando]

Thx Jamie.

For those interested, passing the drawcomponent.id actually allows to DD the component:

    drawComponent.surface.on({
       'touchstart': function(evt,html,obj) {
            new Ext.util.Draggable(drawComponent.id, { draggable: { constrain: true}} );
        }
    });

Only caveat is that I didn't find a way to remove the listener to disable the drag&drop. All my intents lead to error messages so far.

[rando]

After catching up with Sencha tutorials, I eventually figured out that setting the draggable property to true is enough to drag a drawComponent. Nevertheless the drawcomponent doesn't move upon touching the element. The drag starts after touching it at least a second or so on an iPad.

Here is a sample code that shows a smooth behaviour with a style component (which moves immediately when touches) while the drawComponent lags.

Ext.setup({
    tabletStartupScreen: 'images/sencha_ipad.png',
    phoneStartupScreen: 'images/sencha_iphone.png',
    addGlossToIcon: false,
    onReady: function() {
                    
        var drawComponent = new Ext.draw.Component({
          draggable: true,
          width: 200,
          height: 200,
          items: [{
            type: 'circle',
            fill: '#ffc',
            radius: 100,
            x: 100,
            y: 100
          }]
        });
 
        
        //add the component to the panel
        var panel = new Ext.Panel({
          fullscreen: true,
          title: 'Yellow Circle',
           layout: {
                type: 'vbox',
                align: 'center', 
                pack: 'center'
            },
          items: [{ style:  "position: absolute; border: 1px solid black; font-size: 10px; padding: 50px;background: #C6D92C; z-index: 2;", draggable:true}, drawComponent]
        });
       
        //make sure we render the image
        drawComponent.surface.renderFrame();
                    
    }
});

Can anyone shed some light on this behaviour? And what would I need to extend/override to fix this behaviour which is ruining my application responsiveness.