- 浏览: 1615040 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
menu.html
menu.js
Menu中的defaultAlign:对齐方式 minWidth:200,最小宽度 shadow:菜单显示时候的阴影效果
菜单可以作用于任何元素下和任何控件下
是继承于Observable所以具有事件响应功能
items:菜单中重要属性,具体需要看add方法,通过她可以组合出多级菜单
Ext.menu.Item菜单选项 只要是这个类都可以作为菜单选项
包含
text 显示文本 hanlder点击事件 href hrefTarget 连接
icon iconCls修饰菜单选项的 即在菜单前面添加图标
icon 添加相对路径的图片
iconCls 指定样式
现在执行一下。
没有任何效果 因为我们并没指定menu的显示位置
下面我们改一下
menu.html
menu.js
现在执行一下。 ok成功了
下面我们再来看一下icon和iconCls
一个是通过页面相对位置的图片 一个是通过样式
使菜单前面出现一个小图标 相当于qq好友信息中的前面头像图标
默认使用Ext.BLANK_IMAGE_URL中的设置 即空白图标
Ext api 中描述 Defaults to "http://extjs.com/s.gif"
这也是为什么网速不好的时候会很慢,因为她要到http中加载
还会产生断网时可能某些地方引用了它产生图片不显示的白点
我们应该在ext加载的时候手动指定
执行一下,first的图标正常显示了,second没有显示这是因为使用iconCls需要定义css的样式类
修改一下menu.html
执行一下,ok
我们还有就是经常看到的菜单分割线,你一定看到过,如果没有你看看浏览器上的文件,编辑,查看...就明白了
那个横线在这里太容易了
只需在菜单分割的地方加上"-"即可。
下面我来来继续深入
同过menu的文档我们可以知道有两个类已经实现了menu分别是ColorMenu, DateMenu
ColorMenu 是什么 ?
我们加到右键菜单中看一下
哦 原来是传说中的颜色选择器。
我们并没有向menu里放任何东西,如何将颜色呈现出来呢?
实际上ColorMenu是继承menu 并在new 的时候是将ColorItem子项加载到menu里面了,
也就是实际上他是menu菜单中只有一个子项就是ColorItem。
DateMenu和DateItem也是同样的关系
当然我们要知道我们选中的日期是什么,可以在dateMenu中添加事件
select : ( DatePicker picker, Date date )
表示选择事件 包含两个参数 日期选择,所选日期
不过我们发现这个格式实在不是我们想要的
我们可以通过Date的formet方法进行指定格式
我们也可以定义出自己的格式常量,以后format的时候直接使用格式常量的方式
同样颜色选择器中也有相应的事件,也有一个select事件
select : ( ColorPalette palette, String color )
分别传入颜色选择器和选中的颜色
只有一级菜单已经不能满足我们了 下面我们来看看二级菜单的实现
menu:可以是对象 也可以是配置选项
回到api好好看看menu的items选项 他是一个混合器类型
下面我们看看menu中的其它item
TextItem是文本选项 也就是前面没有图标站位符
Separator 相当于'-'分割符
CheckItem选择框 也可以组成选择按钮组 通过group选项
<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选项
发表评论
-
ExtJS 2 系列教程
2009-02-08 18:23 3256如果大家对JEE的深入研究有兴趣 可以加入Q群:4617650 ... -
[ExtJS2.1教程-7]Tree(树控件)
2009-02-08 18:10 8060树控件: 树是由根节点、叶子节点、非叶子节点(目录节点)组成的 ... -
[ExtJS2.1教程-6]Tip(提示框)
2009-02-08 09:32 8185信息提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时, ... -
[ExtJS2.1教程-5]ToolBar(工具栏)
2009-02-07 09:25 9699面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具 ... -
[ExtJs 2.02]Grid默认选择首行并允许键盘操作
2009-01-23 14:39 4191grid默认选中第一行问题解决了 grid.getSelect ... -
[电子书]LearningExtJS(完整版2.01 en)
2009-01-22 11:11 2309What you will learn from this ... -
[ExtJs 2.02]ajax文件上传
2009-01-21 15:32 7179例子是网上找的,不过是php的 给转成jsp 吧中间遇到的问题 ... -
[ExtJs 2.02]Combobox的使用
2009-01-21 10:51 28201.简单使用: <!DOCTYPE HTML PUB ... -
grid设置某列背景颜色
2009-01-16 10:47 1823css .x-grid-back-red { back ... -
grid设置某行字体颜色
2009-01-16 10:34 3535css代码 .x-grid-record-red ... -
Ext2.0.2用于netbeans的JavaScript的库
2009-01-05 14:39 1671Ext2.0.2用于netbeans的JavaScript的库 ... -
Ext2.1API中文文档
2009-01-04 08:58 2515Ext2.1API中文文档 基本上Ext2系列都实用 需要Ad ... -
[ExtJS2.1教程-3]事件机制
2009-01-02 23:26 3405javascript的事件我们用的最多的就是用于表单验证 现在 ... -
[ExtJS2.1教程-2]组件的使用
2009-01-02 19:09 2634我们还是以alert为例 首 ... -
[ExtJS2.1教程-1]HelloWorld
2009-01-02 14:16 2655ExtJS:一个很强大的ui库 创建一个漂亮的alert &q ... -
Ext Tree控件的使用
2008-12-21 19:35 19682树是一个我们日常用的组件,Ext给我们提供了一个非常好用的树控 ... -
ext的一些组件中常用的参数整理
2008-04-15 05:33 2513grid 中的render里的参数: value:当前单元格 ... -
Ext Docs(2.0) 本地化处理,已生成CHM文件了
2008-01-15 16:27 4293ext2 的chm文档 ajaxjs论坛上发现的 不敢独享~~ ...
相关推荐
「extjs入门教程-SSHMavenExtjs4MySQL实战开发」.docx
extjs demo; blog url:http://write.blog.csdn.net/postlist
ExtJS入门教程-超级详细-共36页 完整版 PDF,电子书方便阅读和分享。
1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy...
extjs-theme-bootstrap-master.zip
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
很强大的开发包,能做出和WINDOWS一样的操作界面
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
ExtJS快速入门--传智播客--蔡世友
extjs 2.1 中文文档\电子文档extjs 2.1 中文文档\电子文档
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
Extjs4---grid的修改、删除功能---结合struts2、hibernate
语言程序设计资料:ExtJs学习笔记-2积分.doc
Extjs4---combobox省市区三级联动+struts2
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ExtJS----HelloWorld程序源码
Extjs2.1源码%2B教程,对于想学习ExtJS的人来说是再好也不过了
EXTJS4 类似于bootstrap的主题
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分