[ExtJS2.1教程-4]Menu(菜单)

llying

浏览: 1633188 次
性别:
来自: 长春

最近访客更多访客>>

lcrxiaomei

kristy_yy

ldb621

huangdj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT CSS F#IE QQ

menu.html

<html>
	<head>
		<title>菜单举例</title>
js css引用这里省略了
	</head>

	<body>

	</body>
</html>

menu.js

Ext.onReady(function(){
	
	var menu = new Ext.menu.Menu({
		minWidth:200,//最小宽度
		items:[{
			text:"first",
			handler:function(){Ext.Msg.alert("hello","我是菜单")}
		}]
	});
});

Menu中的defaultAlign:对齐方式 minWidth:200,最小宽度 shadow:菜单显示时候的阴影效果
菜单可以作用于任何元素下和任何控件下
是继承于Observable所以具有事件响应功能
items:菜单中重要属性,具体需要看add方法,通过她可以组合出多级菜单
Ext.menu.Item菜单选项只要是这个类都可以作为菜单选项
包含
text 显示文本 hanlder点击事件 href hrefTarget 连接
icon iconCls修饰菜单选项的即在菜单前面添加图标
icon 添加相对路径的图片
iconCls 指定样式

现在执行一下。
没有任何效果因为我们并没指定menu的显示位置

下面我们改一下
menu.html

<html>
	<head>
		<title>菜单举例</title>
//js css引用这里省略了
	</head>

	<body>
<div id="menu_test">menu here</div>
	</body>
</html>

menu.js

Ext.onReady(function(){
	var menu = new Ext.menu.Menu({
		minWidth:200,
		items:[{
			text:"first",
			handler:function(){Ext.Msg.alert("hello","我是菜单")}
		}]
	});
        var el = Ext.get("menu_test");
	el.on("click",function(e){
		//menu.showAt(e.getXY());//作用于该位置
		menu.show(this);//作用于元素上
		//e.getXY();//得到事件触发的坐标
	})
        //作用于页面上的鼠标右键
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();//终止之前的事件响应，不然还会在页面上弹出讨厌的ie右键菜单
		menu.showAt(e.getXY());
	})
        //当然我们也可以让他租用在el的鼠标右键事件中
        el.on("contextmenu",function(e){
		//menu.showAt(e.getXY());
		e.stopEvent();
		menu.show(this);
		//e.getXY();
	})
});

现在执行一下。 ok成功了

下面我们再来看一下icon和iconCls
一个是通过页面相对位置的图片一个是通过样式
使菜单前面出现一个小图标相当于qq好友信息中的前面头像图标
默认使用Ext.BLANK_IMAGE_URL中的设置即空白图标
Ext api 中描述 Defaults to "http://extjs.com/s.gif"
这也是为什么网速不好的时候会很慢，因为她要到http中加载
还会产生断网时可能某些地方引用了它产生图片不显示的白点
我们应该在ext加载的时候手动指定

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../ext/resources/images/default/s.gif";
	var menu = new Ext.menu.Menu({
		minWidth:200,//最小宽度
		items:[{
			text:"first",
			icon:"icon-info.gif",
			handler:function(){Ext.Msg.alert("提示","hi")}
		},{
			text:"second",
			iconCls:"menu_cls",
			handler:function(){Ext.Msg.alert("提示","hi")}
		}]
	});
	var el = Ext.get("menu_test");
	el.on("click",function(e){
		//menu.showAt(e.getXY());
		menu.show(this);
		//e.getXY();
	})
	el.on("contextmenu",function(e){
		//menu.showAt(e.getXY());
		e.stopEvent();
		menu.show(this);
		//e.getXY();
	})
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		menu.showAt(e.getXY());
	})
});

执行一下，first的图标正常显示了，second没有显示这是因为使用iconCls需要定义css的样式类
修改一下menu.html

<html>
	<head>
		<title>菜单举例</title>
               <style type="text/css">
			.menu_cls{
				background:url('icon-info.gif');
			}
		</style>
//js css引用这里省略了
	</head>

	<body>
<div id="menu_test">menu here</div>
	</body>
</html>

执行一下，ok
我们还有就是经常看到的菜单分割线，你一定看到过，如果没有你看看浏览器上的文件，编辑，查看...就明白了
那个横线在这里太容易了

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../ext/resources/images/default/s.gif";
	var menu = new Ext.menu.Menu({
		minWidth:200,//最小宽度
		items:[{
			text:"first",
			icon:"icon-info.gif",
			handler:function(){Ext.Msg.alert("提示","hi")}
		},"-",{
			text:"second",
			iconCls:"menu_cls",
			handler:function(){Ext.Msg.alert("提示","hi")}
		}]
	});
	var el = Ext.get("menu_test");
	el.on("click",function(e){
		//menu.showAt(e.getXY());
		menu.show(this);
		//e.getXY();
	})
	el.on("contextmenu",function(e){
		//menu.showAt(e.getXY());
		e.stopEvent();
		menu.show(this);
		//e.getXY();
	})
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		menu.showAt(e.getXY());
	})
});

只需在菜单分割的地方加上"-"即可。

下面我来来继续深入
同过menu的文档我们可以知道有两个类已经实现了menu分别是ColorMenu, DateMenu
ColorMenu 是什么？
我们加到右键菜单中看一下

var colorMenu = new Ext.menu.ColorMenu();
Ext.getDoc().on("contextmenu",function(e){
	e.stopEvent();
	colorMenu.showAt(e.getXY());
})

哦原来是传说中的颜色选择器。
我们并没有向menu里放任何东西，如何将颜色呈现出来呢？
实际上ColorMenu是继承menu 并在new 的时候是将ColorItem子项加载到menu里面了，
也就是实际上他是menu菜单中只有一个子项就是ColorItem。

DateMenu和DateItem也是同样的关系

var dateMenu = new Ext.menu.DateMenu();
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		dateMenu.showAt(e.getXY());
	})

当然我们要知道我们选中的日期是什么，可以在dateMenu中添加事件
select : ( DatePicker picker, Date date )
表示选择事件包含两个参数日期选择，所选日期

	var dateMenu = new Ext.menu.DateMenu();
	dateMenu.on("select",function(picker,date){
		Ext.Msg.alert("选中的日期",date);
	})
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		dateMenu.showAt(e.getXY());
	})

不过我们发现这个格式实在不是我们想要的
我们可以通过Date的formet方法进行指定格式

	var dateMenu = new Ext.menu.DateMenu();
	dateMenu.on("select",function(picker,date){
		Ext.Msg.alert("选中的日期",date.format("Y-m-d"));
	})
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		dateMenu.showAt(e.getXY());
	})

我们也可以定义出自己的格式常量，以后format的时候直接使用格式常量的方式

Date.patterns = {
    ISO8601Long:"Y-m-d H:i:s",
    ISO8601Short:"Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
	};

	var dateMenu = new Ext.menu.DateMenu();
	dateMenu.on("select",function(picker,date){
		Ext.Msg.alert("选中的日期",date.format(Date.patterns.FullDateTime));
	})
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		dateMenu.showAt(e.getXY());
	})

同样颜色选择器中也有相应的事件，也有一个select事件
select : ( ColorPalette palette, String color )
分别传入颜色选择器和选中的颜色

var colorMenu = new Ext.menu.ColorMenu();
	colorMenu.on("select",function(palette,color){
		Ext.Msg.alert("选中的颜色值",color);
	});
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		colorMenu.showAt(e.getXY());
	})

只有一级菜单已经不能满足我们了下面我们来看看二级菜单的实现

	var menu = new Ext.menu.Menu({
		items:[{text:"选项一"},"-",{text:"日期选项",menu:new Ext.menu.DateMenu()}]
	});
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		menu.showAt(e.getXY());
	})

	Date.patterns = {
    ISO8601Long:"Y-m-d H:i:s",
    ISO8601Short:"Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
	};

	var dateMenu = new Ext.menu.DateMenu();
	dateMenu.on("select",function(picker,date){
		Ext.Msg.alert("选中的日期",date.format(Date.patterns.FullDateTime));
	})
	var menu = new Ext.menu.Menu({
		items:[{text:"选项一"},"-",{text:"日期选项",menu:dateMenu},
			{text:"颜色选项",menu:new Ext.menu.ColorMenu()}]
	});
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		menu.showAt(e.getXY());
	})

menu：可以是对象也可以是配置选项

var menu = new Ext.menu.Menu({
		items:[{text:"选项一"},"-",{text:"日期选项",menu:{items:[{text:"子菜单"}]}},
			{text:"颜色选项",menu:new Ext.menu.ColorMenu()}]
	});

回到api好好看看menu的items选项他是一个混合器类型

下面我们看看menu中的其它item

	var titem = new Ext.menu.TextItem("文本选项");//文本item
	var titem2 = new Ext.menu.TextItem("文本选项");//文本item
	var sitem = new Ext.menu.Separator();//分隔符
	var citem = new Ext.menu.CheckItem({text:"check",checked:true});
	
	var citem1 = new Ext.menu.CheckItem({text:"check",checked:true,group:"g"});
	var citem2 = new Ext.menu.CheckItem({text:"check",group:"g"});
	var citem3 = new Ext.menu.CheckItem({text:"check",group:"g"});
	var menucg = new Ext.menu.Menu({
		items:[citem1,citem2,citem3]
	});
	var menu = new Ext.menu.Menu({
		items:[titem,sitem,titem2,citem,{text:"请选择",menu:menucg}]
	})
	Ext.getDoc().on("contextmenu",function(e){
		e.stopEvent();
		menu.showAt(e.getXY());
	})

TextItem是文本选项也就是前面没有图标站位符
Separator 相当于'-'分割符
CheckItem选择框也可以组成选择按钮组通过group选项