extjs,大家帮我看一下,谢谢
<%@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>
效果图:
怎么样让效果图上的菜单变为竖着排的,谢谢 extjs stylesheet function string object
[解决办法]
改
这个:width:300, //宽度
和
div1的样式为高>宽
试试
