PDA

View Full Version : Ext.ux.ColumnMenu [v1.1]



watrboy00
7 Apr 2008, 10:17 PM
I have an application list in our company's portal and the list got to long so I thought a column layout would work a little better. This will be useless once a Menu becomes a container but in the mean time have at it.

Tested in IE6, IE7, FF2. Let me know what you think.

html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Column Menu</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
.x-column-menu {
background: #f0f0f0;
padding: 0;
margin: 0;
}
.x-column-menu .x-menu-list {
float: left;
padding: 2px 2px 2px 3px;
margin: 0;
background: #f0f0f0 url(menu.gif) repeat-y;
}
.x-column-menu .x-menu-item-icon {
margin: 0 10px 0 0;
}
.x-column-menu .x-menu-item-active {
margin-left: 0px;
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="ext.ux.menu.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var menu = new Ext.ux.ColumnMenu({
allowOtherMenus: false,
columnHeight: 500,
columnWidth: 148,
items: [{
text: 'Item 1'
}, {
text: 'Item 2'
}, {
text: 'Item 3'
}, {
text: 'Item 4'
}],
plain: true,
shadow: false
});

var toolbar = new Ext.Toolbar({
id: 'toolbar',
items: [{
menu: menu,
text: 'Menu'
}],
renderTo: 'toolbar'
});
});
</script>
</head>
<body>
<div id="toolbar"></div>
</body>
</html>js


/**
* @class Ext.ux.ColumnMenu
* @extends Ext.menu.Menu
* A menu object. This is the container to which you add all other menu items in column format. Menu can also serve a as a base class
* when you want a specialzed menu based off of another component (like {@link Ext.menu.DateMenu} for example).
* @constructor
* Creates a new Column Menu
* @param {Object} config Configuration options
*/
Ext.ux.ColumnMenu = function(config) {
Ext.apply(this,config);
Ext.ux.ColumnMenu.superclass.constructor.call(this, config);
};

Ext.extend( Ext.ux.ColumnMenu , Ext.menu.Menu , {
/**
* @cfg {Number} columnHeight The max height of a menu column in pixels (defaults to 300)
*/
columnHeight: 300,
/**
* @cfg {Number} columnWidth The width of a menu column in pixels (defaults to 180)
*/
columnWidth: 180,

// private
render: function() {
if ( this.el ) {
return;
}

var el = this.el = this.createEl();

if ( !this.keyNav ) {
this.keyNav = new Ext.menu.MenuNav( this );
}

if ( this.plain ) {
el.addClass("x-menu-plain");
}

if ( this.cls ) {
el.addClass( this.cls );
}

var focusEl = this.focusEl = el.createChild({
cls: "x-menu-focus",
href: "#",
onclick: "return false;",
tabIndex:"-1",
tag: "a"
});

el.setStyle({
'background': '',
'margin': '0',
'padding': '0'
});

var containerEl = this.containerEl = el.createChild({
cls: "x-column-menu",
tag: "div"
});

var columnEl = null;
var ul = null;
var li = null;

this.items.each(function( item , index , length ) {
if ( ul === null || ul.getHeight() >= this.columnHeight ) {
columnEl = containerEl.createChild({
cls: "x-menu-list",
tag: "div"
});

ul = columnEl.createChild({
style: "width: " + this.columnWidth + "px;",
tag: "ul"
});

ul.on("click", this.onClick, this);
ul.on("mouseover", this.onMouseOver, this);
ul.on("mouseout", this.onMouseOut, this);

this.ul = ul;
}

li = document.createElement("li");
li.className = "x-menu-list-item";

ul.dom.appendChild( li );

item.render( li , this );
}.createDelegate( this ));

containerEl.child('.x-menu-list:last').setHeight( containerEl.child('.x-menu-list:first').getComputedHeight() );
}
});css


.x-column-menu {
background: #f0f0f0;
padding: 0;
margin: 0;
}
.x-column-menu .x-menu-list {
float: left;
padding: 2px 2px 2px 3px;
margin: 0;
background: #f0f0f0 url(menu.gif) repeat-y;
}
.x-column-menu .x-menu-item-icon {
margin: 0 10px 0 0;
}
.x-column-menu .x-menu-item-active {
margin-left: 0px;
}menu.gi image: see attachment

watrboy00
24 Apr 2008, 6:04 AM
Update from tof (http://extjs.com/forum/member.php?u=1009) (http://extjs.com/forum/showthread.php?t=33475)

I have take what tof created and re factored it to fixed a couple of issues. It now works in IE6, IE7, FF2.

fangzhouxing
17 May 2008, 9:11 PM
Thanks.

But how can I make the menu have column effect like attachment pic?
I just got the menu like this from the example code.:

Menu V
Item 1
Item 2
Item 3
Item 4

How to make it display in multi-columns?

fangzhouxing
21 May 2008, 1:28 AM
Anyone?

watrboy00
1 Jun 2008, 12:36 PM
What does your code look like. Did you also put in the css for the column?

fangzhouxing
7 Jun 2008, 12:01 AM
I use the exact code attached. Change 'columnHeight: 500' to 'columnHeight: 100' and I can see the effect.

watrboy00,thank you for sharing the great code.

watrboy00
16 Jun 2008, 9:26 AM
I think I ran into problems as well where it gave weird output if the column height was larger than your current view height. I will add a update in that checks for this in the next version.

Also adding in a top and bottom toolbar config to add in toolbars.

NoahK17
15 Jul 2008, 2:08 PM
Works perfect. Thanks!

koko2589
24 Jun 2009, 10:22 AM
how to do menu like this?http://extjs.net/forum/attachment.php?attachmentid=6412&stc=1&thumb=1&d=1209094862

lnx85
8 Sep 2009, 1:03 PM
Does someone know how to fix ColumnMenu for ExtJS 3.0 ?