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

最新推荐文章于 2016-11-23 14:41:34 发布

iteye_194

最新推荐文章于 2016-11-23 14:41:34 发布

阅读量257

点赞数

分类专栏： ext 文章标签： EXT CSS F# IE QQ

本文链接：https://blog.csdn.net/iteye_194/article/details/81681268

版权

ext 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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());
	})
});

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

[img]/upload/attachment/72768/2013aa7a-4242-3c74-b381-93f3bc15a87c.jpg[/img]

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


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

[img]/upload/attachment/73063/7a7e19f3-8c3b-3596-90d7-1ceba21ea5d8.jpg[/img]

哦原来是传说中的颜色选择器。
我们并没有向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());
	})

[img]/upload/attachment/73078/6aa1f42d-f945-3c85-8eb0-6923d740509c.jpg[/img]

同样颜色选择器中也有相应的事件，也有一个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());
	})

[img]/upload/attachment/73076/356adb94-2f56-3ace-b779-9e14d7180e09.jpg[/img]

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


	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选项

[img]/upload/attachment/73059/9eb3812a-818a-3d3d-a9e1-892228b3b099.jpg[/img]

iteye_194

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[ExtJS2.1教程-4]Menu(菜单)

menu.html[code="html"] 菜单举例js css引用这里省略了 [/code]menu.js[code="js"]Ext.onReady(function(){ var menu = new Ext.menu.Menu({ minWidth:200,//最小宽度 items:[{ t...
复制链接

扫一扫