ext 控件属性

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定义为
Javascript代码 复制代码

1. { 

 2. disabled : Boolean,//禁止使用 

 3. handler : Function,//事件句柄 

 4. hidden : Boolean,//隐藏 

 5. iconCls : String,//样式类 

 6. scope : Object, //handler将在哪个范围内执行 

 7. text : String //文本 

 8. }

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

示例:
Javascript代码 复制代码

1. function onItemCheck(item){ 

 2. Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text)); 

 3. } 

 4. function showMenu(obj){ 

 5. Ext.MessageBox.alert("点击下拉",obj.getXTypes() ) 

 6. }Ext.QuickTips.init(); 

 7. var button=new Ext.SplitButton({ 

 8. renderTo:Ext.getBody(), 

 9. arrowHandler : showMenu, 

 10. handler: onItemCheck, 

 11. arrowTooltip : "更多", 

 12. text:'按我', 

 13. menu:'mainMenu' 

 14. });

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.Button
简单的按钮类


公有属性:
disabled : Boolean
允许?
hidden : Boolean
隐藏?
pressed : Boolean
按下?

方法 [继承来的忽略]
Button( Object config )
构造可选config
Javascript代码 复制代码

1. { 

 2. clickEvent : String, //handler响应的事件,默认是click 

 3. cls : String, //样式 

 4. disabled : Boolean, //禁止 

 5. enableToggle : Boolean,//允许在按下没按下之间切换,添加移除x-btn-pressed样式类 

 6. handleMouseEvents : Boolean,//允许使用移入移出按下事件,默认是真 

 7. handler : Function, //响应clickEvent定义的事件 

 8. hidden : Boolean, //隐藏 

 9. icon : String, //图标文件地址,如果修改x-btn-text-icon样式类可以重定义默认icon 

 10. iconCls : String, //和icon功能类似,但使用设定了background-image属性的样式定义 

 11. menu : Mixed //如果需要,可以为按钮定义菜单 

 12. menuAlign : String, //菜单对齐方式,默认值是tl-bl 

 13. minWidth : Number, //最小宽度 

 14. pressed : Boolean, //是否按下 

 15. repeat : Boolean/Object,//是否需要重复定义鼠标按下事件,也可以是一个Ext.util.ClickRepeater配置对象 

 16. scope : Object, //handler事件的范围 

 17. tabIndex : Number, //table键顺序 

 18. text : String, //文本 

 19. toggleGroup : String, //如果定义一组enableToggle为真且toggleGroup值相同的button对象,这些对象同一时间内将只有一个处于按下状态 

 20. tooltip : String/Object, //提示信息,可以是一个字符串或QuickTips的配置对象 

 21. tooltipType : String, //可选值"qtip"(默认)或"title"之一 

 22. type : String //可选值"submit"/"reset"/"button"(默认)之一 

 23. }

{
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代码 复制代码

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

 2. <html xmlns="http://www.w3.org/1999/xhtml" > 

 3. <head> 

 4. <title>Untitled Page</title> 

 5. <link rel="stylesheet" rev="stylesheet" href="/css/ext-all.css" type="text/css" media="all" /> 

 6. <script. type="text/javascript" src="/scripts/adapter/ext/ext-base.js"></script> 

 7. <script. type="text/javascript" src="/scripts/ext-all.js"></script> 

 8. <style. type="text/css"> 

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

 10. .x-btn-pressed button{ 

 11. background-color:red; 

 12. } 

 13. </style> 

 14. <script. type="text/javascript"> 

 15. Ext.onReady(function(){ 

 16. 

 17. //有菜单的按钮 

 18. function onItemCheck(item){ 

 19. Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text)); 

 20. } 

 21. var menu = new Ext.menu.Menu({ 

 22. id: 'mainMenu', 

 23. items: [ 

 24. { 

 25. text: 'menu1', 

 26. handler: onItemCheck 

 27. }, 

 28. { 

 29. text: 'menu2', 

 30. handler: onItemCheck 

 31. }] 

 32. });var button=new Ext.Button({ 

 33. renderTo:Ext.getBody(), 

 34. text:'按我', 

 35. menu:'mainMenu' 

 36. });//有状态的探钮 

 37. new Ext.Button({ 

 38. renderTo:Ext.getBody(), 

 39. text:'toggle button ', 

 40. enableToggle:true 

 41. });//分组的有状态按钮 

 42. new Ext.Button({ 

 43. renderTo:Ext.getBody(), 

 44. text:'toggle button 1', 

 45. enableToggle:true, 

 46. toggleGroup:'toggleGroup', 

 47. handler: onItemCheck 

 48. }); 

 49. new Ext.Button({ 

 50. renderTo:Ext.getBody(), 

 51. text:'toggle button 2', 

 52. enableToggle:true, 

 53. toggleGroup:'toggleGroup', 

 54. handler: onItemCheck 

 55. }); }); 

 56. </script> 

 57. </head> 

 58. <body></body> 

 59. </html>

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


使用示例:
比如上例中的菜单按钮可以改为
Javascript代码 复制代码

1. function onItemCheck(item){ 

 2. Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text)); 

 3. } 

 4. function showMenu(obj){ 

 5. Ext.MessageBox.alert("点击下拉",obj.getXTypes() ) 

 6. } 

 7. 

 8. Ext.QuickTips.init(); 

 9. var button=new Ext.SplitButton({ 

 10. renderTo:Ext.getBody(), 

 11. arrowHandler : showMenu, 

 12. handler: onItemCheck, 

 13. arrowTooltip : "更多", 

 14. text:'按我', 

 15. menu:'mainMenu' 

 16. });

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新增配置项
Javascript代码 复制代码

1. { 

 2. changeHandler : Function, //状态切换时的处理事件 

 3. items : Array, //items应该是menu item的数组 

 4. prependText : String, //前导text 

 5. showText : Boolean, //追加item的text到按钮显示 

 6. }

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

示例
Javascript代码 复制代码

1. new Ext.CycleButton({ 

 2. renderTo:Ext.getBody(), 

 3. showText: true, 

 4. prependText: 'View as ', 

 5. items: [{ 

 6. text:'text only', 

 7. iconCls:'view-text', 

 8. checked:true 

 9. },{ 

 10. text:'HTML', 

 11. iconCls:'view-html' 

 12. },{ 

 13. text:'XML', 

 14. iconCls:'view-html' 

 15. } 

 16. ], 

 17. changeHandler:function(btn, item){ 

 18. Ext.MessageBox.alert('Change View', item.text); 

 19. } 

 20. });