Javascript Ext.draw：如何控制精灵？

我正在尝试使用ExtJS4（MVC方式）制作一个绘图应用程序

为此，我想制作几个小部件。这是我的小部件代码：

视图：

控制器：

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);
    }
});

---

如何控制此自定义精灵？控制器只能控制外部组件吗？（Ext.draw.Sprite没有扩展Ext.component）。

我一直在搞同样的事情。看起来您不能这样做，因为它是一个svg对象，Ext只是“捕获”了它并向它添加了一些事件。因为它不是组件，所以没有实际的别名（xtype），所以也无法查询它。不幸的是，您必须在精灵上进行侦听器配置

此外，我还尝试了像您一样扩展sprite的方法。我不能让它工作，我想是因为它不是一个组件

我能够将其保存在控制器中的all中，因为我在控制器中绘制精灵。因此，我可以在其中手动定义侦听器，并且仍然使用所有控制器引用等。下面是我的一个绘图函数的示例：

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;
}

drawPath:函数（画布、点、颜色、不透明度、笔划、笔划宽度、侦听器）{
//给定相对于画布轴的[x，y]坐标数组，绘制一条路径。
//只支持直线
if（监听器的类型=='undefined'| |监听器==“”）{
侦听器=null；
}
如果（笔划=“”| |笔划宽度=“”| |笔划类型=“”“未定义”| |笔划宽度类型=“”“未定义”）{
笔划=零；
strokeWidth=null；
}
var path=path+“M”+点[0][0]+“”+点[0][1]+“”；//使用给定数组启动svg路径参数
对于（i=1；i除了我前面的答案之外，您可以在精灵上添加侦听器，并在某个对象上触发事件。然后您可以在控制器中捕获它

例如：

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

在控制器中：

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

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

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

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