PDA

View Full Version : MVC Panel Click event



arvindwill
20 Nov 2012, 7:56 AM
Is it possible to attach the click event handler for a panel body using Ext.app.Controller.control() . Tried by firing the event in the panel


listeners: {
click : {
fn: function(e, t) {
this.fireEvent('click', t);
},
element: 'el',
scope: this
}
}

but even then cant able to catch the handler function corresponding to it in the control() method.



this.control(
{
'[cls~=entity_draw]':{
click:this.drawPanel,
scope:this
}
});


to the panel bodyCls and the cls added entity_draw.

mitchellsimoens
22 Nov 2012, 6:18 AM
The component doesn't have a click event but the element does.

arvindwill
22 Nov 2012, 6:36 AM
simoens but the class is provided in bodyCls only and when inspected the html the class was correctly present in the div even then below code is not working.


'[class~=entity_draw]':{
click:this.drawBoardEntity,
scope:this
}


code by which panel is created


var panel = Ext.create('Ext.panel.Panel', {
width: 200,
height: 100,
floating: true,
draggable: true,
renderTo:Ext.get('sworkspace'),
html: displayString,
bodyCls:'entity_draw'
});

arvindwill
30 Nov 2012, 2:56 AM
what is the exact equivalent code for mvc style panel click listener.

vietits
30 Nov 2012, 5:01 AM
Try this:

1. View code


Ext.define('App.view.Panel', {
extend: 'Ext.panel.Panel',
alias: 'widget.apppanel',
bodyCls: 'entity_draw',
...
listeners: {
click: {
element: 'el',
fn: function(){
var panel = Ext.getCmp(this.id);
panel.fireEvent('click'); // fire 'click' event from panel
}
}
}
});

2. Controller


...
init: function(){
this.control({
'apppanel': { // 'panel[bodyCls=entity_draw]'
click: function(){
console.log('panel is clicked');
}
}
});
}