javascript – Ext.draw：如何控制精灵？

2019-06-14 00:22:53 阅读：73 来源： 互联网

标签：javascript model-view-controller extjs extjs4

我正在尝试使用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).

解决方法:

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

例：

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

标签：javascript,model-view-controller,extjs,extjs4
来源： https://codeday.me/bug/20190613/1236173.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Ext.draw：如何控制精灵？