EXT核心API详解(十四)_Ext.Button/Ext.SplitButton/Ext.CycleButton

最新推荐文章于 2023-03-13 22:19:00 发布

原创最新推荐文章于 2023-03-13 22:19:00 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #活动 #HTML #XHTML

extjs 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了ExtJS中的三种按钮组件：Ext.Button、Ext.SplitButton及Ext.CycleButton。包括它们的属性、方法、事件及使用示例。通过本文，读者可以了解到如何创建具有不同功能的按钮，例如带有下拉菜单的按钮和可在多个状态间切换的按钮。

[size=small][color=red][b]Ext.Button[/b][/color]
简单的按钮类
[color=red]公有属性:[/color]
[b]disabled : Boolean[/b]
允许?
[b]hidden : Boolean[/b]
隐藏?
[b]pressed : Boolean[/b]
按下?
[color=red]方法 [/color][继承来的忽略]
[b]Button( Object config )[/b]
构造可选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对象,这些对象[color=red]同一时间内将只有一个处于按下状态[/color]
tooltip : String/Object, //提示信息,可以是一个字符串或QuickTips的配置对象
tooltipType : String, //可选值"qtip"(默认)或"title"之一
type : String //可选值"submit"/"reset"/"button"(默认)之一
}
[b]focus() : void[/b]
//得到焦点
[b]getText() : String[/b]
//取得文本
[b]hasVisibleMenu() : Boolean[/b]
//有可视的菜单?
[b]hideMenu() : void[/b]
//隐藏菜单
[b]initComponent() : void[/b]
//初始化容器
[b]setHandler( Function handler, [Object scope] ) : void[/b]
//设置事件处理方法
[b]setText( String text ) : void[/b]
//设置文本
[b]showMenu() : void[/b]
//显示菜单
[b]toggle( [Boolean state] ) : void[/b]
//切换按下状态
[color=red]示例:[/color]
<!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" >
<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>

[color=red][b]Ext.SplitButton[/b][/color]
上例中的带菜单按钮还不专业,于是有了Ext.SplitButton,专门为带[color=red]有下拉菜单的按钮[/color]设计的
[color=red]方法:[/color]
[b]SplitButton( Object config )[/b]
构造,config中加入了{
arrowHandler : Function,
arrowTooltip : String
}
[b]setArrowHandler( Function handler, [Object scope] ) : void[/b]
设置下拉箭头的点击事件
[color=red]事件:[/color]
[b]arrowclick : ( MenuButton this, EventObject e )[/b]
[color=red]使用示例:[/color]
比如上例中的菜单按钮可以改为
function onItemCheck(item){
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'
});

[color=red][b]Ext.CycleButton[/b][/color]
这是一个SplitButton的实用子类,[color=red]用于在多个item之间切换状态[/color],当然它也会带有menu可供选择,也可以直接点击按键在item之间切换
[color=red]方法:[/color]
CycleButton( Object config )
构造,config新增配置项{
changeHandler : Function, //状态切换时的处理事件
items : Array, //items应该是menu item的数组
prependText : String, //前导text
showText : Boolean, //追加item的text到按钮显示
}
[b]getActiveItem() : Ext.menu.CheckItem
setActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void[/b]
得到/设置活动选项
[b]toggleSelected() : void[/b]
切换选择项,相当于点击一次按钮
[color=red]示例[/color]
new Ext.CycleButton({
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);
}
});[/size]