ContextMenu + EditorGrid + Where in TFM?

[Ricardo gonzalez]

Hello, I'm a new user of this wonderful library of win, and I'm having a hella fun time learning it but I have got to admit I got stuck, so please pretty please, help me a little will y'all?

Firstly, I can't find the Ext.grid.GridEditor `class`, the one the tutorial(1) tell me to use for the editor fields (and no, I'm not talking about Ext.grid.EditorGrid, its Ext.grid.GridEditor).

Secondly, Once I can edit text in the grid I'll need to be able to select text from it, context click the word, pull a menu with translation from an online source and replace the word with the selected item.

I think I can figure out the data loading thing, but how do I do the select/menu/replace thing? I'd need to disable the actual context menu and replace it with my custom one.

Please help me, you are my only hope!




1.Part II of the grid screen cast http://extjs.com/learn/Screencast:Editable_Grid_Component

[Animal]

You'll have to add a listener for this event: http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html#event-cellcontextmenu

Then check if it the cell you wish to show a context menu for. If it is, show your menu.

Creating a Menu is easy: http://extjs.com/deploy/ext/docs/output/Ext.menu.Menu.html

[Ricardo gonzalez]

Nope, cellcontextmenu works on the grid (even in the TextField while on read mode) but it doesn't work on the Ext.form.TextField while in cell edit mode

and returning false in the callback for cellcontextmenu doesn't suppress the native context menu, can you confirm please?

[Animal]

The event should bubble up to the grid's listener if not cancelled by a listener in an inner element, so cellcontextmenu should work!???

You have to cancel the event if you don't want defauly behaviour: http://extjs.com/deploy/ext/docs/output/Ext.EventObject.html#stopEvent

[Ricardo gonzalez]

Well I'm positive that the event, registered on the grid, only works in read mode TextFields not in write mode ones.

This is in FF2, IE6 and Safari 3 all on windows, same behavior.

Opera 9.21 does't even responds to the event in the first place :(

[Ricardo gonzalez]

using ext 1.1.1 i forgot to mention

calling _event.stopEvent() (where _event is a parameter of the callback) does work in IE, but still leaks the event to FF and Safari.

Opera still doesn't call my callback (but the rest of Ext work fine in Opera)

[Animal]

Stopping the contextmenu event does work in FF. I use context menus in my app.

The event is a parameter of the event handling function, not of a callback.

[Ricardo gonzalez]

event handling function == callback

that's just the way I use to call them sorry. the event is not stopped in FF, but it can be because of the way i'm calling it.



grid.on('cellcontextmenu',function(_grid, _rowIndex, _cellIndex, _event){
alert("hello");
_event.stopEvent();
});

[Animal]

I've just tested that code in the "Array Grid" example page in my Firefox 2.0.0.6 here, and I get the alert, but no native context menu.

One thing. I wouldn't use variable names that don't begin with an alphabetic character.

[Animal]

Looking at the code, of course input fields in an EditorGrid are not child elements of the Grid body. They are rendered into the document body, and just absolutely positioned over the Grid cell.

You'll have to add the same "contextmenu" listener to the cell editor that you use in the ColumnModel.

[Ricardo gonzalez]

I've just tested that code in the "Array Grid" example page in my Firefox 2.0.0.6 here, and I get the alert, but no native context menu.

One thing. I wouldn't use variable names that don't begin with an alphabetic character.

I think I can help you reproduce the problem, try the same code in the array grid example, and when the alert box shows up, CLICK ok to make it go, a native context menu should show now.

When I tried that code without the alert it worked fine, no native menu at all, so the problem was in the alert. It turns out it is the way I close the alert box which changes the out come, closing the alert box with the keyboard doesn't show any native context menus either so all i have to do to make it work consistently is to not use an alert box there, but actual code., which is what i want to do anyway.

However it could count as a bug, can you confirm?


On the problem of the context menu, attaching the event handler to the textfield did work but i had to try a different event other than contextmenu, but rather blur or show.

so TextFields lack a contextmenu event?

[Animal]

You need to manipulate and examine the event object immediately. The browser's underlying event is a singleton, and any other operations in your code which cause the browser to have events will change it. This is why debug stepping through event handlers produce strange results.



grid.on('cellcontextmenu',function(grid, rowIndex, cellIndex, event){
event.stopEvent();
alert("hello");
});

[Animal]

Field does does not have a contextmenu event: http://extjs.com/deploy/ext/docs/output/Ext.form.Field.html#events

You will have to add a handler to the Form's Element.

Then use http://extjs.com/deploy/ext/docs/output/Ext.form.Field.html#events



myForm.el.on("contextmenu", function(event) {
var inp = event.getTarget("input", 1)
if (inp) {
var myExtField = myForm.findField(inp.name);
// blah blah...
}
});

[Ricardo gonzalez]

Now i get why it was behaving so funny. On what form sould that be performed? I'm trying to find the insertion point for that code, it is obviously in the grid's form but i having trouble finding where does the grid and its form are linked.

Anyway you have been very helpful, thanks a lot. I'm afraid I'll come back with more questions if I have more troubles. :>

[Animal]

OK, I see, there will be no form because this is just an isolated Field used in an EditorGrid.

OK, add the listener to the Field's Element: myEditor.getEl()