<%@page contentType="text/html;charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!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">
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext-4.2.1.883/resources/css/ext-all.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1.883/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1.883/ext-all.js"></script>
<head>
<script type="text/javascript"> /** * 颜超群 * 2008.05.31 * * *菜单 * * 所在包: Ext.menu * * 所有菜单类: * Ext.menu.Adapter * Ext.menu.BaseItem * Ext.menu.CheckItem * Ext.menu.ColorItem * Ext.menu.ColorMenu * Ext.menu.DateItem * Ext.menu.Item * Ext.menu.Menu * Ext.menu.MenuMgr * Ext.menu.Separator * */ /* * 最常用的菜单类 * Ext.menu.Menu * 属性:items 可以放菜单包中所有的实例,一般我们常用Ext.menu.Item * * Ext.menu.Item属性: * * handler 处理函数 * hideDelay 隐藏延迟,默认100毫秒 * hideOnClick 是否点击菜单项后自动隐藏,默认是true * href 指定链接地址 * hrefTarget 链接打开的发式 * icon 可以指定在菜单项前面显示的图标,默认没有图标 * text 菜单项显示的文本,可以使用Html * */ Ext.onReady(function(){ var menu1=new Ext.menu.Menu({ items:[{ //菜单项的集合 text:"颜超群", //菜单项的文本, href:"http://jaychaoqun.cnblogs.cn",//指定链接地址 hrefTarget:"_blank", //链接打开的发式,在新窗口打开
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
}] }); /** * 普通菜单 */ var menu2=new Ext.menu.Menu({ items:[{ text:"<b>粗体</b>", handler:handlerMenu },{ text:"<i>斜体<i>", handler:handlerMenu },{ text:"<u>下划线</u>", handler:handlerMenu },{ text:"<font color=red>红色字体</font>", handler:handlerMenu }] }); /** * 带子菜单的菜单 */ var menu3=new Ext.menu.Menu({ items:[{ text:"菜单项1", //菜单项的文本, //子菜单 menu:{items:[{text:"子菜单1",handler:handlerMenu},{text:"子菜单2",handler:handlerMenu},{text:"子菜单3",handler:handlerMenu}]} },{ text:"菜单项2", menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]} },{ text:"菜单项3", menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]} }] });
var panel= Ext.create('Ext.panel.Panel', { //new 一个Panel 用以显示菜单
width:300, //宽度
border:true, //有边框 renderTo:"div1", //显示的位置,在body里的一个div tbar:[{text:"导航菜单",menu:menu1}, //把菜单放在Panel的顶部工具栏 {text:"普通菜单",menu:menu2}, {text:"带子菜单的菜单",menu:menu3},
] }); /** * 用以处理菜单项点击事件 * @param {Object} item */ function handlerMenu(item){ Ext.Msg.alert("提示","您点击了"+item.text+"项"); } }); </script>
</head>
<body>
<div align="center" id="div1"></div>
</body>
</html>效果图:
怎么样让效果图上的菜单变为竖着排的,谢谢extjsstylesheetfunctionstringobject
<%@taglib prefix="s" uri="/struts-tags" %>
<!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">
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext-4.2.1.883/resources/css/ext-all.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1.883/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1.883/ext-all.js"></script>
<head>
<script type="text/javascript"> /** * 颜超群 * 2008.05.31 * * *菜单 * * 所在包: Ext.menu * * 所有菜单类: * Ext.menu.Adapter * Ext.menu.BaseItem * Ext.menu.CheckItem * Ext.menu.ColorItem * Ext.menu.ColorMenu * Ext.menu.DateItem * Ext.menu.Item * Ext.menu.Menu * Ext.menu.MenuMgr * Ext.menu.Separator * */ /* * 最常用的菜单类 * Ext.menu.Menu * 属性:items 可以放菜单包中所有的实例,一般我们常用Ext.menu.Item * * Ext.menu.Item属性: * * handler 处理函数 * hideDelay 隐藏延迟,默认100毫秒 * hideOnClick 是否点击菜单项后自动隐藏,默认是true * href 指定链接地址 * hrefTarget 链接打开的发式 * icon 可以指定在菜单项前面显示的图标,默认没有图标 * text 菜单项显示的文本,可以使用Html * */ Ext.onReady(function(){ var menu1=new Ext.menu.Menu({ items:[{ //菜单项的集合 text:"颜超群", //菜单项的文本, href:"http://jaychaoqun.cnblogs.cn",//指定链接地址 hrefTarget:"_blank", //链接打开的发式,在新窗口打开
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
},{ text:"颜超群", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank",
}] }); /** * 普通菜单 */ var menu2=new Ext.menu.Menu({ items:[{ text:"<b>粗体</b>", handler:handlerMenu },{ text:"<i>斜体<i>", handler:handlerMenu },{ text:"<u>下划线</u>", handler:handlerMenu },{ text:"<font color=red>红色字体</font>", handler:handlerMenu }] }); /** * 带子菜单的菜单 */ var menu3=new Ext.menu.Menu({ items:[{ text:"菜单项1", //菜单项的文本, //子菜单 menu:{items:[{text:"子菜单1",handler:handlerMenu},{text:"子菜单2",handler:handlerMenu},{text:"子菜单3",handler:handlerMenu}]} },{ text:"菜单项2", menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]} },{ text:"菜单项3", menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]} }] });
var panel= Ext.create('Ext.panel.Panel', { //new 一个Panel 用以显示菜单
width:300, //宽度
border:true, //有边框 renderTo:"div1", //显示的位置,在body里的一个div tbar:[{text:"导航菜单",menu:menu1}, //把菜单放在Panel的顶部工具栏 {text:"普通菜单",menu:menu2}, {text:"带子菜单的菜单",menu:menu3},
] }); /** * 用以处理菜单项点击事件 * @param {Object} item */ function handlerMenu(item){ Ext.Msg.alert("提示","您点击了"+item.text+"项"); } }); </script>
</head>
<body>
<div align="center" id="div1"></div>
</body>
</html>效果图:
怎么样让效果图上的菜单变为竖着排的,谢谢extjsstylesheetfunctionstringobject
这个:width:300, //宽度和div1的样式为高>宽试试
是改成这样吗兄弟,但是还是横着排