在桌面程序gui开发中,menu是我们所经常使用的组件之一,它为用户提供了便利的程序功能选择项;而在web开发中,如何制作menu菜单效果一直是个很棘手的问题,如何让菜单通用,如何令菜单响应事件都需要我们自己动手来完成。所幸Ext也为我们提供了Menu组件,以Ext进行开发时,我们的不必要工作量将大大的减少。
Ext的Menu组件,是通过几个类的联合来使用的,这些类包括:Ext.Toolbar、Ext.menu.Menu、Ext.menu.Item、 Ext.menu.CheckItem,以及一些特殊类型的菜单或菜单项,例如菜单Ext.menu.DateMenu、菜单项Ext.menu.ColorItem。
其中组织关系如下图:
Ext.Toolbar:该类表示一个菜单条,构建函数接受两个参数,第一个是指定toolbar的容器(contrainer);第二个参数是包含全部按钮的数组。
Ext.menu.Menu:该类表示一个菜单,包含菜单标识id和菜单中所含的菜单项。
Ext.menu.Item:该类表示一个菜单项,菜单项包括一些属性,如上面的text和handler,根据不同菜单项类型,属性的使用略有不同,最基本的包括文本内容text和事件处理器函数handler/ checkHandler,具体请参考Ext 的API文档。
Ext.menu.CheckItem: 可选菜单项,从Ext.menu.Item继承而来,表示可选的菜单项。
Ext.menu.DateMenu: 特定的表示时间的菜单,从Ext.menu.Menu继承而来 。
Ext.menu.ColorItem:特定的表示颜色选择的菜单项集合,可直接作为Menu构造函数中的items属性值。
下面我给出一个简单的用例代码:(
Ext2.0配置方法见此)
MenuExt.js
/**//**
*<p>Title:LoonFramework</p>
*<p>Description:Ext的Menu用例</p>
*<p>Copyright:Copyright(c)2008</p>
*<p>Company:LoonFramework</p>
*<p>License:http://www.apache.org/licenses/LICENSE-2.0</p>
*@authorchenpeng
*@email:ceponline@yahoo.com.cn
*@version0.1
*/
Ext.onReady(function()...{
Ext.QuickTips.init();
//菜单选项
vardateMenu=newExt.menu.DateMenu(...{
handler:function(dp,date)...{
Ext.MessageBox.alert('日期选择','选择日期为:'+date.format('Y/m/d'),'');
}
});
varcolorMenu=newExt.menu.ColorMenu(...{
id:'colorMenu',
handler:function(cm,color)...{
varrgb=Ext.color.hexToRGB(color);
Ext.MessageBox.alert('颜色','R='+rgb.R+',G='+rgb.G+',B='+rgb.B,'');
}
});
functiononItemCheck(item,checked)...{
Ext.MessageBox.alert('选择','当前点选['+item.text+'],状态为'+(checked?'checked':'unchecked'),'');
}
varmenu=newExt.menu.Menu(...{
id:'mainMenu',
items:[...{
text:'选项1',
//默认为选中
checked:true,
//选中处理方式为onItemCheck
checkHandler:onItemCheck
},...{
text:'选项2',
checked:true,
checkHandler:onItemCheck
},...{
text:'选项3!',
checked:true,
checkHandler:onItemCheck
},//分隔菜单
'-',...{
text:'单选菜单',
menu:...{
items:[...{
text:'A',
checked:false,
group:'theme',
checkHandler:onItemCheck
},...{
text:'B',
checked:true,
group:'theme',
checkHandler:onItemCheck
},...{
text:'C',
checked:false,
group:'theme',
checkHandler:onItemCheck
},...{
text:'D',
checked:false,
group:'theme',
checkHandler:onItemCheck
}]
}
},...{
text:'日期选择',
iconCls:'calendar',
menu:dateMenu
},...{
text:'颜色选择',
menu:colorMenu
}]
});
//创建工具栏
vartb=newExt.Toolbar();
//绑定到toolbar元素
tb.render('toolbar');
//添加菜单
tb.add(...{
text:'Ext菜单测试',
iconCls:'bmenu',
//注入菜单
menu:menu
});
});
//自定义函数,用于从colorevent中提取所选数值
Ext.color=function()...{
varresult='';
varbool=true;
varformatValue=function(obj)...{
if(bool)...{
varobj=Array.prototype.slice.call(arguments,0);
result=String.format('{0}',obj);
}
bool=!bool;
returnresult;
}
varhexTodec=function(hexchar)...{
return"0123456789ABCDEF".indexOf(hexchar.toUpperCase());
}
return...{
value:function(obj)...{
returnformatValue(obj);
},
hexToRGB:function(color)...{
color=formatValue(color);
varnow=color.replace("#","");
return...{
R:(hexTodec(now.substr(0,1))*16)+hexTodec(now.substr(1,1)),
G:(hexTodec(now.substr(2,1))*16)+hexTodec(now.substr(3,1)),
B:(hexTodec(now.substr(4,1))*16)+hexTodec(now.substr(5,1))
}
},
init:function()...{
}
};
}
();
Ext.onReady(Ext.color.init,Ext.color);
MenuExt.html
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>MenuExt</title>
<!--加载ExtJs资源-->
<linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/>
<scripttype="text/javascript"src="adapter/ext/ext-base.js">...
</script>
<scripttype="text/javascript"src="ext-all.js">...
</script>
<!--我的js-->
<scripttype="text/javascript"src="MenuExt.js">...
</script>
</head>
<body>
<divid="toolbar"></div>
</body>
</body>
</html>
运行效果图如下:
分享到:
相关推荐
针对 ExtJS2.0,由于其通过浏览器解释执行,所以我们即可以使用记事本、EditPlus、UltraEdit 等方式直接编辑文本文件,也可以通过IDE 进行调试开发。 目前 Eclipse 上已经有很多能够支持ExtJS2.0 的插件,如Spket 等...
Ext2 核心 API 中文详解 ExtJS2.0实用简明教程 ExtJS2.0教程 ExtJS2.0实用简明教程(easyjf) ext中文API+ sample
extjs2.0.rar extjs2.0.rar extjs2.0.rar extjs2.0.rar
(1)Ext2.0的入门小实例 (2)ExtJS2.0开发与实践笔记 (3)JavaFx实现-渐变效果之一 (4)JavaFx实现-随机图形绘制
包括ExtJS2.0及API,还包括例子,以及中文的实用开发指南。对于初学ExtJS有很大的帮助。
ExtJs2.0学习系列ExtJs2.0学习系列
extJs2.0 中文手册 案例
Extjs2.0 智能提示
最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造,使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习...
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
Extjs2.0中文文档,pdf文档,值得收藏。 这个是老版本,但是也应该有不少人用这个。 好东西要分享
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一...28. extJs 2.0学习笔记(ext.js篇) 77
资料:包括extjs2.0源码
ajax框架之extjs2.0源码,用例,API……
ExtJS 是一个很不错的Ajax 框架,可以用来开发带有华丽外观的富客户端应用,ExtJS 是一个用javascript 编写,与后台技术无关的前端ajax 框架...本教程主要是针对ExtJS2.0 进行介绍,全部代码、截图等都是基于ExtJS2.0。
3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习...
EXTJS 2.0的官方范例,离线html格式!
关于ext学习的资料,有些例子 ExtJs2.0学习系列.CHM
ExtJS2.0实用简明教程和ExtJSapi