PDA

View Full Version : Reference component in controller



lpe2012
30 Apr 2012, 5:08 AM
Hi,

I have the component below in a panel. I need to reference this in teh controller so I can catch
the event when a user clicks in this link. Any suggestions wil be appreciated.

{
/*
* Insert a link
*
*/
xtype: 'container',
layout: {type: 'hbox'},
margin: '10 0 0 40',
cls: 'auto-test-Cua-Report-Link',
items: [
{
xtype: 'box',
html: '> '
},
{
xtype: 'box',
autoRender: true,
autoEl:
{
tag: 'a',
href: 'CuaReport: CuaReport',
title: Irm.imc.language.translate('tooltips.message.cuareport'),
onclick: 'return false;',
html: Irm.imc.language.translate('manageusers.buttons.cuareport')
}
}
]
}

vietits
30 Apr 2012, 6:44 AM
Try this:


....
items: [{
/*
* Insert a link
*
*/
xtype: 'container',
layout: {type: 'hbox'},
margin: '10 0 0 40',
cls: 'auto-test-Cua-Report-Link',
items: [{
xtype: 'box',
html: '> '
},{
xtype: 'box',
autoRender: true,
autoEl: {
tag: 'a',
href: 'CuaReport: CuaReport',
title: Irm.imc.language.translate('tooltips.message.cuareport'),
onclick: 'return false;',
html: Irm.imc.language.translate('manageusers.buttons.cuareport')
},
listeners: {
click: {
element: 'el',
fn: function(){
var cmp = Ext.getCmp(this.id);
cmp.up('container').fireEvent('click');
}
}
}
}]
},{
....
}]
....

Suppose that component above is inside a panel, then you can refer to this component from controller as below:


this.control({
'panel container': {
click: function(){
console.log('link clicked');
}
}
});