效果图:
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
});
}
});
分享到:
相关推荐
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
org.restlet.ext.spring.jar
Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文
ext.ux.menu.storemenu.zip
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
运行Microsoft office时,vbe6ext.olb不能加载
环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员
Ext.data.Store的基本用法 Ext.data.Store的基本用法 Ext.data.Store的基本用法
Ext.get与Ext.fly的区别与用法
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
org.restlet.ext.servlet-2.1.1.jar
var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext....
Ext.js 3.0中文API和Ext.js中文教程打包下载
看名字,有需要下jar包
com.noelios.restlet.ext.servlet_2.4.jar
如何给Ext.panel增加一个背景图片
57、Ext.menu.BaseItem类 …………… 50 58、Ext.menu.Adapter类 ……………… 51 59、Ext.menu.Item类 ………………… 51 60、Ext.menu.CheckItem类 …………… 51 61、Ext.menu.Separator类 ………… 52 62、Ext....
NULL 博文链接:https://chun521521.iteye.com/blog/1935516