Question

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

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

查看：

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

控制器：

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.components只能由控制器控制吗？（Ext.draw.Sprite不扩展Ext.component）。

Answer 1

除了我之前的回答，您可以在精灵上添加侦听器并在某个对象上触发事件。然后你可以在控制器中捕获它。

示例：

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

Answer 2

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

另外，我尝试使用扩展精灵的方法。我不能让它工作，我假设因为它不是一个组件。

我能够将它保存在控制器中的所有内容中，因为我在控制器中绘制了精灵。所以，我可以在那里手动定义监听器，并仍然使用所有控制器refs等。这是我的一个绘图函数的示例：

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

你可以看到我刚刚传入监听器参数的位置，我可以在其他地方定义对象。您可以在自己的功能中或控制器中的任何位置执行此操作。虽然实际的精灵应该在视图中，但这会使它们更加动态，并允许您更轻松地操作它们。

Ext.draw：如何控制精灵？

2 个答案: