javascript - 分机绘制 : how to control sprites?

Question

我正在尝试使用 ExtJS4(MVC 方式)制作绘图应用程序。

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

查看:

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

我如何控制这个自定义 Sprite ？ Ext.components 只能由 Controller 控制吗？ (Ext.draw.Sprite 不扩展 Ext.component)。

Answer 1

除了我之前的回答之外，您还可以在 sprite 上添加监听器并在某个对象上触发事件。然后你可以在 Controller 中捕获它。

例子:

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

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