Google
技术积累 订阅所有技术积累的日志

轻松掌握ExtJs系列教程二：使用Ext.Button组件

作者:GDNPC 日期:2009-05-24

字体大小: 小 中 大

本章介绍如何使用Ext.Button组件。如果大家使用IE的话建议安装IE Developer Toolbar，这样就能实时看到ext究竟生成了什么代码。不安装也可以，ext本身也自带了类似功能，下面例子就启用了debug功能。

效果如下图：

 

XML/HTML代码
  1. <html>  
  2. <head>  
  3.     <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />  
  4.     <script type="text/javascript" src="adapter/jquery/jquery.js"></script>  
  5.     <script type="text/javascript" src="adapter/jquery/ext-jquery-adapter.js"></script>  
  6.     <script type="text/javascript" src="ext-all-debug.js"></script>  
  7.     <script type="text/javascript">  
  8.     Ext.onReady(function(){   
  9.             Ext.QuickTips.init();   
  10.             var btn = new Ext.Button({   
  11.                 text:"hello button!",   
  12.                 allowDepress: true, //显示按钮按下效果，需要和enableToggle联合使用   
  13.                 enableToggle: true,  //为按钮添加开关效果   
  14.                 disabled: false, //是否禁用   
  15.                 hidden: false, //是否隐藏   
  16.                 hideMode: "display", //隐藏模式，默认是display，也可以使用visibility或offsets(visibility和display的区别是前者隐藏但保留位置，后者隐藏而不保留位置，后续元素会自动补位)   
  17.                 hideParent: false, //是否隐藏parent组件，例如一个button在一个div上，如果在隐藏button同时需要隐藏div，这个属性应该设为true   
  18.                 disabledClass: '', //按钮禁用时所使用的样式，默认是:x-item-disabled   
  19.                 id:"a", //就是id了，不给的话ext会自动赋值   
  20.                 menu:[   
  21.                     {text:"menu1",handler: function(){Ext.Msg.alert("menuinfo","this is menu1!");}},   
  22.                     {text:"menu2"},   
  23.                     {text:"menu3"}   
  24.                         ],   
  25.                 listeners: {//添加监听事件，如果有多个事件就要使用它，格式如下，用逗号分割。如果是click事件默认优先交给handler处理。   
  26.                     //"mouseover":function(){   
  27.                     //      Ext.Msg.alert('info','this is listeners!');   
  28.                     //}   
  29.                 },   
  30.                 tooltip: "gaga", //tooltip内容   
  31.                 tooltipType: "qtip", //tooltip类型，默认使用qtip，但使用前必须先初始化，留意第一行js。也可以使用title。   
  32.                 toggleGroup: "grouname",//给一组按钮添加开关效果，类似radio的效果，大家自己测试。   
  33.                 type: "button", //默认button，可以设为submit或reset。   
  34.                 renderTo: Ext.getBody()//指定显示容器，这里设为body，也可以设为某个div，使用容器id作为标示。   
  35.                 //handler: function(){Ext.Msg.alert('info','this is handler!')}   
  36.             });    
  37.                
  38.             function test(){   
  39.                 Ext.Msg.alert('onevent', 'this is test function!');   
  40.             }   
  41.                
  42.             //以下是两个比较重要的方法，大家自行测试   
  43.             //on用于添加instener   
  44.             btn.on("mouseover", test);   
  45.             //un用于删除listener   
  46.             btn.un("mouseover", test);   
  47.   
  48.                
  49.             //以下是常用事件   
  50.             //beforedestroy : ( Ext.Component this )    
  51.             //beforehide : ( Ext.Component this )    
  52.             //beforerender : ( Ext.Component this )    
  53.             //beforeshow : ( Ext.Component this )    
  54.             //beforestaterestore : ( Ext.Component this, Object state )    
  55.             //beforestatesave : ( Ext.Component this, Object state )    
  56.             //click : ( Button this, EventObject e )    
  57.             //destroy : ( Ext.Component this )    
  58.             //disable : ( Ext.Component this )    
  59.             //enable : ( Ext.Component this )    
  60.             //hide : ( Ext.Component this )    
  61.             //menuhide : ( Button this, Menu menu )    
  62.             //menushow : ( Button this, Menu menu )    
  63.             //menutriggerout : ( Button this, Menu menu, EventObject e )    
  64.             //menutriggerover : ( Button this, Menu menu, EventObject e )    
  65.             //mouseout : ( Button this, Event e )    
  66.             //mouseover : ( Button this, Event e )    
  67.             //render : ( Ext.Component this )    
  68.             //show : ( Ext.Component this )    
  69.             //staterestore : ( Ext.Component this, Object state )    
  70.             //statesave : ( Ext.Component this, Object state )    
  71.             //toggle : ( Button this, Boolean pressed )    
  72.                
  73.             //以下是常用方法   
  74.             //addClass( string cls ) : void    
  75.             //addEvents( Object object ) : void    
  76.             //addListener( String eventName, Function handler, [Object scope], [Object options] ) : void    
  77.             //applyToMarkup( String/HTMLElement el ) : void    
  78.             //cloneConfig( Object overrides ) : Ext.Component    
  79.             //destroy() : void    
  80.             //disable() : Ext.Component    
  81.             //enable() : Ext.Component    
  82.             //findParentBy( Function fcn, [Object scope] ) : Array    
  83.             //findParentByType( String/Class xtype ) : Container    
  84.             //fireEvent( String eventName, Object... args ) : Boolean    
  85.             //focus() : void    
  86.             //getEl() : Ext.Element    
  87.             //getId() : String    
  88.             //getItemId() : String    
  89.             //getText() : String    
  90.             //getXType() : String    
  91.             //getXTypes() : String    
  92.             //hasListener( String eventName ) : Boolean    
  93.             //hasVisibleMenu() : Boolean    
  94.             //hide() : Ext.Component    
  95.             //hideMenu() : void    
  96.             //initComponent() : void    
  97.             //isVisible() : void    
  98.             //isXType( String xtype, [Boolean shallow] ) : void    
  99.             //on( String eventName, Function handler, [Object scope], [Object options] ) : void   
  100.             //purgeListeners() : void //删除所有事件监听   
  101.             //relayEvents( Object o, Array events ) : void    
  102.             //removeClass( string cls ) : void    
  103.             //removeListener( String eventName, Function handler, [Object scope] ) : void    
  104.             //render( [Element/HTMLElement/String container], [String/Number position] ) : void    
  105.             //resumeEvents() : void   //恢复所有事件监听   
  106.             //setDisabled( Boolean disabled ) : void    
  107.             //setHandler( Function handler, [Object scope] ) : void    
  108.             //setIconClass( String cls ) : void    
  109.             //setText( String text ) : void    
  110.             //setVisible( Boolean visible ) : Ext.Component    
  111.             //show() : Ext.Component    
  112.             //showMenu() : void    
  113.             //suspendEvents() : void  //取消所有事件监听，但handler继续有效   
  114.             //toggle( [Boolean state] ) : void    
  115.             //un( String eventName, Function handler, [Object scope] ) : void  //删除某个事件监听，使removeListener的缩写   
  116.     });   
  117.     </script>  
  118. </head>  
  119. <body>  
  120.     <a href="#" onclick="Ext.log('Hello from the Ext console.');return false;">debug</a> //启用debug窗口   
  121. </body>  
  122. </html>  

 



[本日志由 GDNPC 于 2009-05-24 11:00 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: extjs js javascript 技术
相关日志:
评论: 0 | 引用: 0 | 查看次数: 6605
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 关闭 | [img]标签 关闭