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配置的属性值

示例:

var action = new Ext.Action({

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
//切换按下状态

示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Page</title>

/*--加入样式背景好直观一点*/

.x-btn-pressed button{

background-color:red;

}

</style>

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 )

使用示例:
比如上例中的菜单按钮可以改为

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'

});

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
切换选择项,相当于点击一次按钮

示例

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);

}

});

新增事件
arrowclick : ( MenuButton this, EventObject e )
change : ( Ext.CycleButton this, Ext.menu.CheckItem item )

Button还有两个子类,Ext.Toolbar.button,Ext.Toolbar.SplitButton,用法和Ext.buttom/Ext.SplitButton一样,只是它们仅适用于工具栏

posted @ 2008-05-23 21:18 meetrice 阅读(821) 评论(0) 编辑收藏举报

刷新页面返回顶部

Ext.widgets-Button,SplitButton,CycleButton

公告