以下是一个静态的菜单,可供参考!如有做的不好的,可以留言相告!共同交流!
代码如下:
新建一个menu.jsp 代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>菜单栏</title>
<style type="text/css">
.blist {
background-image: url(img/add16.gif)!important;
}
</style>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var data=[{name:"java程序员",value:"java程序员"},
{name:"java工程师",value:"java工程师"},
{name:".Net工程师",value:".Net工程师"}];//定义数据
var store=new Ext.data.JsonStore({//读取数据
data:data,
fields:["name","value"]
});
var combo=new Ext.form.ComboBox({//定义下拉框
id:"combo",
typeAhead:true,
typeAheadDelay:30,
width:135,
emptyText:"请选择",
//selectOnFocus:true,
store:store,
mode:"local",
triggerAction:"all",
displayField:"name",
valueField:"value"
});
//定义选择时间列表
var dateTime=new Ext.menu.DateMenu({
// 选择后的引用函数
handler:function(dp,date){
Ext.MessageBox.alert('日期选择','选择日期为:' + date.format('Y/m/d'),'');
}
});
var color=new Ext.menu.ColorMenu({
handler:function(dp,color){
Ext.MessageBox.alert("颜色选择","选择的颜色为:#"+color);
}
});
//定义一个菜单栏
var men=new Ext.menu.Menu({
id:"mainmenu",
items:[
combo,
'-',
{
text:"请选择日期",
menu:dateTime
},
'-',
{
text:"请选择颜色",
menu:color
},
'-', {
text: '请选择排列方式',
menu: {
items: [
'<b >单选</b>',
{
text: '列表',
checked: true,
group: 'theme',
checkHandler:onItemCheck
}, {
text: '大图标',
checked: false,
group: 'theme',
checkHandler:onItemCheck
}, {
text: '小图标',
checked: false,
group: 'theme',
checkHandler:onItemCheck
}, {
text: '详细列表',
checked: false,
group: 'theme',
checkHandler:onItemCheck
}
]
}
}
]
});
//申明工具栏
var tb=new Ext.Toolbar({
items:[
{
text:"文件",
menu:men //注入菜单
},"-",
{
xtype:"tbsplit",
text:"编辑",
iconCls:"blist",
menu:new Ext.menu.Menu({
items:[
{
text:"复制",
handler:onItemCheck
},
{
text:"粘贴",
handler:onItemCheck
},
{
text:"删除",
handler:onItemCheck
}
]
})
}
]
});
tb.addField(combo);//在toolbar中添加下拉框
//定义一个面板
var panl=new Ext.Panel({
layout:"form",
title:"部分菜单",
width:500,
height:300,
renderTo:Ext.getBody(),
tbar:tb
});
});
//定义处理事件
function onItemCheck(item, checked){
Ext.MessageBox.alert("提示", checked ? item.text : 'unchecked');
}
</script>
<body>
</body>
</html>
====运行效果查看附件====
- 大小: 40.5 KB
分享到:
相关推荐
总结起来,`ext.ux.menu.storemenu.zip` 提供了一个基于 ExtJS 的动态菜单解决方案,它利用了数据存储的功能来创建可扩展和动态的菜单系统。这个组件对于那些需要根据用户角色、权限或动态数据来构建菜单的 Web 应用...
6. **菜单和工具栏**:创建和使用菜单(Menu)和工具栏(Toolbar)。 7. **拖放(Drag & Drop)和DND**:如何实现元素的拖放操作。 8. **Ajax和数据通信**:使用Ajax请求进行后台通信,包括JsonP和ScriptTagProxy。 ...
4. **右键菜单**:实现右键菜单(Ext.menu.Menu),定义菜单项,绑定点击事件处理函数。 5. **事件监听**:监听TreePanel的`contextmenu`事件,当用户右键点击节点时触发,显示右键菜单。 6. **数据库操作**:在...
总的来说,创建Ext3.X的横向菜单导航栏需要理解`Ext.menu.Menu`和`Ext.menu.Item`的用法,结合JSON数据动态生成菜单,并正确引用库文件和样式文件。通过这样的方法,我们可以构建出功能丰富、易于使用的Web应用程序...
这个文件通常会引入必要的Ext JS库,如`ext-all.js`或`ext-debug.js`,以及`tabScrollerMenu.css`和`tabmenu.gif`等资源文件。`tabScrollerMenu.css`用于设置插件的样式,确保其与页面的其他元素协调一致,而`tab...
3.4.5 认识Ext.menu.Menu菜单 3.4.6 最简单的菜单栏 3.4.7 创建二级或多级菜单 3.4.8 将更多组件加入菜单 3.4.9 具有选择框的菜单 3.5 本章小结 第4章 最常用的表单 4.1 表单及表单元素 4.1.1 了解Ext.form...
menu = Ext.create('Ext.menu.Menu', { items: [{ text: '打开', handler: function() { console.log('打开文件夹:', record.data.text); } }, { text: '重命名', handler: function() { console.log('...
在EXT JS库中,下拉菜单(Dropdown Menu)是一种常见的组件,用于提供多个选项供用户选择。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,它提供了丰富的UI组件和数据绑定机制。然而,从标题...
通过熟练掌握`Ext.Toolbar`、`Ext.menu.Menu`、`Ext.menu.Item`、`Ext.menu.CheckItem`、`Ext.menu.DateMenu`和`Ext.menu.ColorItem`等类的用法,开发者可以轻松创建出符合用户需求的Web应用菜单。在实际开发中,...
- `Ext.menu.Menu`可以与`itemcontextmenu`事件结合,创建节点的右键菜单。 - `Ext.selection.TreeModel`提供了树形选择行为,支持单选或多选。 总之,`ext.tree`是ExtJS库中一个强大且灵活的组件,通过配置和...
它的核心组件包括窗口(Window)、面板(Panel)、表格(Grid)、菜单(Menu)、表单(Form)等,可以构建出复杂的Web应用界面。 YuiGrid作为EXT.js中的表格组件,主要用于显示和操作数据。以下是YuiGrid的一些关键...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
阅读《Ext级联菜单.docx》文档可能会提供更多关于如何配置和定制ExtJS级联菜单的细节,包括但不限于样式调整、动态加载子菜单、自定义事件处理等。对于初学者来说,理解和掌握这些基本概念是至关重要的,因为它们将...
2. **创建菜单**:然后,使用`Ext.create`或`new Ext.menu.Menu`创建菜单对象,并将之前创建的菜单项添加到其中。 ```javascript var menu = Ext.create('Ext.menu.Menu', { items: [item1, item2, ...] // 添加多...
Ext.menu.Menu允许你创建可定制的多级菜单,可与工具栏中的按钮关联,实现点击后展开菜单的效果。 4. **表单(Form)** - **表单面板(Ext.form.Panel)**:是表单的基础容器,可以包含多个表单字段和布局。它管理...
- `menu`:`Ext.menu.Menu`,创建下拉菜单。 - `colormenu`:`Ext.menu.ColorMenu`,颜色选择菜单。 - `datemenu`:`Ext.menu.DateMenu`,日期选择菜单项。 - `menuitem`:`Ext.menu.Item`,菜单的基本项。 - `...
2. **组件库**:详细讲解各种UI组件,如面板(Panel)、表格(Grid)、表单(Form)、菜单(Menu)、工具栏(Toolbar)等,以及如何自定义和组合这些组件。 3. **数据绑定**:阐述如何使用Store和Model进行数据管理...
1. **`menu`** - `Ext.menu.Menu`,菜单组件,用于创建上下文菜单或下拉菜单。 2. **`colormenu`** - `Ext.menu.ColorMenu`,颜色选择菜单,用于从预设的颜色中选择。 3. **`datemenu`** - `Ext.menu.DateMenu`...