Ext.draw: how to manage sprites?

Question

I am trying to make a drawing application using ExtJS4, MVC-way.

For this, I want to make some widgets. This is my widget code:

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 manage this custom sprite? Can only Ext.com controllers control the controller? (Ext.draw.Sprite does not extend Ext.component).

Answer 1

In addition to my previous answer, you can add a listener to the sprite and fire the event on some object. Then you can 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); } 

Answer 2

I communicated with the same. It seems you cannot do this because it is an svg object that Ext just “catches” and adds several events to it. Since it does not have an actual alias (xtype), because it is not a component, it also cannot be queried. Unfortunately, you need to configure the listeners on the sprite.

In addition, I tried to make such a method as if you had expanded the sprite. I could not get this to work, I suppose, because it is not a component.

I was able to save this in everyone in the controller, because I draw sprites in the controller. That way I can manually identify listeners there and still use all the reference links, etc. Here is 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 the parameter to the listeners, and I can define the object elsewhere. You can do this in your own function or anywhere in the controller. Although the actual sprite should be in the view, this makes them a bit more dynamic and allows you to manipulate them a bit.