第二章 熟悉Extjs API (入门教程)

第二章 熟悉Extjs API (入门教程)

 

我们使用第一章的Window例子进行API讲解。

 

我们要为第一章的Window做以下修改：

1：设置其属性，使得Window有遮蔽效果和使得Window不可拖动。

2：使用方法改变Windows的标题。

3：使用事件达到事件触发时进行操作。

 

 

首先我们打开Extjs的API文档(.chm格式的API在网上有下载，Extjs压缩包里面也有API)

API： http://www.extjs.com/deploy/dev/docs/

 

Extjs API 里面每个组件无非就是属性(包含只读属性)、方法、事件。

我们在API里面找到Ext.Window，如图：

         

一，接下来我们就开始实现上面的第1点修改(设置其属性，使得Window有遮蔽效果和使得Window不可拖动)。

代码：

Js代码  

1. modal ： true  

  modal设置为true，Window就会实现遮蔽效果(建议看英文API，毕竟看几个单词就大概知道什么意思，如果看中文API可能要看长长的一段，如果遇到不认识的单词就用翻译软件吧！)。

 

2：

     

代码：

Js代码  

1. draggable ： false  

 draggable设置为false，Window就不可用鼠标拖动了(默认为true，可以拖动)。

 

二,使用方法改变Window的标题。

  

代码：

Js代码  

1. win.setTitle('标题被改变了！');  

 只要 对象.方法 就可以调用方法。

 

三，使用事件达到事件触发时进行操作。

我们可以到Ext.Window的Public Events处查看事件，如：

 

事件侦听的代码：

Js代码  

1. // 可以使用listeners属性也可以使用on方法  
2.   
3. listeners : {  
4.        show ： function(win){  
5.               win.setTitle('win显示的时候改变了Title');  
6.       }  
7. }  
8.   
9. // or  
10.   
11. win.on({  
12.       show： function(win){  
13.               win.setTitle('win显示的时候改变了Title');  
14.       }  
15. });  

 

 

完整的代码：

 

Js代码  

1. Ext.onReady(function(){  
2.     var win = new Ext.Window({  
3.         title : "Ext.Window",  
4.         resizable : false,  
5.         width : 350,  
6.         height : 300,  
7.         html : "Hi, my name is Ext.Window!",  
8.         buttonAlign : "center",  
9.         buttons : [{text:"setTitle",handler:changeTitle},{text:"close"}]  
10.     });           
11.               
12.     function changeTitle(){  
13.         win.setTitle('标题被改变了！');  
14.     }  
15.               
16.     win.on({  
17.               show : function(win){  
18.            win.setTitle('win显示的时候改变了Title');  
19.               }       
20.     });  
21.               
22.     win.show();  
23. });