Extjs4快速上手二——基礎知識(一)

原文 http://www.cnblogs.com/good-temper/archive/2013/04/02/2996544.html

首先聲明一下，在此介紹的內容多數來自“Extjs中文學習手冊”，這好像是一位前輩的博文整理，想快速全面學習Extjs4的可以看一下。

     1.1 下載Extjs4               ：http://extjs.org.cn/ （也可以去官方下），版本4.1.1     1.2 在項目中加入Extjs檔案                可以直接在項目的WebRoot檔案加下建立ext，將下載檔案加壓後全部放入，但是這樣往往會導致Myeclipse直接卡死，而且檔案大概有200多M，這對於一個小項目來說絕對是不可接受的。其實不必怕，有經驗的人都知道，包裡邊多數都是源碼、Demo和API文檔，真正需要引入項目的其實沒幾個。需引入的檔案如下：            　　1.3 Extjs布局　　　　fit布局：在Fit布局中，子項目將自動填滿整個父容器。注意：在fit布局下，對其子項目設定寬度是無效的。如果在fit布局中放置了多個組件，則只會顯示第一個子項目。　　　　border布局：border布局也稱邊界布局，他將頁面分隔為west,east,south,north,center這五個部分，我們需要在在其items中指定使用region參數為其子項目指定具體位置。我們的面主架構就採用這種布局方式。            注意：north和south部分只能設定高度（height），west和east部分只能設定寬度（width）。north south west east地區變大，center地區就變小了。　　　　　　參數 split:true 可以調整除了 center四個地區的大小。　　　　　　參數 collapsible:true 將啟用摺疊功能， title必須設定，因為摺疊按鈕是出現標題部分的。　　　　　　center 地區是必須使用的，而且 center 地區不允許摺疊。 Center地區會自動填滿其他地區的剩餘空間。尤其在 Extjs4.0 中，當指定布局為 border時，沒有指定 center 地區時，會出現報錯資訊。　　　　accordion布局：accordion布局也稱手風琴布局，在accordion布局下，在任何時間裡，只有一個面板處於啟用狀態。其中每個面邊都支援展開和摺疊。accordion布局：accordion布局也稱手風琴布局，在accordion布局下，在任何時間裡，只有一個面板處於啟用狀態。其中每個面邊都支援展開和摺疊。　　　　card布局：這種布局用來管理多個子組件，並且在任何時刻只能顯示一個子組件。這種布局最常用的情況是嚮導模式，也就是我們所說的分布提交。　　　　anchor布局：將使組件固定於父容器的某一個位置，使用anchor布局的子組件尺寸相對於容器的尺寸，即父容器容器的大小發生變化時，使用anchor布局的組件會根據規定的規則重新渲染位置和大小。 Absolute布局：繼承Ext.layout.container.Anchor 布局方式，並增加了X/Y配置選項對子組件進行定位，Absolute布局的目的是為了擴充布局的屬性，使得布局更容易使用。　　　　column布局：一般被稱為列布局，這種布局的目的是為了建立一個多列的格式。其中每列的寬度，可以為其指定一個百分比或者是一個固定的寬度。　　1.4 Extjs代碼相關　　　　Extjs的特點之一就是物件導向編程，這讓我們能夠像寫java代碼那樣編寫介面和前端的一些處理代碼。但是對於一個非專業的前端開發人員來說，去學習熟悉Ext那對類庫實在很費勁，所以我覺得我們這類路過黨（偶爾用用而已），只要知道一些基本的類就行了。　　　　　　(1).Extjs4的代碼是從一個Ext.application({})的方法開始的，這個相當於我們項目中的main函數。　　　　　　(2).和net一樣，Extjs4中也有命名空間的概念，而且命名結構通常和檔案結構一致，這點和java的包很相似。　　　　　　(3).Extjs本身提供錯誤處理機制和調試函數，但是我覺得作為業餘人士而言，一般還是不要用，只要運行正常，沒有異常拋出即可，而調試我覺的Chrome/Firefox+console.log()一般就能搞定。
　　　　　　(4)至於其他的可以去查看API文檔即可。　　　　下邊是一個Extjs TabPanel類的定義

Ext.define('sxpt.view.TabPanel',{ 　　　//類名    extend: 'Ext.tab.Panel', 　　　　　　//父類    initComponent : function(){ 　　　　//初始化方法        Ext.apply(this,{ 　　　　　　　　//Ext.apply(X1,X2),將對象X1拷貝至X2，這裡目的是見這個面板拷貝至‘content-panel’中作為首頁            id: 'content-panel',             region: 'center',              defaults: {             activeTab: 0,             border: false,             items: [{               id: 'HomePage',               title: '首頁',               iconCls:'home',              items:[                  {                    xtype: 'textfield',                      name: 'name',                    fieldLabel: '測試'                  }              ]            }]         });         this.callParent(arguments);     } }); 

　　　　可以結合資料瞭解一下這段代碼的大概意思，重點是熟悉Extjs4的編碼方式。

　　1.5 Extjs 資料定義、儲存　　　　Extjs裡邊有兩個很核心的對象：model模型類和store儲存類，前者我們可以理解為java的model類，定義了儲存資料的格式，後邊可以理解為一個執行個體化的model類集合，一般後台傳來的列表資料使用store儲存。下邊是一個例子：

model：Ext.define('sxpt.model.User', {     extend: 'Ext.data.Model',     fields:  ['loginid', 'name','role','email','grade']});store：Ext.define('sxpt.store.User',{    extend: 'Ext.data.Store',    requires: 'sxpt.model.User',     model: 'sxpt.model.User',　　　　　　　　　　     autoLoad: true,　　　　　　　　　　　　　　　　//是否自動載入，即是否自動向後台請求資料     pageSize:1,　　　　　　　　　　　　　　　　　　//設定分頁大小     proxy: {　　　　　　　　　　　　　　　　　　　　//這是請求代理,實現非同步想後台請求資料        type: 'ajax',        url: 'user_getstudent',        reader: {　　　　　　　　　　　　　　　　　　            type: 'json',            root: 'ls',             successProperty: 'success',            totalProperty: 'totalCount'        }    } });

　　1.6 Extjs 向後台請求資料 　　　　　　　Extjs本身是基於jquery的架構，所以其請求資料的方式與jquery一致，只不過很多時候用起來更簡單。需要明確一點的是Extjs使用json格式資料和後台互動，當然也可以使用xml格式，這個自行研究吧。　　　　Extjs向後台請求資料主要的方式就是Ext.Ajax.request，應該也有其他方法，但是目前就用過這一個（上邊store的proxy也是使用的這個），誰讓咱是業餘人士呢。看代碼：

          Ext.Ajax.request({                url: "連結", //Response.Write("[{username:'likeshan',age:20},{username:'liudehua',age:50}]");                params: { id: 1 },//傳遞參數到伺服器中                timeout: 60000,//佈建要求逾時時間                method: "POST",                success: function (response, operation) {                    Ext.Array.each(eval_r(response.responseText), function (item) {//注意eval裡面放的一定是js的可執行代碼，就是js認識的代碼，在這裡是數組這是可以認識的                        alert(item.username);                    });                },                failure: function (response, operation) {                    alert(response.responseText);                }            });

　　　　這裡需要特別提醒的是Extjs4大多數情況下採用非同步請求，也就是發起請求後外部也不知道他是麼時候請求完成，所以要注意想擷取請求後的資料只能在Ajax內部方法中訪問，如success、store的load方法等，當初我就在這點上栽了很大跟頭。　　　　那麼有時候我們希望能夠同步擷取資料該怎麼辦呢？只要將Ext.Ajax.request中的async設為false即可，可以看個例子：

var name;Ext.Ajax.request({    url:'common_login_userinfo',    method: 'post',    async :  false,//同步請求資料    success: function(result, request) {        name=Ext.JSON.decode(result.responseText).lui.role;        }});console.log(name);　　　　　　//如果不設定同步，這裡一般輸出是undefine（即null），為什麼說一般呢？都說過了是非同步請求，如果請求已經完成了，那就可能輸出正確的值（比如在　　　　　　　　　　　　　　　　　　上一步打個斷點暫停一會），當初我調試時發現都有值，但是控制台輸出卻是undefine，當時都快抓狂了。

　　今天就先寫發這裡吧，明天接著開始寫基礎二，重點介紹Extjs的MVC結構。　　呵呵，出去跑步，然後看看面試寶典，為找工作做準備，應屆生傷不起啊╭(╯^╰)╮。