ExtJS2.0开发与实践笔记[3]——Ext中的Menu

在桌面程序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 >
< meta http-equiv ="Content-Type" content ="text/html;charset=UTF-8" >
< title > MenuExt </ title >
<!-- 加载ExtJs资源 -->
< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />
< script type ="text/javascript" src ="adapter/ext/ext-base.js" > ...
</ script >
< script type ="text/javascript" src ="ext-all.js" > ...
</ script >
<!-- 我的js -->
< script type ="text/javascript" src ="MenuExt.js" > ...
</ script >
</ head >
< body >
< div id ="toolbar" ></ div >
</ body >
</ body >
</ html >

运行效果图如下：