PDA

View Full Version : How to put a menu in a viewport?



extjsnewb
9 Dec 2009, 7:45 PM
I have web page and the ONLY thing on the webpage is a menu. Thats it. No grids, no tables, no trees, nothing. Just a menu. The problem with the menu is that it has a lot of submenus so it begins to go off the screen activating the scrollbar.

So, I read about getAlignToXY and what position parameters to pass in order for it to change where the submenu opens if it needs to fit within a viewport.

The problem is... I cannot get my menu in a view port. I have tried this code:




var viewport = new Ext.Viewport({
layout:'fit',

items:menu

});


It gives a javascript error because I am guessing independent menus are not mean to be inside a viewport.

So, my question is this.... How do I get the menu inside the viewport?

zachext
9 Dec 2009, 9:37 PM
The following code works for Ext JS 3.0.3 using IE 8 and FF 3.5


Ext.onReady(function(){

var menu = new Ext.menu.Menu({
width:200,
floating:false,
items:[
{text: 'Menu Button 1'},
{text: 'Menu Button 2'}
]
});


var viewport = new Ext.Viewport({
items:menu
});

});

The menu will not display directly in the viewport unless the floating property is set to false. Also, the fit layout may not be desired if the menu is the only component in the viewport.