PDA

View Full Version : How to display menu in a grid panel column



nciportal
19 Nov 2009, 2:18 AM
Hi,

I have a requirement where i am required to display menu and submenus for a column in grid panel. This menu is a static one. I have seen a sample where menu's are added in a toolbar. However, I dont know how to render this menu option in a grid cell?? Kindly help me with some samples.

Thanks in advance.

Ap

Condor
19 Nov 2009, 2:25 AM
Do you want to display a menu in the cell or do you want to display the menu when you click on the cell?

(the first one is rather hard to do, but the second one is real easy)

nciportal
19 Nov 2009, 2:34 AM
I am going to put some image in the cell, on click of which i will be displaying a menu.

Condor
19 Nov 2009, 2:41 AM
You could use:

var menu = new Ext.menu.Menu({
...
});
var grid = new Ext.grid.GridPanel({
...
listeners: {
...
cellclick: function(grid, row, col, e){
if(col == 4){
menu.showAt(e.getXY());
}
}
}
});

nciportal
19 Nov 2009, 3:23 AM
Thanks Condor, but when i use this, the menu is getting displayed, but not exactly on the cell. It shows somewhere on the top of the page in IE, while at some other position in FF.

Condor
19 Nov 2009, 3:30 AM
It should display at the cursor position.

Does it display correct in Firefox?

nciportal
19 Nov 2009, 9:35 PM
hey thanks alot Condor. It has solved my purpose. I am able to see menu items wherever i click. But when i go to the record which is on the middle of the page and click, the menu opens but with only 1 option. I observed that right from the first record to the mid of the page, the menu keeps shrinking. have attached 2 files. One which shows menu opened at first record, while other shows when menu is opened at the record on the mid of the page. Is there any property to be set ???

Condor
20 Nov 2009, 1:23 AM
This looks like a bug... Can you post a small example that demonstrates this?

To avoid menu scrolling you can use:

Ext.menu.Menu.prototype.enableScrolling = false;

nciportal
20 Nov 2009, 2:33 AM
Condor, This is the code i used

[code]
var mainMenu = new Ext.menu.Menu({
id:'mainMenu',
width:'200px',
autoHeight:true,
items:[
{ id:'ADV_SUMMARY',text:'Account Summary',handler: onItemCheck},
{ id:'ADV_ACCOUNT_ACTIVITY',text:'Account Activity',handler: onItemCheck},
]
});
[code]

because of which i get menu shrinked at one point.

I used the line you mentioned
Ext.menu.Menu.prototype.enableScrolling = false;

This opens the menu entirely. But if i am on the lower side of the page and open this menu, the menu partially goes down the window.Is there any way for the renderer to display it dynamically. Have attached the screenshot.

Thanks

Condor
20 Nov 2009, 3:41 AM
Yes, it is a bug, but it has been fixed.

(don't know the exact version, but Ext 3.0.0 fails and Ext 3.0.3 is ok)

nciportal
20 Nov 2009, 4:50 AM
Which bug is been fixed in 3.0.3? i mean the menu shrinking while on the mid of the page or the menu going below the window when then cursor is near the bottom end of the screen ? If the first bug is been resolved, how do i get the menu displayed at a position in such a way tht it appears above the bottom end of the screen? i can get the xy cordinates of the cursor and display menu at (current position - height of the menu). But is this the correct way or is there some other way??

BTW thanks Condor for guiding me.

Condor
20 Nov 2009, 4:58 AM
No, the shrinking isn't fixed (technically it isn't wrong), but if you set enableScrolling:false it will move the menu up so it is displayed completely.

nciportal
23 Nov 2009, 3:41 AM
Condor,

No, the shrinking isn't fixed (technically it isn't wrong), but if you set enableScrolling:false it will move the menu up so it is displayed completely.

I have set enableScrolling to false,my menu is now displayed completely. But as i mentioned earlier, if i click somewhere on the bottom of the screen, menu is displayed partially. Other part goes down the window screen. Every time, the user will have to scroll the browser window to see the entire menu. Can someone please let me know how can i achieve this???

Condor
23 Nov 2009, 4:07 AM
No, I said this was fixed somewhere between Ext 3.0.0 and 3.0.3, so you'd still have this problem if you are using Ext 3.0.0.

nciportal
23 Nov 2009, 4:14 AM
Ok, Thanks alot Condor for your help.