浏览 3143 次
|
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-01-14
最后修改：2011-01-14
效果图：
Ext.menu.ColumnMenu类
/**
* @class Ext.menu.ColumnMenu
* @extends Ext.menu.Menu
* 列布局菜单
* @xtype columnmenu
*/
Ext.menu.ColumnMenu = function(config) {
Ext.menu.ColumnMenu.superclass.constructor.call(this, config);
var cols = [];
Ext.each(this.columns, function(c) {
cols.push(Ext.apply(c, {
xtype: 'menu',
hidden: false,
hideMode: 'display',
floating: false
}));
}, this);
this.colCt = new Ext.Container({
layout: 'column',
width: this.menuWidth,
items: cols
});
this.add(this.colCt);
};
Ext.extend(Ext.menu.ColumnMenu, Ext.menu.Menu, {
cls: 'x-columnmenu',
layout: {
type: 'menu',
itemTpl: new Ext.XTemplate('<li id="{itemId}" class="{itemCls}"></li>')
},
/**
* @cfg {Number} menuWidth 菜单宽度，默认300px
*/
menuWidth: 300,
/**
* @cfg {Array} columns 菜单列
*/
beforeDestroy: function() {
this.colCt.destroy();
}
});
Ext.reg('columnmenu', Ext.menu.ColumnMenu);
测试页面
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ColumnMenu Example</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css"/>
<!-- ** Javascript ** -->
<!-- ExtJS library -->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript" src="columnmenu.js"></script>
</head>
<body>
<h1>Ext.menu.ColumnMenu</h1>
<div style="border: 3px solid #C3DAF9; height: 300px; width: 650px;">
<div id="toolbar"></div>
</div>
<br /><br /><br /><br /><br />
</body>
</html>
测试样例JS
Ext.onReady(function() {
Ext.QuickTips.init();
var menu = new Ext.menu.ColumnMenu({
menuWidth: 400,
columns: [{
columnWidth: .33,
items: [{
text: 'I like Ext',
handler: onItemClick
}, {
text: 'I like Ext',
handler: onItemClick
}, {
text: 'I like Ext',
handler: onItemClick
}, {
text: 'I like Ext',
handler: onItemClick
}]
}, {
columnWidth: .33,
items: [{
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
}]
}, {
columnWidth: .33,
items: [{
text: '<b>Bold</b>',
handler: onItemClick
}, {
text: '<i>Italic</i>',
handler: onItemClick
}, {
text: '<u>Underline</u>',
handler: onItemClick
}]
}]
});
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text: 'Button w/ Menu',
menu: menu
});
tb.doLayout();
function onItemClick(item) {
msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}
function onItemCheck(item, checked) {
msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
}
var msgCt;
function createBox(t, s) {
return ['<div class="msg">', '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>', '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>', '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>', '</div>'].join('');
}
function msg(title, format) {
if (!msgCt) {
msgCt = Ext.DomHelper.insertFirst(document.body, {
id: 'msg-div'
}, true);
}
msgCt.alignTo(document, 't-t');
var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
var m = Ext.DomHelper.append(msgCt, {
html: createBox(title, s)
}, true);
m.slideIn('t').pause(1).ghost("t", {
remove: true
});
}
});
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-09-29
LZ:你没有贴出 样式: 'x-columnmenu'的代码啊，请帖出来。
|
| 返回顶楼 | |
