[FIXED-EXTJSIV-1769][4] Ext.draw - can't create draggable sprite

[LesJ]

I'm getting an error when I try to create a draggable sprite.

lineNumber 54546
message "me.surface.createSprite is not a function"
name "TypeError"

Works fine when draggable: false.

var drawComponent = Ext.create('Ext.draw.Component', {
    viewBox: false,
    items: [{
        type: 'path',
        id: "item_1",
        group: "path",
        stroke: "blue",
        "stroke-width": 3,
        draggable: true,
        fill: "red",
        path: 'M60 10L100 10L100 50L60 50L60 10Z'
    }]
});

Ext.create('Ext.Window', {
    width: 300,
    height: 300,
    layout: 'fit',
    items: [drawComponent]
}).show();

[steffenk]

message is right, there is no function createSprite, only createItem (and this is commented as temporary)

[steffenk]

ok, createSrite should be available in Svg or Vml after creating the surface. But it isn't at this point.
Even when i call initDraggable manually, it fails now, worked well in B3:

Ext.define('Shaper.Window', {
    extend: 'Ext.window.Window',
    alias: 'widget.shaperWindow',


    initComponent: function() {
        var canvas = Ext.create('Ext.draw.Component', {
            viewBox: false,
            itemId: 'canvas'

        });
        Ext.apply(this, {
            title: 'Sprites',
            width: 600,
            height: 400,
            x: 200,
            y: 200,
            layout: 'fit',
            hidden: false,
            maximizable: true,
            renderTo: Ext.getBody(),
            items: [canvas],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            text: 'Circle',
                            itemId: 'cCircle',
                            scope: this,
                            handler: this.drawShape
                        },
                        {
                            text: 'Rect',
                            itemId: 'cRect',
                            scope: this,
                            handler: this.drawShape
                        },
                        {
                            text: 'Text',
                            itemId: 'cText',
                            scope: this,
                            handler: this.drawShape
                        },
                        {
                            text: 'Path',
                            itemId: 'cPath',
                            scope: this,
                            handler: this.drawShape
                        },
                        {
                            text: 'Line',
                            itemId: 'cLine',
                            scope: this,
                            handler: this.drawShape
                        },
                        {
                            text: 'Polyline',
                            itemId: 'cPolyline',
                            scope: this,
                            handler: this.drawShape
                        },
                        {
                            text: 'Polygon',
                            itemId: 'cPolygon',
                            scope: this,
                            handler: this.drawShape
                        },
                        '->',
                        {
                            text: 'clear all',
                            scope: this,
                            handler: this.clearCanvas
                        }
                    ]}
            ]
        });
        this.callParent();
    },
    drawShape: function(button) {
        var sprite = null, canvas = this.down('#canvas'), x, y;
        switch (button.itemId) {
            case 'cCircle':
                sprite = new Ext.draw.Sprite({
                    type: 'circle',
                    x: 50,
                    y: 160,
                    radius: 50,
                    fill: 'red',
                    draggable: false
                });
                break;
            case 'cRect':
                sprite = new Ext.draw.Sprite({
                    type: 'rect',
                    x: 150,
                    y: 160,
                    width: 60,
                    height: 60,
                    fill: 'blue',
                    draggable: false
                });
                break;
            case 'cText':
                sprite = new Ext.draw.Sprite({
                    type: 'text',
                    x: 200,
                    y: 60,
                    width: 160,
                    height: 40,
                    text: 'Text-Sprite',
                    font: '12px Arial',
                    'stroke-width': 4,
                    fill: 'green',
                    draggable: false
                });
                break;
            case 'cPath':
                sprite = new Ext.draw.Sprite({
                    type: 'path',
                    path: 'M27.998,2.266c-2.12-1.91-6.925,0.382-9.575,1.93c-0.76-0.12-1.557-0.185-2.388-0.185c-3.349,0-6.052,0.985-8.106,2.843c-2.336,2.139-3.631,4.94-3.631,8.177c0,0.028,0.001,0.056,0.001,0.084c3.287-5.15,8.342-7.79,9.682-8.487c0.212-0.099,0.338,0.155,0.141,0.253c-0.015,0.042-0.015,0,0,0c-2.254,1.35-6.434,5.259-9.146,10.886l-0.003-0.007c-1.717,3.547-3.167,8.529-0.267,10.358c2.197,1.382,6.13-0.248,9.295-2.318c0.764,0.108,1.567,0.165,2.415,0.165c5.84,0,9.937-3.223,11.399-7.924l-8.022-0.014c-0.337,1.661-1.464,2.548-3.223,2.548c-2.21,0-3.729-1.211-3.828-4.012l15.228-0.014c0.028-0.578-0.042-0.985-0.042-1.436c0-5.251-3.143-9.355-8.255-10.663c2.081-1.294,5.974-3.209,7.848-1.681c1.407,1.14,0.633,3.533,0.295,4.518c-0.056,0.254,0.24,0.296,0.296,0.057C28.814,5.573,29.026,3.194,27.998,2.266zM13.272,25.676c-2.469,1.475-5.873,2.539-7.539,1.289c-1.243-0.935-0.696-3.468,0.398-5.938c0.664,0.992,1.495,1.886,2.473,2.63C9.926,24.651,11.479,25.324,13.272,25.676zM12.714,13.046c0.042-2.435,1.787-3.49,3.617-3.49c1.928,0,3.49,1.112,3.49,3.49H12.714z',
                    fill: 'rgb(156, 178, 248)',
                    x: 100,
                    y: 20,
                    draggable: false,
                    scale: {
                        x: 10,
                        y: 10
                    }

                });
                break;
            case 'cLine':
                sprite = new Ext.draw.Sprite({
                    type: 'line',
                    x: 0,
                    y: 0,
                    x1: 300,
                    y1: 300,
                    stroke: '#000000',
                    'stroke-width': 2,
                    draggable: false
                });
                break;
            case 'cPolygon':
                sprite = new Ext.draw.Sprite({
                    type: 'polygon',
                    points: '60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60',
                    fill: 'red',
                    draggable: false
                });
                break;
        }
        if (sprite) {
            canvas.surface.add(sprite);
            sprite.initDraggable();
            sprite.show(true);
        }
    },
    clearCanvas: function() {
        var surface = this.down('#canvas').surface;
        surface.removeAll();
    }
});

Ext.onReady(function() {
    Ext.widget('shaperWindow', {}).show();
}); 

[Jamie Avins]

Thank you for the report, this has been fixed for the next release.

[LesJ]

This is still not fixed in 4.0.1.

Use the same example that I provided. You will get an error in Firefox 4:

TypeError: this.el is undefined
[Break On This Error] if (this.el.dom.childNodes[idx...by 2 to account for defs and bg rect
Svg.js (line 552)

Comment out 'draggable: true' and the error disappears.

[LesJ]

I modified the example and now it works in FF 4, but see what happens in IE7. The sprite disappears when you try to drag it.

var drawComponent = Ext.create('Ext.draw.Component', {
    viewBox: false,
    items: []
});

Ext.create('Ext.Window', {
    width: 300,
    height: 300,
    layout: 'fit',
    items: [drawComponent]
}).show();

drawComponent.surface.add({
        type: 'path',
        id: "item_1",
        group: "path",
        stroke: "blue",
        "stroke-width": 3,
        draggable: true,
        fill: "red",
        path: 'M60 10L100 10L100 50L60 50L60 10Z'
    }).show(true);

[LesJ]

Using 4.0.2 RC3... dragging still doesn't work in IE7 ( I didn't try other IE versions). Use the code is post #6 to recreate this problem.

[utkarshgaur]

Any fixes? and why does the title say FIXED? this isn't fixed.

Error in chrome:

"Cannot read property 'dom' of undefined"

(in applyZindex, called by createSpriteElement)