Ext.draw: how to control sprites?

I'm trying to make a drawing application with ExtJS4, the MVC-way.

For this, I want to make several widgets. This is my code for a widget:

VIEW:

Ext.define('VP.view.fields.Field' ,{
    extend: 'Ext.draw.Sprite',
    alias: 'widget.field',

    constructor: function() {
        var parentConfig = {
            id: 'field',
            fill: '#FFFF00',
            type: 'rect',
            width: '100%',
            height: '100%',
            x: 0,
            y: 0
        };
        this.callParent([parentConfig]);
    }
});

CONTROLLER:

Ext.define('VP.controller.Fields', {
    extend: 'Ext.app.Controller',

    views: [
        'fields.Field'
    ],

    init: function() {
        console.log('Initialized Field controller!');
        var me = this;
        me.control({
            'field': { //trying to control the widget.field, this fails
            //'viewport > draw[surface]': { //this controls the surface successfully
            //'viewport > draw[surface] > field': { //fails
                click: this.addObject
            }
        });
    },开发者_如何学编程

    addObject : function(event,el){
        console.log(el);
        //console.log(drawComponent);
    }
});

How can I control this custom sprite? Can only Ext.components be controlled by a controller? (Ext.draw.Sprite doesn't extend Ext.component).

---

In addition to my previous answer, you could add the listener on the sprite and fire an event on some object. Then you could catch it in the controller.

Example:

spriteObj....{
    listeners: {
        click: {
            var canvas = Ext.ComponentQuery.query('draw[id=something]')[0];
            var sprite = this;
            canvas.fireEvent('spriteclick',sprite);
        }
    }
}

In the controller:

init: function() {
    console.log('Initialized Field controller!');
    var me = this;
    me.control({
        'draw[id=something]': {
            spriteclick: this.doSomething            
        }
    });
},

doSomething: function (sprite) {
    console.log(sprite);
}

---

I've been messing around with the same thing. It appears that you can't do it because it is an svg object that Ext just 'catches' and adds a few events to it. Because it doesn't have an actual alias (xtype) because it is not a component, it cannot be queried either. You have to do the listeners config on the sprite unfortunately.

Also, I tried doing the method like you have of extending the sprite. I couldn't get that to work, I assume because it is not a component.

I was able to keep this in the all in the controller because I draw the sprites in the controller. So, I can manually define the listeners in there and still use all the controller refs and such. Here's an example of one of my drawing functions:

drawPath: function(canvas,points,color,opacity,stroke,strokeWidth, listeners) {
    // given an array of [x,y] coords relative to canvas axis, draws a path.
    // only supports straight lines
    if (typeof listeners == 'undefined' || listeners == "") {
        listeners = null;
    }
    if (stroke == '' || strokeWidth == '' || typeof stroke == 'undefined' || typeof strokeWidth == 'undefined') {
        stroke = null;
        strokeWidth = null;
    }
    var path = path+"M"+points[0][0]+" "+points[0][1]+" "; // start svg path parameters with given array
    for (i=1;i<points.length;i++) {
        path = path+"L"+points[i][0]+" "+points[i][1]+" ";
    }
    path = path + "Z"; // end svg path params
    var sprite = canvas.surface.add({
        type: 'path',
        opacity: opacity,
        fill:color,
        path: path,
        stroke:stroke,
        'stroke-width': strokeWidth,
        listeners: listeners
    }).show(true);
    this.currFill = sprite;
}

You can see where I just pass in the parameter for the listeners and I can define the object elsewhere. You could do this in your own function or wherever in the controller. While the actual sprite should be in the view, this keeps them a little more dynamic and allows you to manipulate them a little easier.