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配置的屬性值
示例:
Ext.widgets-Button,SplitButton,CycleButton 
Ext.widgets-Button,SplitButton,CycleButton var action = new Ext.Action(...{
Ext.widgets-Button,SplitButton,CycleButton text: 'Do something',
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton handler: function()...{
Ext.widgets-Button,SplitButton,CycleButton Ext.Msg.alert('Click', 'You did something.');
Ext.widgets-Button,SplitButton,CycleButton },
Ext.widgets-Button,SplitButton,CycleButton iconCls: 'do-something'
Ext.widgets-Button,SplitButton,CycleButton });
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton var panel = new Ext.Panel(...{
Ext.widgets-Button,SplitButton,CycleButton title: 'Actions',
Ext.widgets-Button,SplitButton,CycleButton width:500,
Ext.widgets-Button,SplitButton,CycleButton height:300,
Ext.widgets-Button,SplitButton,CycleButton tbar: [
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton //将action做為一個菜單按鈕添加到工具欄
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton action, ...{
Ext.widgets-Button,SplitButton,CycleButton text: 'Action Menu',
Ext.widgets-Button,SplitButton,CycleButton //将action做為文本選擇項添加到menu
Ext.widgets-Button,SplitButton,CycleButton menu: [action]
Ext.widgets-Button,SplitButton,CycleButton }
Ext.widgets-Button,SplitButton,CycleButton ],
Ext.widgets-Button,SplitButton,CycleButton items: [
Ext.widgets-Button,SplitButton,CycleButton //由action構造button,添加到panel
Ext.widgets-Button,SplitButton,CycleButton new Ext.Button(action)
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton renderTo: Ext.getBody()
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton // 如果這兒setText.當然button/menu/toolbar中的action文本都變了
Ext.widgets-Button,SplitButton,CycleButton 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
//設定事件處理方法
//設定文本
showMenu() : void
//顯示菜單
toggle( [Boolean state] ) : void
//切換按下狀态
Ext.widgets-Button,SplitButton,CycleButton <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ext.widgets-Button,SplitButton,CycleButton <html xmlns="http://www.w3.org/1999/xhtml" >
Ext.widgets-Button,SplitButton,CycleButton <head>
Ext.widgets-Button,SplitButton,CycleButton <title>Untitled Page</title>
Ext.widgets-Button,SplitButton,CycleButton <link rel="stylesheet" rev="stylesheet" href="/css/ext-all.css" type="text/css" media="all" />
Ext.widgets-Button,SplitButton,CycleButton <script type="text/javascript" src="/scripts/adapter/ext/ext-base.js"></script>
Ext.widgets-Button,SplitButton,CycleButton <script type="text/javascript" src="/scripts/ext-all.js"></script>
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton <style type="text/css">...
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton /**//*--加入樣式背景好直覺一點*/
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton .x-btn-pressed button{...}{
Ext.widgets-Button,SplitButton,CycleButton background-color:red;
Ext.widgets-Button,SplitButton,CycleButton }
Ext.widgets-Button,SplitButton,CycleButton </style>
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton <script type="text/javascript">...
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.onReady(function()...{
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton //有菜單的按鈕
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton function onItemCheck(item)...{
Ext.widgets-Button,SplitButton,CycleButton Ext.MessageBox.alert("點選事件",String.format("您選擇了{0}",item.text));
Ext.widgets-Button,SplitButton,CycleButton }
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton var menu = new Ext.menu.Menu(...{
Ext.widgets-Button,SplitButton,CycleButton id: 'mainMenu',
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton ...{
Ext.widgets-Button,SplitButton,CycleButton text: 'menu1',
Ext.widgets-Button,SplitButton,CycleButton handler: onItemCheck
Ext.widgets-Button,SplitButton,CycleButton },
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton text: 'menu2',
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton }]
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton var button=new Ext.Button(...{
Ext.widgets-Button,SplitButton,CycleButton renderTo:Ext.getBody(),
Ext.widgets-Button,SplitButton,CycleButton text:'按我',
Ext.widgets-Button,SplitButton,CycleButton menu:'mainMenu'
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton //有狀态的探鈕
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton new Ext.Button(...{
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton text:'toggle button ',
Ext.widgets-Button,SplitButton,CycleButton enableToggle:true
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton //分組的有狀态按鈕
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton text:'toggle button 1',
Ext.widgets-Button,SplitButton,CycleButton enableToggle:true,
Ext.widgets-Button,SplitButton,CycleButton toggleGroup:'toggleGroup',
Ext.widgets-Button,SplitButton,CycleButton handler: onItemCheck
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton text:'toggle button 2',
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton });
Ext.widgets-Button,SplitButton,CycleButton </script>
Ext.widgets-Button,SplitButton,CycleButton </head>
Ext.widgets-Button,SplitButton,CycleButton <body>
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton </body>
Ext.widgets-Button,SplitButton,CycleButton </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.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton function onItemCheck(item)...{
Ext.widgets-Button,SplitButton,CycleButton Ext.MessageBox.alert("點選事件",String.format("您選擇了{0}",item.text));
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton function showMenu(obj)...{
Ext.widgets-Button,SplitButton,CycleButton Ext.MessageBox.alert("點選下拉",obj.getXTypes() )
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.QuickTips.init();
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton var button=new Ext.SplitButton(...{
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton arrowHandler : showMenu,
Ext.widgets-Button,SplitButton,CycleButton handler: onItemCheck,
Ext.widgets-Button,SplitButton,CycleButton arrowTooltip : "更多",
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton 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
切換選擇項,相當于點選一次按鈕
示例
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton new Ext.CycleButton(...{
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton showText: true,
Ext.widgets-Button,SplitButton,CycleButton prependText: 'View as ',
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton items: [...{
Ext.widgets-Button,SplitButton,CycleButton text:'text only',
Ext.widgets-Button,SplitButton,CycleButton iconCls:'view-text',
Ext.widgets-Button,SplitButton,CycleButton checked:true
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton },...{
Ext.widgets-Button,SplitButton,CycleButton text:'HTML',
Ext.widgets-Button,SplitButton,CycleButton iconCls:'view-html'
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton ...{
Ext.widgets-Button,SplitButton,CycleButton text:'XML',
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton changeHandler:function(btn, item)...{
Ext.widgets-Button,SplitButton,CycleButton Ext.MessageBox.alert('Change View', item.text);
Ext.widgets-Button,SplitButton,CycleButton Ext.widgets-Button,SplitButton,CycleButton 新增事件
change : ( Ext.CycleButton this, Ext.menu.CheckItem item )
Button還有兩個子類,Ext.Toolbar.button,Ext.Toolbar.SplitButton,用法和Ext.buttom/Ext.SplitButton一樣,隻是它們僅适用于工具欄
