PDA

View Full Version : MenuPanel Extension (Ext Menu inside Panel)



mabello
13 Mar 2008, 4:40 AM
I keep updating this first post with the updated version of the extension and examples (see attachment)

Extension goal:
In my current working application, I'd like to use something similar to the Ext.Menu that look really good for the navigation of my website.

Now, the tree works great in my opinion to use like a Menu, but I'd like to have MenuPanel like in my screenshot.


After looking for some extensions, I haven't found anything, so I started thinking the best solution to achieve my goal, without reinvent the wheel.

Now, the Menu in Ext is not a Component for now, I mean doesn' extend the Container Class or the Panel Class and the best solution could be to reimplement the Menu to work like a Panel.

So I've created a MenuPanel extending the base class Panel and make it works with really a small amount of work.


Development history:

Version 1.0
****************
===== Added =====

Ext.ux.MenuPanel
-Added: initComponent override to include building the menu if it's bieng lazy rendered thanks to bhaidaya (http://extjs.com/forum/member.php?u=5529)
-Added: [fillHeight]: boolean new optional configuration parameter; If true, the Menu fills the Panel height

===== Added =====
****************

Version 0.1
****************

-Initial release

****************

I hope this could be useful, I'm looking forward for feedbacks and suggestions for impoving this
extension.

Cheers

mabello
13 Mar 2008, 9:09 AM
I'v added this line of code to enable the lazy rendering of the component



Ext.reg('menupanel', Ext.ux.MenuPanel);

mabello
13 Mar 2008, 9:28 AM
MenuPanel inside accordion layout in complex layout example, using lazy rendering



<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all-debug.js"></script>

<!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.ux.MenuPanel = function(config) {
Ext.ux.MenuPanel.superclass.constructor.call(this, config);
if((typeof this.menu =='undefined') || this.menu == null)
throw 'you need to specify an instance of Menu in your cfg object';
this.menu.shadow = false;//We don't need shadow, do we?Besides, without this IE6 complain so...
}

Ext.extend(Ext.ux.MenuPanel, Ext.Panel, {

afterRender: function(){
Ext.ux.MenuPanel.superclass.afterRender.call(this);
var el = this.menu.getEl();
el.getShim();
el.hideShim();
this.body.appendChild(el);
el.clearPositioning('auto');
el.setWidth('100%');
el.applyStyles({
border: '0px'
});
el.show();
},

getMenu: function(){
return this.menu;
},

//private
beforeDestroy: function(){
Ext.ux.MenuPanel.superclass.beforeDestroy.call(this);
this.menu.destroy();
}
});

Ext.reg('menupanel', Ext.ux.MenuPanel);

Ext.onReady(function(){
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
}
});

var colorMenu = new Ext.menu.ColorMenu({
handler : function(cm, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
});

var menu1 = new Ext.menu.Menu({
id: 'mainMenu1',
items: [
{
text: 'I like Ext',
checked: true
},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}, '-', {
text: 'Radio Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme'
}, {
text: 'Vista Black',
checked: false,
group: 'theme'
}, {
text: 'Gray Theme',
checked: false,
group: 'theme'
}, {
text: 'Default Theme',
checked: false,
group: 'theme'
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar'
},{
text: 'Choose a Color'
}
]
});

var menu2 = new Ext.menu.Menu({
id: 'mainMenu2',
items: [
{
text: 'I like Ext',
checked: true // when checked has a boolean value, it is assumed to be a CheckItem

},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}, '-', {
text: 'Radio Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme'
}, {
text: 'Vista Black',
checked: false,
group: 'theme'
}, {
text: 'Gray Theme',
checked: false,
group: 'theme'
}, {
text: 'Default Theme',
checked: false,
group: 'theme'
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar'

},{
text: 'Choose a Color'
}
]
});

var panelMenu1 = {
xtype: 'menupanel',
title: 'My MenuPanel',
collapsible:true,
menu: menu1
};

var panelMenu2 = {
xtype: 'menupanel',
title: 'My MenuPanel',
collapsible:true,
menu: menu2
};
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
}, {
region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1,
tabPosition:'bottom',
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll:true
},
new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})]
})
},{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [panelMenu1, panelMenu2]
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
]
});
Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<div id="west">
<p>Hi. I'm the west panel.</p>
</div>
<div id="north">
<p>north - generally for menus, toolbars and/or advertisements</p>
</div>
<div id="center2">
<a id="hideit" href="#">Toggle the west region</a>
<p>
My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="center1">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>

</body>
</html>

aaronharder
14 Mar 2008, 10:53 AM
Amazing! I just happened to be looking for this same thing one day after you posted it. Thanks.

mabello
14 Mar 2008, 2:16 PM
You are welcome aaronharder
Just in time so ;).
Thanks for your kind reply, I'm happy it is useful also for you!

Lobos
15 Mar 2008, 10:56 AM
Kudos Mabello, I really needed menus in panels as well - I knew it would look awesome like this, I really think this type of functionality should be introduced into the core, in fact I am going to suggest this in the Feature Requests forum.

-Lobos

mabello
16 Mar 2008, 11:03 AM
Thanks Lobos,
I'm happy the extension is useful, and if you apply custom theme to the menu it looks really cool! [I've tried only the black theme (it's an extension theme) for the menu, and it looks great].

precariouspanther
16 Mar 2008, 5:20 PM
Great work Mabello - I needed this kind of thing for an accordion menu in our application. Big thumbs up :)

aurelien
18 Mar 2008, 2:21 AM
Big up too!!! Love this new Menu class!

Lobos
18 Mar 2008, 6:01 AM
There is also this integration as well which may be of interest, maybe these two solutions could be merged in one collaboration.


I have posted some code which makes Menu extend Ext.Container.

http://extjs.com/forum/showthread.php?t=26395

It still creates a free-floating Layer, but I think that could be configurable.

-Lobos

Limech
25 Mar 2008, 5:04 AM
Thanks for this extention. I was looking for something like this.=D>

concep86
6 Apr 2008, 6:15 PM
quickie... how do i add a url to a menu..

I want to open url when i click the menu item...

thanks

mabello
7 Apr 2008, 12:07 AM
In the definition of your menu items, you can use href I think:


menu = new Ext.menu.Menu({
shadow: false,
items: [{
text: 'Users',
iconCls: 'defaultIcon',
handler: function(){

}
href: "UserManagement.aspx"

}...

Hope this helps

concep86
7 Apr 2008, 5:14 AM
In the definition of your menu items, you can use href:


menu = new Ext.menu.Menu({
shadow: false,
items: [{
text: 'Users',
iconCls: 'defaultIcon',
handler: function(){

}
href: "UserManagement.aspx"

}...

Hope this helps



Thanks mabello, for pointing me in the right direction...
This is what ultimately worked for me...



handler: function (){
window.location.href = 'advertisers.asp';
}

bhaidaya
22 Apr 2008, 10:40 AM
Nice! one addition so far.. initComponent override to include building the menu if it's bieng lazy rendered.



Ext.ux.MenuPanel = function(config){
Ext.ux.MenuPanel.superclass.constructor.call(this, config);
if ((typeof this.menu == 'undefined') || this.menu == null)
throw 'you need to specify an instance of Menu in your cfg object';
this.menu.shadow = false;//We don't need shadow, do we?Besides, without this IE6 complain so...
}

Ext.extend(Ext.ux.MenuPanel, Ext.Panel, {
initComponent: function(){
Ext.Container.superclass.initComponent.call(this);
if (typeof this.menu.getEl != "function") {
this.menu = new Ext.menu.Menu(this.menu)
}
},

afterRender: function(){
Ext.ux.MenuPanel.superclass.afterRender.call(this);
var el = this.menu.getEl();
el.getShim();
el.hideShim();
this.body.appendChild(el);
el.clearPositioning('auto');
el.setWidth('100%');
el.applyStyles({
border: '0px'
});
el.show();
},

getMenu: function(){
return this.menu;
},

//private
beforeDestroy: function(){
Ext.ux.MenuPanel.superclass.beforeDestroy.call(this);
this.menu.destroy();
}
});
Ext.reg('menupanel', Ext.ux.MenuPanel);//Used for lazy rendering

mabello
22 Apr 2008, 10:57 AM
Dear bhaidaya,

great job!

I will update the first post asap...

Well done :)

pokerking400
28 Apr 2008, 12:25 PM
Great job. Lets call it Nav menu bar..instead of menu. Also i have one issue in that is if i click top panel twice , nothing shows in the bottom panel. To show i have to click the correct panel.

Last panel in accordion has to fill the rest...was it accordion issue or some settings issue?

Can you fix that?.

Next i need Tree nav menu...like this.. tks...

I like to put menu in a separate file...otherwise that page get cluttered. Menus can also be reused if it is in separate file.
I used Ext.panelMenu1 instead of panelMenu1

Thanks.

mabello
28 Apr 2008, 1:59 PM
Also i have one issue in that is if i click top panel twice , nothing shows in the bottom panel. To show i have to click the correct panel.

I don't understand what you are talking about. Can you post some code please to reproduce the behaviour?


Last panel in accordion has to fill the rest...was it accordion issue or some settings issue?
Can you fix that?.

It's a configuration option of the class MenuPanel, fillHeight; please read my first post.


I like to put menu in a separate file...otherwise that page get cluttered. Menus can also be reused if it is in separate file.
I used Ext.panelMenu1 instead of panelMenu1

The folder you can download in my first post contains the extension and examples :). I have copied the example of the complex layout you can find in examples folder of Ext SDK only to show how you can use the extension in different type of layout ;).

Thanks

pokerking400
28 Apr 2008, 2:15 PM
Well if you double click the panelMenu1. it expands and it shows all the menu. Double clcik the same menu again..the panelMenu2 comes to top but do not show its contents.

i tried with fill...it is not working ...it could be accordion feature..it has still + sign on.


Thanks.

mabello
28 Apr 2008, 2:30 PM
Yes, It's an accordion feature indeed, if you try the very same example in ext2.x/examples/layout/complex.html, you will verify that is is actually the way a normal accordion works :)

pokerking400
28 Apr 2008, 5:04 PM
How do you change the roll over color on menupanels?. Because in order to show user that the menus are clickable..you have to change different roll over color on it.

I got the treepanel and menupanel working on accordion...next is event handling for all menus...

:)

Once i can handle all events ..then i need to work on Grid controls with row dropdown panel for editing.... it will be cool once i done that...

I have backend ready for any database...so all i need is very interactive controls make the job easy for user with minimal clicks and wait.

mabello
29 Apr 2008, 12:22 AM
Dear pokerking400,

the menu works exaclty in the same way a normal Ext Menu works, so it's up to you how to personalize its behaviour or look and feel.

If you read all the posts in this thread, you can see that concep86 has already answered how you can manage the events for the menu. Use the handler for each defined menu items.

Hope this helps

Regards

pokerking400
29 Apr 2008, 4:33 PM
i found that. handler will do.

But i need more event information. How do i know when it is loaded?. i need event for before load and afterload.

thanks.
alexk

mabello
30 Apr 2008, 12:07 AM
The MenuPanel inherits from Panel, so you can use all the events that a Panel can fire using an instance of MenuPanel (render and beforerender are the events you need probably).



var menuPanel = new Ext.ux.MenuPanel(...);
menuPanel.on('render',...);


Besides if you need, you can also attach to all the events that an Ext.Menu can fire.
Regards

NegrilLover
12 May 2008, 11:54 AM
I have been trying to incorporate your extension into the Center panel of a border layout. Following exactly what you have specified, I cannot get the title to display for the menupanel that I have defined. I see the window displayed with the menu items but no panel. I have other items defined within this panel besides the menupanel. Will this work in other panels besides the West? Also, would it possible to incorporate a tbar with the Ext tools buttons for this and if so, what would be specified for this? Thank you.

mabello
12 May 2008, 1:45 PM
Dear NegrilLover,
As far as I know, it works also in other panels, as long as you define the right layout in which you want to display an instance of MenuPanel.
Try this (MenuPanel in a Tab and in CenterPanel of a border layout)


<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="Ext.ux.MenuPanel.js"></script>
<!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">

Ext.onReady(function(){
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
}
});

var colorMenu = new Ext.menu.ColorMenu({
handler : function(cm, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
});

var menu1 = new Ext.menu.Menu({
id: 'mainMenu1',
items: [
{
text: 'I like Ext',
checked: true
},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}, '-', {
text: 'Radio Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme'
}, {
text: 'Vista Black',
checked: false,
group: 'theme'
}, {
text: 'Gray Theme',
checked: false,
group: 'theme'
}, {
text: 'Default Theme',
checked: false,
group: 'theme'
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar'
},{
text: 'Choose a Color'
}
]
});

var menu2 = new Ext.menu.Menu({
id: 'mainMenu2',
items: [
{
text: 'I like Ext',
checked: true // when checked has a boolean value, it is assumed to be a CheckItem

},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}, '-', {
text: 'Radio Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme'
}, {
text: 'Vista Black',
checked: false,
group: 'theme'
}, {
text: 'Gray Theme',
checked: false,
group: 'theme'
}, {
text: 'Default Theme',
checked: false,
group: 'theme'
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar'

},{
text: 'Choose a Color'
}
]
});

var panelMenu1 = {
xtype: 'menupanel',
title: 'MenuPanel',
collapsible:true,
menu: menu1
};

var panelMenu2 = {
xtype: 'menupanel',
title: 'MenuPanel2',
collapsible:true,
menu: menu2,
fillHeight: false
};
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
}, {
region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1
,layoutOnTabChange: true
,tabPosition:'bottom',
items:[{
title: 'A Tab'
,autoScroll: true
,items:[panelMenu1]
},
new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})]
})
},{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
}
},
new Ext.Panel({
region:'center',
title: 'Center Panel'
,autoScroll:true
,items:[panelMenu2]
})
]
});

});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<div id="west">
<p>Hi. I'm the west panel.</p>
</div>
<div id="north">
<p>north - generally for menus, toolbars and/or advertisements</p>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>

</body>
</html>


The MenuPanel would work as a normal Panel, but I suspect that in your case, if you want a menu in the center panel, you'd better use the normal Menu and use the normal toolbar of the panel.

Anyway, if you want to define a tbar o bbar for the MenuPanel, you can achieve that easly (MenuPanel "class" inherits from Panel ;) ):


var panelMenu1 = {
xtype: 'menupanel',
title: 'MenuPanel',
collapsible:true,
menu: menu1
,tbar:[{
text:"Action1"
},{
text:"Action2"
}]
};

NegrilLover
13 May 2008, 5:42 AM
I'm sure it is some attribute I am missing but I am still not able to see the title of the menupanel. I see the center panel title but not the menupanel title. Attached is the code (using your extension defined above it) and a screenshot.



Ext.reg('menupanel', Ext.ux.MenuPanel);
var menu1 = new Ext.menu.Menu({
id: 'mainMenu1',
items: [
{
text: 'I like Ext',
checked: true
},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}]
});
var panelMenu1 = {
xtype: 'menupanel',
id:'main-panel',
collapsible:true,
fillHeight: false,
title: 'Personal',
menu: menu1
};
var menu1panel = new Ext.Panel({
region:'center',
title: 'Center Panel'
,autoScroll:true
,items:[panelMenu1] });

var clicknavbtn = 0;
var viewport = new Ext.Viewport ({

layout:'border',
id:'clarityviewport',
items:[{
region:'north',
header:true,
xtype:'panel',
id: 'northpanel',

title: '&nbsp',
cls: 'x-panel-main-header',

height:32,
bbar: toolbarnorth
},{
region: 'center',
xtype:'portal',
id: 'centerregion',
items:[{

columnWidth:.6,
style:'padding:10px 0 10px 10px',

// Definition of menu1panel here

items:[menu1panel, {

// Panel for Grid1
title: 'Grid1',
id: 'grid1',
layout:'fit',
buttonAlign:'left',
buttons: [{text:'New'}, {text:'Completed'}, {text:'Remove'}],
onCollapse : function(doAnim, animArg) {

Ext.ux.Portlet.superclass.onCollapse.call(this, doAnim, animArg);
},
plugins: new Ext.ux.MaximizeTool(),
items: new Grid3([0, 2, 3])

},{
// Panel for Grid2
title: 'Grid2',
id: 'grid2',
layout:'fit',
buttonAlign:'left',
buttons: [{text:'New'}, {text:'New from Template'}, {text:'Remove'}],
plugins: new Ext.ux.MaximizeTool(),
items: new Grid2([1, 2, 3])
},{
// Panel for Grid3 - initially hidden
title: 'Grid3',
layout:'fit',
id: 'grid3',
hideMode:'offsets',
hidden:true,
plugins: new Ext.ux.MaximizeTool(),
buttonAlign:'left',
buttons: [{text:'Submit'}],
items: new Grid3([1, 2, 3])
}]

},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
// Panel for Grid4
title: 'Grid4',
layout:'fit',
id: 'events',
plugins: new Ext.ux.MaximizeTool(),
buttonAlign:'left',
buttons: [{text:'New'}],

items: new Grid4([1, 2, 3])
},{
// Panel for Grid5
title: 'Grid5',
layout:'fit',
id: 'bookmarks',
plugins: new Ext.ux.MaximizeTool(),
buttonAlign:'left',
buttons: [{text:'New Folder'}],
items: new Grid5([1, 2, 3])
},{
// Panel for Grid6 - initially hidden
title: 'Grid6',
layout:'fit',
id: 'grid6',
hidden:true,
hideMode:'offsets',
plugins: new Ext.ux.MaximizeTool(),
buttonAlign:'left',
buttons: [{text:'New'}],
items: new Grid6([1, 2, 3])

}]
}]
// Remaining south region definition

mabello
13 May 2008, 6:30 AM
Dear NegrilLover,

I will try your code this evening I hope, for now try to check with firebug if you can find the header of the menupanel, inspecting the HTML.

For example, I would suggest you to remove


style:'padding:10px 0 10px 10px',


from the center panel, and to try something "simple and clear," without adding any new css eetc and check the result.
So you can find exaclty the line of code breaking your layout, or make clear if it is a bug of the extension.
Thanks

NegrilLover
13 May 2008, 8:07 AM
OK - basically I have determined that I need this functionality in a modeless window that sits on top of the viewport and is visible/hidden based on user actions. Could this extension be used in a panel within a window (Ext.Window)? Thanks for your help.

NegrilLover
13 May 2008, 8:32 AM
Well, I was able to include this within a window but I am still not seeing the titles displayed for the menupanel. I am using the indigo theme just to make sure it was not something special we had set for the css used. Yes, if you could take a look at this, I would really appreciate it.

Current code:



Ext.reg('menupanel', Ext.ux.MenuPanel);
var menu1 = new Ext.menu.Menu({
id: 'mainMenu1',
items: [
{
text: 'I like Ext',
checked: true
},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}]
});

var menu2 = new Ext.menu.Menu({
id: 'mainMenu2',
items: [
{
text: 'I like Ext',
checked: true
},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}]
});
var panelMenu1 = {
xtype: 'menupanel',
id:'main-panel',
collapsible:true,
border: true,
frame: true,
width: 200,
height: 150,
title: 'Personal',
menu: menu1
};
var panelMenu2 = {
xtype: 'menupanel',
id:'main-panel2',
collapsible:true,
width: 200,
height: 150,
border: true,
frame: true,
title: 'Personal',
menu: menu2
};

var menu1panel = new Ext.Window({

title: 'New Window'
,xtype: 'form'
,hidden: true
,width: 900
,height: 300
,border: true
,frame: true
,autoScroll:true
, id: 'main-panelxx'
,items:[panelMenu1, panelMenu2] });

// Display of window based on button press
if (hrefitem == "#newwindow") {
Ext.getCmp('main-panelxx').setVisible(true);

}

mabello
13 May 2008, 8:35 AM
Dear NegrilLover,
I will get a look at the problem this evening after work :), we will fix it
Thanks

mabello
13 May 2008, 8:47 AM
Ok, quick try.
Your code works for me with IE6 and FF2 :-?
Check the screenshot...please clear the cache, use the default ext theme and try again...anyway, I will check better tonight :)

NegrilLover
13 May 2008, 8:49 AM
I'm hoping this will help - this is from firebug and is the html definition of the menupanel containing the first menu definition in the window. Thanks.



<div id="ext-gen703" class="x-layer x-menu" style="border: 0px none ; position: static; visibility: visible; left: -10000px; top: -10000px; right: auto; bottom: auto; width: 100%;">

NegrilLover
13 May 2008, 8:55 AM
Followed your instructions on your last post and got the exact same wrong results. Very strange...

mabello
13 May 2008, 8:57 AM
Please, can you tell me what browser are you using (FF I already know, but to be sure) and the Ext version used.
The problem is that your code works for me:



Ext.onReady(function(){
var menu1 = new Ext.menu.Menu({
id: 'mainMenu1',
items: [
{
text: 'I like Ext',
checked: true
},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}]
});

var menu2 = new Ext.menu.Menu({
id: 'mainMenu2',
items: [
{
text: 'I like Ext',
checked: true
},
{
text: 'Ext for jQuery',
checked: true
},
{
text: 'I donated!',
checked:false
}]
});
var panelMenu1 = {
xtype: 'menupanel',
id:'main-panel',
collapsible:true,
border: true,
frame: true,
width: 200,
height: 150,
title: 'Personal',
menu: menu1
};
var panelMenu2 = {
xtype: 'menupanel',
id:'main-panel2',
collapsible:true,
width: 200,
height: 150,
border: true,
frame: true,
title: 'Personal',
menu: menu2
};

var menu1panel = new Ext.Window({

title: 'New Window'
,xtype: 'form'
,hidden: true
,width: 900
,height: 300
,border: true
,frame: true
,autoScroll:true
, id: 'main-panelxx'
,items:[panelMenu1, panelMenu2] });

menu1panel.show();
});

Check also if you have some duplicated id for your components please

mabello
13 May 2008, 8:59 AM
You can also try to use 2 standard panels instead of the menupanel and see if the title works

NegrilLover
13 May 2008, 9:19 AM
I just tried it using the Standard Panels and I am able to see the titles. I am using Ext 2.1.

mabello
13 May 2008, 9:28 AM
As long as I can not reproduce the error, I can not fix it.

Please try this (thanks for your patience):

1)Download the Ext.ux.MenuPanel.zip file you can find in the first post of this thread and copy it inside the examples folder of Ext2.1
2)Overwrite the MenuPanelBase.js with the file I have attached in this post.
3)Clear cookies, cache and whatever
4)Run the MenuPanelBase.html


Following these steps, I have reproduced the screenshot I've already shown you. I'm using Ext2.1 as well.

Let me know please

NegrilLover
13 May 2008, 10:04 AM
I'm not quite sure what the problem is because I have the latest WinZip but I am not able to open either of the zipped files you included in this thread. I am getting the error invalid archive - cannot open. Can you include the required code for MenuPanelBase.js in this thread? I have been using the code you included in your thread post and not the zipped file. Maybe this is the problem because I thought that was the complete code. Thanks so much.

NegrilLover
13 May 2008, 10:38 AM
I moved the declaration of the menupanel into a separate file, included it within my html file and it worked. It doesn't make sense that this needed to be done but it is working which is what counts. Thank you so much for following through this with me. It is a great extension and my company will be happy to include it within our application.

mabello
13 May 2008, 10:45 AM
Dear NegrilLover,
You are welcome.
I'm happy it worked out, great job! :)

NegrilLover
14 May 2008, 8:11 AM
I have one more question on this. Our company would like to use menu items within a panel without a checkbox. So clicking on the menu item would cause an event rather than selecting or not selecting a checkbox. What would I need to do in the code to remove the checkbox column on the left side of the menupanel? If I comment out the checked attribute, the checkbox is removed but the column for the checkbox is still visible. Thanks again.

mabello
14 May 2008, 8:48 AM
The column on the left side of the menupanel that is visible is an Ext feature of the menu (MenuPanel is not involved), so that you can add an image you can associate to each menu item.

If you open the firefox menu on the top (Bookmarks), you will see that the menu looks like the menu in ext, if you do not have an image associated for that menu item :)

If you want to change the look and feel of the menu you have to change the css of the menu maybe, but the extension is really not involved on that.

Check the doc for the menu class, probably you can already find a property to achieve your goal

NegrilLover
16 May 2008, 3:11 AM
I was able to find an answer to this via an older thread reply by Animal and wanted to pass on how to change the menu as I had requested.

http://extjs.com/forum/showthread.php?t=30051&highlight=menu+icon

Romantik
28 Jun 2008, 3:33 AM
Hi All.
How to use this menuPanel as normal menu like Windows menu
for example in 'North' region


var menu = new Ext.menu.Menu({
id: 'mainMenu',
text:'Main menu',
items: [{
text: 'Part',
title: 'Title Part',
module: 'client',
action: 'client_tree'
}]
});

after render - show 'Main menu' then click show 'Part'

thanks

mabello
28 Jun 2008, 9:04 AM
Dear Romantik,
I don't exactly understand what you want to achieve.
I guess that you want to create a MenuPanel and show it in a 'north' region, is that correct?
In that case, you need only to create an instance of MenuPanel and use it like a "normal" panel, and add it in the north region of your border layout.
Hope this helps
Thanks

Romantik
28 Jun 2008, 12:23 PM
Hi mabello.
Thanks for your reply.
sorry, that I exoplained not correct this issue.
I mean that need add a Toolbar in 'north' region


var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [{
text: 'Part',
title: 'Title Part',
module: 'client',
action: 'client_tree'
}]
});
var tb = new Ext.Toolbar();

tb.add({
text: 'Main menu',
iconCls: 'bmenu',
menu: menu
});

var panelMenu1 = {
xtype: 'panel', // or 'menupanel',
title: 'My MenuPanel',
height: 200,
collapsible:true,
items: tb
};
var menu1panel = new Ext.Panel({
region:'north',
height: 200,
title: 'NORTH Panel'
,autoScroll:true
,items:[panelMenu1]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[
menu1panel,{......
}]
});

how to implement this?
help me please

thanks in any case.
best regards.

Romantik
28 Jun 2008, 2:33 PM
I found the way to solve it
thanks for help - I understand this moment =)
I should add render for north div


var tb = new Ext.Toolbar();
tb.render('north');

mabello
29 Jun 2008, 4:31 AM
@Romantik
Happy you found a solution!

ikk0
22 Jul 2008, 5:09 AM
I am trying to use this UX, but can't succeed regarding a contextmenu: Please have a look at http://extjs.com/forum/showthread.php?p=198381

Greetings
ikk0

mabello
22 Jul 2008, 5:22 AM
mmm...you can create a MenuPanel and than call show/hide of the panel, but I've never tried, but it sounds achievable to me...please post some code to reproduce the behaviour.
Thanks

cebola
31 Mar 2009, 2:55 AM
How to create a one menu with a two colluns???
My menu its very big and I need create two coluns with the itens.

any ideia?

Joyfulbob
21 Apr 2009, 9:59 AM
I receive this error when moving to 3.0. I've tried variations/reconfiguring but can't figure it out. I know menu has been changed in 3.0.

It happens on the el.getShim(); line:


Ext.extend(Ext.ux.MenuPanel, Ext.Panel, {

afterRender: function(){
Ext.ux.MenuPanel.superclass.afterRender.call(this);
var el = this.menu.getEl();
el.getShim();
el.hideShim();
this.body.appendChild(el);
el.clearPositioning('auto');
el.setWidth('100%');
el.applyStyles({
border: '0px'
});
el.show();
},


el should be the menu element; I'm guessing something in 3.0's menu changed that now causes this, but I don't know where to look next. I'm not sure if there's anything in the FireBug I should be noticing?

mabello
22 Apr 2009, 6:51 AM
Thanks Joyfulbob for your feedback.
I haven't looked at the problem yet because I stick to Ext 2.x for the time being, but I will try to fix it asap.
Cheers

Joyfulbob
22 Apr 2009, 7:24 AM
Thanks!

FYI, I'm using the MenuPanel in an accordian layout:



var relatedApps = new Ext.menu.Menu({
id: 'relatedApps',
items: [
{
text: 'View your statistics',
iconCls:'nav',
handler: function(){
Ext.getCmp('daxTabPanel').enable(); // Enable form for editing
var w = Ext.getCmp('daxTabPanel');
w.add({id:'center_daxstt',title:'Statistics',xtype: 'dstInqGrid',closable:true,split: true,autoScroll:true,enableTabScroll:true}).show();
Ext.getCmp('center_daxstt').addListener('activate' , function(){
Ext.getCmp('instructionsLabel').setText( 'Here are the statistics on your DAX queries', false );
})
Ext.getCmp('instructionsLabel').setText( 'View statistics on your DAX queries', false );
}
},{
text: 'Set options',
iconCls:'nav',
handler: function(){// dsp a form
w.add({id:'center_qtelay',title:'Layouts',xtype: 'qlEditGrid',closable:true,split: true,autoScroll:true,enableTabScroll:true}).show();
Ext.getCmp('center_qtelay').addListener('activate' , function(){
Ext.getCmp('instructionsLabel').setText( 'Set various options for your queries', false );
})
Ext.getCmp('instructionsLabel').setText( 'Set various options for your queries', false );
}
}
]
});

var relatedAppsMenu = {
xtype: 'menupanel',
title: 'DAX options',
collapsible:true,
menu: relatedApps
};

Do you know if I should I be using 3.0 yet? Should I wait until 3.1?

I haven't seen any new Product page for 3.0, nor the API Doc page. I was at the Conference and all I've seen so far since is the download link.

mabello
23 Apr 2009, 2:22 AM
IMHO if you are using ext in a commercial product (I mean you are actually selling the product to clients), I would wait at least for the first release of the 3.0 (it's in RC1 now) and stick to Ext 2.x for the time being since it's stable and possibly there is enough room for another release of the 2.x; you can get ready for switch from the 2.x to the 3.0 by experimenting in your dev environment using the RC1 though, since I'd recommend to use the last one when it get released, I think it won't be too painful to pass to the new 3.0.

There are a lot of exciting news coming out with Ext 3.0 :)

Regards

Joyfulbob
23 Apr 2009, 5:01 AM
Thanks! I value your IMHO! Yes, I agree; waiting for 3.1 is best.

I did want to get a jump start and start experimenting with 3.0. They showed a lot of great enhancements at the Conference that I wanted to start learning. Only problem was, I couldn't even get my app up with this menu error, so I removed it.

I know the issue is with the MenuPanel user extension and not 3.0.

Thanks again!

jdecarvalho
6 May 2009, 12:03 PM
Hi,

First of all, thank you for this great extension. I'm having a bit of a problem with adding menu items to the menuPanel programatically when it is inside of a border layout. When a new menu item is added, the viewport region is not resized and the new item is hidden from view.

Here's the code:



<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css">
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="Ext.ux.MenuPanel.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
id: 'viewport',
items: [{
xtype: 'menupanel',
id: 'menupanel',
region: 'north',
menu: {
xtype: 'menu',
items: [{
text: 'menu item one'
}]
}
},
{
region: 'center',
html: 'some content...'
}]
});
});

Ext.onReady(function(){
Ext.getCmp('menupanel').getMenu().add({ text: 'menu item two'})
});
</script>
</body>
</html>
Here's what it looks like after the new item has been added. You'll notice that you can only see the first item:

13474

Here's the proof that it does get rendered, but it is hidden. I've added a split to be able to make sure that it's actually there:

13475

Any ideas or suggestions would be greatly appreciated.

- Juliano

mabello
7 May 2009, 12:20 AM
Dear Juliano,
Your code is not correct since it contains more declarations of Ext.onReady in the same page, check out the example in the Ext SDK, you won't find Ext.onReady declared 2 times in the same page ;)

The following code works as expected:


Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
id: 'viewport',
items: [{
xtype: 'menupanel',
id: 'menupanel',
region: 'north',
menu: {
xtype: 'menu',
items: [{
text: 'menu item one'
}]
}
},
{
region: 'center',
html: 'some content...'
}]
, listeners: {
render: function(cmp){
Ext.getCmp('menupanel').getMenu().add({ text: 'menu item two'});
}
}
});
});


Cheers

Animal
4 Jun 2009, 10:51 AM
I receive this error when moving to 3.0. I've tried variations/reconfiguring but can't figure it out. I know menu has been changed in 3.0.

It happens on the el.getShim(); line:


Ext.extend(Ext.ux.MenuPanel, Ext.Panel, {

afterRender: function(){
Ext.ux.MenuPanel.superclass.afterRender.call(this);
var el = this.menu.getEl();
el.getShim();
el.hideShim();
this.body.appendChild(el);
el.clearPositioning('auto');
el.setWidth('100%');
el.applyStyles({
border: '0px'
});
el.show();
},


el should be the menu element; I'm guessing something in 3.0's menu changed that now causes this, but I don't know where to look next. I'm not sure if there's anything in the FireBug I should be noticing?

With 3.0 RC2.1 you do not need any extensions to display a Menu as a normal Component.

You can just add it to a layout just like any other child item of a layout.

To do this, you just configure it using floating: false, and that's it, it will participate in your layout.

DaveX
10 Jun 2009, 3:36 PM
Thanks for the MenuPanel.
I encountered the same problem as Joyfulbob when moving to 3.0, so I tried using
plain menus as Animal suggested. The menus seem to work okay in a panel with the
default layout but there are some render problems with the accordion layout.
Using the 3.0 trunk from today (3.0-rc2 did not work) the accordion panels seem
to grow in height each time an accordion panel is expanded/collapsed.

Here is some code that exemplifies the behavior. I'm trying to debug.


Ext.onReady(function(){
var menu1Config = {
xtype: 'menu',
defaults: { xtype:'menuitem', handler: onItemClick },
floating: false,
items: [
{ text:'Item 1' },
{ text:'Item 2' },
{ text:'Item 3' }
]
};
var menu2Config = {
xtype: 'menu',
defaults: { xtype:'menuitem', handler: onItemClick },
floating: false,
items: [
{ text:'Item a' },
{ text:'Item b' },
{ text:'Item c' }
]
};

var p = new Ext.Panel({
title: 'Panel with Menu',
collapsible: true,
renderTo: 'panel',
width: 400,
items: menu1Config
});

var a = new Ext.Panel({
title: 'Accordion with Menu',
collapsible: true,
layout: 'accordion',
layoutConfig: { animate: true },
renderTo: 'accordion',
width: 400,
items: [
{ title:'Panel 1', items:menu1Config },
{ title:'Panel A', items:menu2Config }
]
});

function onItemClick(item){
Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}
});

DaveX
10 Jun 2009, 6:38 PM
Seems I can work around the problem by disabling animation on the accordion panel and setting autoHeight for the menus.

mabello
11 Jun 2009, 12:25 AM
Good job DaveX, thanks for posting back your solution.

Joyfulbob
11 Jun 2009, 7:58 AM
Thanks, DaveX! This will be great to get resolved; the last thing holding us back from 3.0!

I tried the code but there's no menu items rendered/showing; what am I missing?

It might be due to what DaveX wrote "3.0 trunk from today"; what do I do to get this downloaded; just download again? I only downloaded 3.0 on 4/16/09.


<html>
<head>
<title>DAX</title>
<link rel="stylesheet" type="text/css" href="/cgidev/EXTJS3/resources/css/ext-all.css" />
<script type="text/javascript" src="/cgidev/EXTJS3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/cgidev/EXTJS3/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/cgidev/EXTJS3/examples/shared/examples.css" />
<script type="text/javascript" src="/cgidev/EXTJS3/examples/shared/examples.js"></script>
<link rel="stylesheet" type="text/css" href="/cgidev/EXTJS3/examples/view/chooser.css" />
<!-- ENDLIBS -->
<link rel="stylesheet" type="text/css" href="layout-browser.css">

<script type="text/javascript">
// reference local blank image
Ext.BLANK_IMAGE_URL = '/cgidev/EXTJS3/resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();

Ext.onReady(function(){
var menu1Config = {
xtype: 'menu',
autoHeight: true,
defaults: { xtype:'menuitem', handler: onItemClick },
floating: false,
items: [
{ text:'Item 1' },
{ text:'Item 2' },
{ text:'Item 3' }
]
};
var menu2Config = {
xtype: 'menu',
autoHeight: true,
defaults: { xtype:'menuitem', handler: onItemClick },
floating: false,
items: [
{ text:'Item a' },
{ text:'Item b' },
{ text:'Item c' }
]
};

var p = new Ext.Panel({
title: 'Panel with Menu',
collapsible: true,
renderTo: 'panel',
width: 400,
items: menu1Config
});

var a = new Ext.Panel({
title: 'Accordion with Menu',
collapsible: true,
layout: 'accordion',
layoutConfig: { animate: false },
renderTo: 'accordion',
width: 400,
items: [
{ title:'Panel 1', items:menu1Config },
{ title:'Panel A', items:menu2Config }
]
});

function onItemClick(item){
Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}
});


}); // eo onReady
</script>
</head>
<body>
<div id="panel">
</div>
<div id="accordion">
</div>
</body>
</html>

Joyfulbob
11 Jun 2009, 8:50 AM
How do I download 3.0 trunk? I've used TortoiseSVN to download the ux library.

Also 3.0 RC2.1; I see the Download page has only 3.0 RC2?

Thanks in advance!

DaveX
12 Jun 2009, 5:44 AM
The latest 3.0 trunk is at http://code.extjs.com/svn/ext/trunk/. You need a login account for svn access (forum account doesn't count, I received my account with the purchase of ExtJS and a support subscription.)
Here is a link to info on how to build http://extjs.com/learn/Tutorial:Building_Ext_From_Source (http://extjs.com/forum/../learn/Tutorial:Building_Ext_From_Source)

Joyfulbob
12 Jun 2009, 6:19 AM
Thanks!

Just to clarify, if we aren't a Support Subscriber we have to wait until 3.0 RC2 is released/updated on the download page (http://extjs.com/products/extjs/download.php)?

DaveX
12 Jun 2009, 6:27 AM
Yes.
See http://extjs.com/learn/Tutorial:Building_Ext_From_Source#A_Note_Regarding_SVN (http://extjs.com/forum/../learn/Tutorial:Building_Ext_From_Source#A_Note_Regarding_SVN)

Joyfulbob
12 Jun 2009, 6:29 AM
OK, thanks again! 3.0 is very exciting thus far!

elkidos
12 Jun 2009, 6:55 AM
Humm just to be sure, is it normal that with the 3.0 RC2 version (not RC2.1) I can't get the menu renders in the panels?? I just saw the panels empty, no menu..

DaveX
12 Jun 2009, 7:49 AM
Correct, with 3.0-rc2 the panels are not shown.
In my example, look at the DOM with firebug, find div id='panel', then grandchild div class='x-panel-bwrap', then grandchild div class='x-menu', remove class 'x-hide-offsets' and style 'visibility: hidden;' and your menus will be shown.

elkidos
12 Jun 2009, 8:47 AM
Thanks for the workaround Dave, it works!

dbassett74
24 Jun 2009, 8:35 AM
Any chance this MenuPanel will ever be added to ExtJs as a standard control? It is an extremely useful tool and I'm quite frankly surprised this is not part of the library. Coolite seems to have included this, but since I'm now using ExtJs directly, I really miss this one.

koko2589
3 Jul 2009, 1:12 AM
i what to add menu its not working



Ext.onReady(function(){
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
}
});

var colorMenu = new Ext.menu.ColorMenu({
handler : function(cm, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
});

var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
{
text: 'I like Ext',
checked: true, // when checked has a boolean value, it is assumed to be a

CheckItem
checkHandler: onItemCheck
},
{
text: 'Ext for jQuery',
checked: true,
checkHandler: onItemCheck
},
{
text: 'I donated!',
checked:false,
checkHandler: onItemCheck
}, '-', {
text: 'Radio Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Vista Black',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Gray Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Default Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu // <-- submenu by reference
},{
text: 'Choose a Color',
menu: colorMenu // <-- submenu by reference
}
]
});
var p = new Ext.ux.MenuPanel({
title: 'My MenuPanel',
collapsible:true,
renderTo: 'container',
width:400,
menu: menu,tbar:[{
text:"Action1", handler: function () {



Ext.getCmp('mainMenu').getMenu().add({ text: 'menu item

two'});

}

},{
text:"Action2",
handler: function () { var T = Ext.getCmp('mainMenu');
if (!T.findById('bank')) {
T.add({
id: 'bank',
text: 'Choose a Date',
iconCls: 'calendar',
closable: true
});
}

}
}]

});

// functions to display feedback
function onButtonClick(btn){
//Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
}

function onItemClick(item){
//Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}

function onItemCheck(item, checked){
//Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ?

'checked' : 'unchecked');
}

function onItemToggle(item, pressed){
//Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text,

pressed);
}

});

Joyfulbob
6 Jul 2009, 5:13 AM
FYI, the menu now works in V3.0 RC3. Thanks everyone for your assistance!

repolho
14 Jul 2009, 11:02 AM
its working now in 3.0 final? for me, even the examples dont work...

there is another way to put menu inside a panel??

Joyfulbob
14 Jul 2009, 11:16 AM
Yes; I got it working. Here's my code:



var invInqMenu = new Ext.menu.Menu({
title: 'Inquiries',
collapsible:true,
autoHeight: true,
xtype: 'menu',
defaults: { xtype:'menuitem' },
floating: false,
split:true,
items: [{
text: 'Inquiry1',
iconCls:'nav',
disabled: false,
handler: function(){
}
},{
text: 'Inquiry 2',
disabled: false,
iconCls:'nav',
handler: function(){
}]
});

...

var viewport = new Ext.Viewport({
id: 'viewport',
layout:'border',
//renderTo: 'viewport',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
hidden:true,
height:32
},{
region:'west',
id:'west-panel',
title:'Invoicing',
split:true,
width: 210,
minSize: 200,
maxSize: 500,
margins:'0 0 0 5',
collapsible: true,
layout: 'accordion',
autoScroll:true, // ToDo: Turn off when I figure out IE7 scroll bars
layoutConfig:{
animate:true
},
items: [
...
{ title:'Inquiries', items: invInqMenu }
]
},
invTabPanel
]
}); // eo viewport

This is all you need; no more 'MenuPanel' ux!

P.S. I'd still love to see menu item tooltips! ;)

cncowboy
3 Nov 2009, 7:05 PM
i add a multi level menu into accordion panel,
the menu in accordion panel will dispear if i select a second level menu item,
help!!