Extjs系列篇（2）—-初步瞭解

咱們接着前一章進行學習，前面咱們介紹瞭如何去搭建一個Extjs的環境，而且實現了學習每一個語言都最早學習的HelloWorld這樣一個小程序。

在學習Extjs的語法以前咱們應該對js有必定的瞭解，不然不少地方都不太可以理解。

 1、用原始的方式來建立一個window

1 var win = new Ext.window.Window({
2             width : 400,
3             height: 300,
4             title:'flyknows'
5         });
6 win.show();

這裏咱們經過new的方式去建立了一個Extjs的windows對象,而且給了幾個屬性。這些屬性咱們均可以再Extjs的api文檔中查閱到。而後經過show()這個方法將窗體顯示出來。

2、Extjs4.0經過create方法去建立窗體

 

1 var win = Ext.create('Ext.window.Window',{
2             width : 400,
3             height: 300,
4             title:'flyknows'
5         });
6 win.show();

這也是Extjs4.0推薦咱們建立對象所用的一種方式。第一個參數是建立對象的類型，第二個參數是用json格式的表示的屬性。這樣也能夠建立出一個窗體對象。

3、Extjs基本事件機制

 

咱們實現一個點擊按鈕而後彈出窗體的事件，首先在頁面建立一個button：

1 <button id="mybutton">click</button>

而後再來寫它的觸發事件：

1 Ext.get('mybutton').on("click",function(){
2     win.show();
3 });

4、經過define自定義類而且集成（extend）window

 1 Ext.define("myWin",{
 2             extend : 'Ext.window.Window',
 3             width:400,
 4             height: 300,
 5             title:'flyknows',
 6             newtitle:'new flyknows',
 7             mySeyTitle:function(){
 8                 this.title = this.newtitle;
 9             },
10             initComponent:function(){
11                 this.mySeyTitle();
12                 this.callParent(arguments);
13             }
14 });

這種方式就至關於與自定義一個類，而後能夠對它的屬性實現get、set方法，同時能夠初始化組件。調用這個組件的方式和以前同樣，能夠採用create的方式。

5、requires使用命名空間異步加載

 

在php中require的做用是將某個文件引入進來，在Extjs中實現的其實也是相似的功能，例如，咱們在程序運行時就加載全部的js文件，這樣頁面初始化的速度確定很慢，咱們何不在須要用到的時候自動對其進行異步加載。這樣也能夠緩解服務器的壓力，而且在咱們的頁面中也不須要加上script src這樣的代碼了。具體實現以下：

首先建立一個自定義的窗體在一個新的js文件中，命名myWin.js：

 1 Ext.define("lesson2.ux.myWin",{
 2             extend : 'Ext.window.Window',
 3             width:400,
 4             height: 300,
 5             config:{
 6                 price:500
 7             },
 8             title:'flyknows',
 9             newtitle:'new flyknows',
10             mySeyTitle:function(){
11                 this.title = this.newtitle;
12             },
13             initComponent:function(){
14                 this.mySeyTitle();
15                 this.callParent(arguments);
16             }
17 });

這裏的config中配置的屬性會自動的get和set

注意個人命名，而後在須要用到的js文件的前面進行配置：

1     Ext.Loader.setConfig({
2         enabled:true,
3         paths:{
4             myApp:'lesson2/ux'
5         }
6     });

這裏的path就須要與前面自定義窗體命名的前綴要一致，最後咱們將它建立出來：

1 Ext.get("mybutton").on("click",function(){
2 
3             //實例化
4             var win = Ext.create('lesson2.ux.myWin',{
5                 title : 'luoxiao',
6                 requires:["lesson2.ux.myWin"]
7             }).show();
8             alert(win.getPrice());
9 });

這裏create和requires命名須要與自定義窗體命名相同。這樣，咱們在頁面中能夠不用引入myWin.js這個文件,當須要進行create的時候再異步加載它。由於咱們將price配置在config中，所以咱們直接能夠調用它的getPrice()這個方法。

6、mixins

mixins的解釋是混入，其實它和extends有點相似，一個是將別人的方法拿給本身去用，一個是繼承與父類已有的方法，可是他們的區別在於extends只能繼承一個元素，而後mixins卻能夠混入多個元素的方法，這和java中的繼承和接口有點相像，extends只能繼承一個父類，可是卻能夠implements多個接口。

例如：

 1                 Ext.define("say",{
 2             cansay:function(){
 3                 alert("hello");
 4             }
 5         });
 6 
 7         Ext.define("sing",{
 8             sing:function(){
 9                 alert("sing");
10             }
11         });
12 
13         Ext.define('user',{
14             mixins:{
15                 say:'say',
16                 sing:'sing'
17             }
18         });
19 
20         var u = Ext.create("user",{});
21         u.cansay();
22         u.sing();

經過mixins這種方式，咱們將say和sing它們方法混入user這個類中，那麼建立出來的實例就能夠直接調用它們的方法。