Ext.draw : comment contrôler les sprites ?

Question

J'essaie de créer une application de dessin avec ExtJS4, à la manière MVC.

Pour ce faire, je souhaite créer plusieurs widgets. Voici mon code pour un 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]);
    }
});

CONTRÔLEUR :

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

Comment puis-je contrôler ce sprite personnalisé ? Est-ce que seuls les composants Ext.components peuvent être contrôlés par un contrôleur ? (Ext.draw.Sprite n'étend pas Ext.component).

Answer 1

En plus de ma réponse précédente, vous pourriez ajouter l'écouteur sur le sprite et déclencher un événement sur un objet. Ensuite, vous pourriez l'attraper dans le contrôleur.

Exemple :

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

Dans le contrôleur :

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

J'ai fait la même chose. Il semble que vous ne puissiez pas le faire parce que c'est un objet svg qu'Ext "attrape" simplement et lui ajoute quelques événements. Comme il n'a pas d'alias (xtype) parce que ce n'est pas un composant, il ne peut pas non plus être interrogé. Vous devez configurer les listeners sur le sprite malheureusement.

Aussi, j'ai essayé de faire la méthode que vous avez utilisée pour étendre le sprite. Je n'ai pas réussi à faire fonctionner cette méthode, je suppose que c'est parce qu'il ne s'agit pas d'un composant.

J'ai pu garder tout cela dans le contrôleur parce que je dessine les sprites dans le contrôleur. Ainsi, je peux définir manuellement les listeners dans le contrôleur et toujours utiliser toutes les références du contrôleur et autres. Voici un exemple d'une de mes fonctions de dessin :

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

Vous pouvez voir que je passe simplement le paramètre pour les écouteurs et que je peux définir l'objet ailleurs. Vous pouvez le faire dans votre propre fonction ou n'importe où dans le contrôleur. Bien que le sprite réel doive être dans la vue, cela les rend un peu plus dynamiques et vous permet de les manipuler un peu plus facilement.