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