Results 1 to 4 of 4

Thread: Drag a draw component

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    26

    Default Drag a draw component

    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?
    Code:
    ...
        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
            });

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17

    Default

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

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    26

    Default

    Thx Jamie.

    For those interested, passing the drawcomponent.id actually allows to DD the component:
    Code:
        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.

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    26

    Default

    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.

    Code:
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •