ExtJs学习笔记04

Component

在Ext中对常用的UI组件都进行了一系列的封装，而各个组件都具有一些相同的属性或者事件，这些相同的属性被封装起来成为Component类，每个UI组件都继承Component类，可见Ext在面向对象方面有很好的实现。

Button

对传统的Button，Submit，Reset进行封装，Button是继承于Component类，  Button可以直接使用父类中定义的构造方法和事件机制。

看一个简单的例子：

1. <script type="text/javascript">   
2.     Ext.onReady(function() {   
3.         new Ext.Button({   
4.             renderTo:Ext.getBody(),   
5.             text:"确定"  
6.         });   
7.     });   
8. </script>  

构造方法中涉及的参数：

• renderTo：将当前对象所生成的HTML对象放到指定的对象中，这个例子中就是把new 出来的Button对象放到页面的Body中
• Ext.getBody：Ext中封装Dom Element的Body对象，在document.body的基础上进行的封装，document.body = Ext.getBody.dom
• text：按钮上显示的文字

来看Button中的一些常用的构造参数、属性、方法和事件： 

再看一个例子：

1. <script type="text/javascript">   
2.     Ext.onReady(function() {   
3.         var _button = new Ext.Button({   
4.             renderTo:Ext.getBody(),   
5.             text:"确定",   
6.             minWidth:100,   
7.             handler:function() {   
8.                 alert("this Button be clicked!");   
9.             }   
10.         });   
11.            
12.         alert(_button.text);   
13.            
14.         _button.setText("Hello World");   
15.            
16.         alert(_button.text);   
17.            
18.     });   
19. </script>  

构造参数

• handler：指定一个函数句柄，在默认事件触发是调用，这里的默认事件是click
• listeners：在对象初始化之前，就将一系列事件定义的手段，在进行组件化编程时，非常有用
• 简单应用只有一个事件的时候只需要定义handler就可以了，如果响应的事件比较多需要定义listeners
• listeners的使用：

1. <script type="text/javascript">   
2.     Ext.onReady(function() {   
3.         var _button = new Ext.Button({   
4.             renderTo:Ext.getBody(),   
5.             text:"确定",   
6.             minWidth:100,   
7.                
8.             listeners:{   
9.                 "click":function() {   
10.                     alert("fired listeners property");   
11.                 }   
12.             }   
13.         });    
14.     });   
15. </script>  

• 另外一种订阅事件的方法 on ，在上一篇  事件  部分中已经介绍过，实际调用的是addListener()方法

 

1. Ext.onReady(function() {   
2.         var _button = new Ext.Button({   
3.             renderTo:Ext.getBody(),   
4.             text:"确定"  
5.         });   
6.            
7.         _button.on("click", function() {   
8.             alert("fired add listener event");   
9.     });  

属性

• minWidth：按钮的最小宽度，注意：这里是没有单位的，不能在数值后面加上px、em等单位
• text：和构造参数中的text不同，属性text是获得当前按钮上的名称，构造参数text是设置Button显示的文字，而且该属性是一个Read Only的属性，我们不能直接修改这个属性，像button.text = "test"，如果要更改text的值需要调用它的setText()方法。
•  

 方法

• setText：设置按钮上的名称

事件

• click：当点击按钮时触发

网络摘要！！！