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
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