第二章 熟悉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. });  

                                                      

                                                       


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值