Create custom datatype

[esisl]

I create my datatype^
this.component = Ext.create('Ext.Panel', {
...
items: [{
html: '< canvas height="450" width="620" id="canvas_'+conf.name+'" >< /canvas >',
}]
});

How to CORRECTly handle a click on the canvas?

P.S. Am I adding the canvas incorrectly?

[esisl]

it can be done like this:

items: [{

    xtype: 'panel',
    html: '< canvas height="450" width="620" id="canvas_'+conf.name+'" >< /canvas >',
},{
    xtype: 'textfield',
    componentCls: conf.componentCls,
    fieldLabel: conf.fieldLabel,
    height: 30,
    labelWidth: conf.labelWidth,
    name: conf.name,
    value: conf.value,
    width: conf.width,
}],
listeners:{
    'render': function(panel) {
        panel.body.on('click', function(e) {
            var a = this.component.myUIclass.onclick(e.event.offsetX, e.event.offsetY);
            this.component.items.items[1].setRawValue(a);
        });
        panel.body.on('mousedown', function(e){
            this.component.myUIclass.onmousedown(e.event.offsetX, e.event.offsetY);
        });
        panel.body.on('mouseup', function(e){
            var a = this.component.myUIclass.onmouseup(e.event.offsetX, e.event.offsetY);
            this.component.items.items[1].setRawValue(a);
        });
        panel.body.on('mousemove', function(e){
            if(this.component.myUIclass.mousedown){
                var a = this.component.myUIclass.onmousemove(e.event.offsetX, e.event.offsetY);
                this.component.items.items[1].setRawValue(a);
            }
        });
    }
},