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


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

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 阅读(...) 评论(...) 编辑 收藏