Ext.widgets-Button,SplitButton,CycleButton
Ext.Action
action实现一个脱离了容器的事件,所有它可以在多个容器之间共享,不过好象只有Ext.Toolbar, Ext.Button 和 Ext.menu.Menu支持action接口:),因为容器要实现下面所有的方法setText(string), setIconCls(string), setDisabled(boolean), setVisible(boolean) and setHandler(function)
方法:
Action( Object config )
构造,config定义为{
disabled : Boolean,//禁止使用
handler : Function,//事件句柄
hidden : Boolean,//隐藏
iconCls : String,//样式类
scope : Object, //handler将在哪个范围内执行
text : String //文本
}
disable() : void
enable() : void
setDisabled( Boolean disabled ) : void
禁止/允许
each( Function fn, Object scope ) : void
为每个实现了此action的componet应用fn
hide() : void
show() : void
setHidden( Boolean hidden ) : void
显示/隐藏
setHandler( Function fn, Object scope ) : void
setIconClass( String cls ) : void
setText( String text ) : void
重新设置config配置的属性值
示例:
text: 'Do something',
handler: function()...{
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something'
});
var panel = new Ext.Panel(...{
title: 'Actions',
width:500,
height:300,
tbar: [
//将action做为一个菜单按钮添加到工具栏
action, ...{
text: 'Action Menu',
//将action做为文本选择项添加到menu
menu: [action]
}
],
items: [
//由action构造button,添加到panel
new Ext.Button(action)
],
renderTo: Ext.getBody()
});
// 如果这儿setText.当然button/menu/toolbar中的action文本都变了
action.setText('Something else');
Ext.Button
简单的按钮类
公有属性:
disabled : Boolean
允许?
hidden : Boolean
隐藏?
pressed : Boolean
按下?
方法 [继承来的忽略]
Button( Object config )
构造可选config{
clickEvent : String, //handler响应的事件,默认是click
cls : String, //样式
disabled : Boolean, //禁止
enableToggle : Boolean,//允许在按下没按下之间切换,添加移除x-btn-pressed样式类
handleMouseEvents : Boolean,//允许使用移入移出按下事件,默认是真
handler : Function, //响应clickEvent定义的事件
hidden : Boolean, //隐藏
icon : String, //图标文件地址,如果修改x-btn-text-icon样式类可以重定义默认icon
iconCls : String, //和icon功能类似,但使用设定了background-image属性的样式定义
menu : Mixed //如果需要,可以为按钮定义菜单
menuAlign : String, //菜单对齐方式,默认值是tl-bl
minWidth : Number, //最小宽度
pressed : Boolean, //是否按下
repeat : Boolean/Object,//是否需要重复定义鼠标按下事件,也可以是一个Ext.util.ClickRepeater配置对象
scope : Object, //handler事件的范围
tabIndex : Number, //table键顺序
text : String, //文本
toggleGroup : String, //如果定义一组enableToggle为真且toggleGroup值相同的button对象,这些对象同一时间内将只有一个处于按下状态
tooltip : String/Object, //提示信息,可以是一个字符串或QuickTips的配置对象
tooltipType : String, //可选值"qtip"(默认)或"title"之一
type : String //可选值"submit"/"reset"/"button"(默认)之一
}
focus() : void
//得到焦点
getText() : String
//取得文本
hasVisibleMenu() : Boolean
//有可视的菜单?
hideMenu() : void
//隐藏菜单
initComponent() : void
//初始化容器
setHandler( Function handler, [Object scope] ) : void
//设置事件处理方法
setText( String text ) : void
//设置文本
showMenu() : void
//显示菜单
toggle( [Boolean state] ) : void
//切换按下状态
示例:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" rev="stylesheet" href="/css/ext-all.css" type="text/css" media="all" />
<script type="text/javascript" src="/scripts/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/scripts/ext-all.js"></script>
<style type="text/css">...
/**//*--加入样式背景好直观一点*/
.x-btn-pressed button{...}{
background-color:red;
}
</style>
<script type="text/javascript">...
Ext.onReady(function()...{
//有菜单的按钮
function onItemCheck(item)...{
Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));
}
var menu = new Ext.menu.Menu(...{
id: 'mainMenu',
items: [
...{
text: 'menu1',
handler: onItemCheck
},
...{
text: 'menu2',
handler: onItemCheck
}]
});
var button=new Ext.Button(...{
renderTo:Ext.getBody(),
text:'按我',
menu:'mainMenu'
});
//有状态的探钮
new Ext.Button(...{
renderTo:Ext.getBody(),
text:'toggle button ',
enableToggle:true
});
//分组的有状态按钮
new Ext.Button(...{
renderTo:Ext.getBody(),
text:'toggle button 1',
enableToggle:true,
toggleGroup:'toggleGroup',
handler: onItemCheck
});
new Ext.Button(...{
renderTo:Ext.getBody(),
text:'toggle button 2',
enableToggle:true,
toggleGroup:'toggleGroup',
handler: onItemCheck
});
});
</script>
</head>
<body>
</body>
</html>
Ext.SplitButton
上例中的带菜单按钮还不专业,于是有了Ext.SplitButton,专门为带有下拉菜单的按钮设计的
方法:
SplitButton( Object config )
构造,config中加入了{
arrowHandler : Function,
arrowTooltip : String
}
setArrowHandler( Function handler, [Object scope] ) : void
设置下拉箭头的点击事件
事件:
arrowclick : ( MenuButton this, EventObject e )
使用示例:
比如上例中的菜单按钮可以改为
Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));
}
function showMenu(obj)...{
Ext.MessageBox.alert("点击下拉",obj.getXTypes() )
}
Ext.QuickTips.init();
var button=new Ext.SplitButton(...{
renderTo:Ext.getBody(),
arrowHandler : showMenu,
handler: onItemCheck,
arrowTooltip : "更多",
text:'按我',
menu:'mainMenu'
});
Ext.CycleButton
这是一个SplitButton的实用子类,用于在多个item之间切换状态,当然它也会带有menu可供选择,也可以直接点击按键在item之间切换
方法:
CycleButton( Object config )
构造,config新增配置项{
changeHandler : Function, //状态切换时的处理事件
items : Array, //items应该是menu item的数组
prependText : String, //前导text
showText : Boolean, //追加item的text到按钮显示
}
getActiveItem() : Ext.menu.CheckItem
setActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void
得到/设置活动选项
toggleSelected() : void
切换选择项,相当于点击一次按钮
示例
renderTo:Ext.getBody(),
showText: true,
prependText: 'View as ',
items: [...{
text:'text only',
iconCls:'view-text',
checked:true
},...{
text:'HTML',
iconCls:'view-html'
},
...{
text:'XML',
iconCls:'view-html'
}
],
changeHandler:function(btn, item)...{
Ext.MessageBox.alert('Change View', item.text);
}
});
新增事件
arrowclick : ( MenuButton this, EventObject e )
change : ( Ext.CycleButton this, Ext.menu.CheckItem item )
Button还有两个子类,Ext.Toolbar.button,Ext.Toolbar.SplitButton,用法和Ext.buttom/Ext.SplitButton一样,只是它们仅适用于工具栏
转载于:https://www.cnblogs.com/meetrice/archive/2008/05/23/1206060.html
Ext.widgets-Button,SplitButton,CycleButton相关推荐
- ext核心API详解
http://hi.baidu.com/j2me/profile 1 EXT核心API详解(一)-Ext 1 EXT核心API详解(二)-Array/Date/Function/Number/Stri ...
- 【原】基础篇:第一篇,本节主要向大家介绍Ext的最基础的话题
http://www.cnblogs.com/mogen_yin/archive/2009/04/30/1447236.html ExtJS是一个Ajax框架,是一个用javascript写的,用于在 ...
- Ext js 6 - Class System
Class System Overview 我们可以搭建测试代码, 不需要使用Sencha cmd <!DOCTYPE html> <html lang="en" ...
- ext.net 开发学习之FileUploadField与Image (四)
Asp.net 很强大,所以子承父业 Ext.net功能也很强大(只聊ext.net强大的一面) 之前做电子商务网站,后台有用过图片浏览并显示的效果.当时用的是ajax--因为ext.net已经封装 ...
- 【翻译】Ext JS 4.2介绍
原文:Introducing Ext JS 4.2 Ext JS 4.2包含了许多令人兴奋的增强功能和特性.你可能已经在之前的文章中阅读过相关的一些功能和特性了,如Grid组件改进.在这篇文章中,将介 ...
- EXT.NET复杂布局(四)——系统首页设计(下)
此篇为EXT.NET系列终结篇.希望此系列能够对大家有所帮助. 首页JS函数介绍 使然使用了Ext.NET,但是JavaScript的地位还是举足轻重的. 1.添加选项卡 1: var addTab ...
- ExtJs4 笔记 Ext.tab.Panel 选项卡
本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...
- Ext scope 学习
首先,用一句话来概括scope的作用:scope就是用来解决 js 中 this 的指向问题. 下面进行讨论: 1. 关于JavaScript中this的使用,这是一个由来已久的问题了.我们这里就不介 ...
- ext.net 开发学习之复杂模板板块 (叁)
一直 在纳闷 十一放假七天,另一个更重要的节日春节 为什么也只有七天!!!没休息够 就要奔向远方-- 言归正传,之前我们叁一直在捣鼓着ext.net.经过近两周的开发,大体完成了部分效果.现在和大家分 ...
最新文章
- 在GNS3中模拟交换机和PC
- java 读取webservice_java 调用webService的各种方法
- Excel VBA开发中数字签名的管理
- Android --- 解决 cannot connect to daemon at tcp:5037: cannot connect to 127.0.0.1:5037: 由于目标计算机积极拒绝,无
- shp2sde命令行方式向arcsde批量导入数据脚本的生成步骤
- CSS如何实现两个a标签元素的文字一个靠左一个靠右,并且能点击分别不同的链接
- vue 高德地图 不同区域显示不同颜色_高德百度哪家强?苹果Carplay第三方分屏功能评测...
- 二十五、MongoDB 索引 和 explain 的使用
- oracle 密码忘记 找回密码
- 赌博小游戏java开发_Java打飞机小游戏(附完整源码)
- 如何编制一份软件项目开发计划书
- 迭代阈值法 matlab,MATLAB快速迭代收缩阈值算法
- PS 金属质感文字制作
- java鼠标点击按钮事件_Java学习——GUI编程(鼠标单击按钮事件)
- 苹果cms10好看的模板自适应高端大气免费模板
- 【生信分析】基于TCGA肿瘤数据进行基因共表达网络分析
- 量化投资 | 统计套利策略
- 代码重复率检查工具jsinspect 检查重复代码,去掉冗余代码。
- 【历史上的今天】3 月 6 日:Unix 版权争夺战;豆瓣网上线;谷歌推出了 Google Play
- 爬虫:python如何获得天气数据
热门文章
- 企业网站SEO优化的四大原则
- java cmd copy_使用Java中的cmd复制文件的问题
- 某一列高度变化_高度近视,老了后会瞎吗?
- 乐观锁和悲观锁,可重入锁和不可重入锁(1)
- python chunk 方式读取大文件——本质上还是file read自身支持
- ECharts 图表导出
- 【css】报错,错误代码77,CURLE_SSL_CACERT_BADFILE (77)解决方法
- ES6 -Set 和 Map 数据结构
- 模拟客户端浏览器-1
- MySQL使用 IN 查询取出数据排序问题(与in排序相同、不排序)