PDA

View Full Version : ComboBox custom template



morphik
13 Jul 2012, 12:56 AM
I would like to create combobox with custom results template. For every item I would like to add additional anchor element which will handle different click event.

I have found that in ExtJS 4.x I can achieve this by following code:


Ext.create('Ext.form.field.ComboBox', {
...
listConfig: {
listeners: {
el: {
click: {
delegate: 'a.my-custom-anchor,
fn: function(ev, anchor) {
...
}
}
}
}
}
});

Could you tell me how to solve this issue in ExtJS 3.4? I have tried to delegate event by this.mon on render event but no success yet.

And one more thing. How to prevent propagation of default select event into my additional anchor elements?

Thanks in advance.

sword-it
13 Jul 2012, 6:42 AM
Hi,

You have tried in on render so it does not effect, because in on render combobox view is not rendering yet.

So you have to put lazyInit property as false in order to render the combo view while rendering the combobox.

e.g:
lazyInit:false
, onRender:function(){
.....superclass.onRender.apply(this,arguments);
this.mon(this.view.select('a#xxx'),'click',this.onAnchorClick,this);
}

For stopping the select event you should return false from beforeselect event, if the target is your anchor element.

I hope these informations are OK for you.