PDA

View Full Version : ContextMenu on TwinTriggerField



seek
28 Feb 2011, 2:09 AM
Hi people,
how can I set a contextual mený on a TwinTriggerField?
I try with:


Ext.ux.TSI= Ext.extend(Ext.form.TwinTriggerField, {
listeners:{
contextmenu: function(){
this.onContextMenu()
}
},
onContextMenu: function(e) {
if (!this.contextMenu) {
this.contextMenu = new Ext.menu.Menu({
items: [{
text: 'Add'
},{
text: 'Edit'
},{
text: 'Edit Folder'
}]
});
}
var xy = e.getXY();
this.contextMenu.showAt(xy);
},
setValue:function(v){
...
Ext.ux.TSI.superclass.setValue.apply(this, arguments);
},
onDestroy: function(){
...
Ext.ux.TSI.superclass.onDestroy.call(this);
},
initComponent: function(){
this.disableKeyFilter = true;
this.forceSelection = true;
this.typeAhead = false;
if(this.tooltip){
this.imageEl.set({qtip: this.tooltip});
};
Ext.ux.TSI.superclass.initComponent.call(this);
},
getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
plugins:['remoteval'],
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
onTrigger2Click: function(){
.....
},
onTrigger1Click: function(){
....
}
});
Ext.reg('tsi', Ext.ux.TSI);

where I'm wrong?

Thanks
Seek

fay
28 Feb 2011, 2:41 AM
Add your context menu in afterRender:



Ext.ux.TSI = Ext.extend(Ext.form.TwinTriggerField, {
onContextMenu: function(e) {
if (!this.contextMenu) {
this.contextMenu = new Ext.menu.Menu({
items: [{
text: 'Add'
},{
text: 'Edit'
},{
text: 'Edit Folder'
}]
});
}
e.stopEvent(); // You want to stop the default context menu from being displayed.
var xy = e.getXY();
this.contextMenu.showAt(xy);
},

afterRender: function()
{
this.getEl().on('contextmenu', this.onContextMenu);
Ext.ux.TSI.superclass.afterRender.call(this);
},

// ...
});
Ext.reg('tsi', Ext.ux.TSI);



NOTE: Don't forget e.stopEvent() in onContextMenu.

seek
7 Mar 2011, 1:54 AM
Thanks Fay!
Now, I have a little problem, how to refer to click event on TwinTriggerField button, clicking ot?
I try with:


...
onContextMenu: function(e){
if(!this.contextMenu){
this.contextMenu = new Ext.menu.Menu({
items: [{
text: 'Seleziona',
listeners: {
click: {
scope: this,
buffer: 200,
fn: function(i){
this.onTrigger2Click;
}
}
}
}]
});
};
e.stopEvent();
var xy = e.getXY();
this.contextMenu.showAt(xy);
}
...

But debugging the click event, object "this" is not my TwinTriggerField, and I can't fire onTrigger2Click.
Where I'm wrong?

Thanks
Seek

seek
15 Mar 2011, 2:20 AM
Solved, forgot scope XD


this.getEl().on('contextmenu', this.onContextMenu, this);