Hybrid View

    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
    Vote Rating
    2
    rando is on a distinguished road

      0  

    Default Unanswered: Drag a draw component

    Unanswered: 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 - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    19
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    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
    Vote Rating
    2
    rando is on a distinguished road

      0  

    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
    Vote Rating
    2
    rando is on a distinguished road

      0  

    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.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar