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

轻松掌握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.                 tooltipType: "qtip", //tooltip类型，默认使用qtip，但使用前必须先初始化，留意第一行js。也可以使用title。   
  22.                 toggleGroup: "grouname",//给一组按钮添加开关效果，类似radio的效果，大家自己测试。   
  23.                 type: "button", //默认button，可以设为submit或reset。   
  24.                 renderTo: Ext.getBody()//指定显示容器，这里设为body，也可以设为某个div，使用容器id作为标示。   
  25.                 //handler: function(){Ext.Msg.alert('info','this is handler!')}   
  26.             });    
  27.                
  28.             function test(){   
  29.                 Ext.Msg.alert('onevent', 'this is test function!');   
  30.             }   
  31.                
  32.             //以下是两个比较重要的方法，大家自行测试   
  33.             //on用于添加instener   
  34.             btn.on("mouseover", test);   
  35.             //un用于删除listener   
  36.             btn.un("mouseover", test);   
  37.   
  38.                
  39.             //以下是常用事件   
  40.             //beforedestroy : ( Ext.Component this )    
  41.             //beforehide : ( Ext.Component this )    
  42.             //beforerender : ( Ext.Component this )    
  43.             //beforeshow : ( Ext.Component this )    
  44.             //beforestaterestore : ( Ext.Component this, Object state )    
  45.             //beforestatesave : ( Ext.Component this, Object state )    
  46.             //click : ( Button this, EventObject e )    
  47.             //destroy : ( Ext.Component this )    
  48.             //disable : ( Ext.Component this )    
  49.             //enable : ( Ext.Component this )    
  50.             //hide : ( Ext.Component this )    
  51.             //menuhide : ( Button this, Menu menu )    
  52.             //menushow : ( Button this, Menu menu )    
  53.             //menutriggerout : ( Button this, Menu menu, EventObject e )    
  54.             //menutriggerover : ( Button this, Menu menu, EventObject e )    
  55.             //mouseout : ( Button this, Event e )    
  56.             //mouseover : ( Button this, Event e )    
  57.             //render : ( Ext.Component this )    
  58.             //show : ( Ext.Component this )    
  59.             //staterestore : ( Ext.Component this, Object state )    
  60.             //statesave : ( Ext.Component this, Object state )    
  61.             //toggle : ( Button this, Boolean pressed )    
  62.                
  63.             //以下是常用方法   
  64.             //addClass( string cls ) : void    
  65.             //addEvents( Object object ) : void    
  66.             //addListener( String eventName, Function handler, [Object scope], [Object options] ) : void    
  67.             //applyToMarkup( String/HTMLElement el ) : void    
  68.             //cloneConfig( Object overrides ) : Ext.Component    
  69.             //destroy() : void    
  70.             //disable() : Ext.Component    
  71.             //enable() : Ext.Component    
  72.             //findParentBy( Function fcn, [Object scope] ) : Array    
  73.             //findParentByType( String/Class xtype ) : Container    
  74.             //fireEvent( String eventName, Object... args ) : Boolean    
  75.             //focus() : void    
  76.             //getEl() : Ext.Element    
  77.             //getId() : String    
  78.             //getItemId() : String    
  79.             //getText() : String    
  80.             //getXType() : String    
  81.             //getXTypes() : String    
  82.             //hasListener( String eventName ) : Boolean    
  83.             //hasVisibleMenu() : Boolean    
  84.             //hide() : Ext.Component    
  85.             //hideMenu() : void    
  86.             //initComponent() : void    
  87.             //isVisible() : void    
  88.             //isXType( String xtype, [Boolean&li>
  89.     <a href="#" onclick="Ext.log('Hello from the Ext console.');return false;">debug</a> //启用debug窗口   
  90. </body>  
  91. </html>  

 



[本日志由 GDNPC 于 2009-05-24 11:00 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: extjs js javascript 技术
相关日志:

评论: 0 | 引用: 0 | 查看次数: 4371
发表评论
昵　称:
密　码: 游客发言不需要密码.
验证码: ?落知多少
内　容:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 关闭 | [img]标签 关闭