extjs4_api文檔閱讀二mvc構(gòu)架上_W

1、一直想寫一些 extjs4 MVC 的東西，但由于自己的英文水平足夠媲美小學(xué) 5 年紀的學(xué)生，所以在找了一些比我強一點的網(wǎng)友+機器翻譯，總結(jié)出了以下這 篇文章。但個人強烈建議去看英文原版（點擊進入）?？赐瓯疚暮?，如有任何錯誤，歡迎來信或者留言指正(QQ:301109552)。 那么，我們開始吧！ 對于 extjs 來說，大客戶端程序一直很難寫，當(dāng)你為大客戶端程序添加更多的功能和項目的時候，項目的體積往往迅速增長。這樣的大客戶端程序很難組 織和維持 ，所以，extjs4 配備了一個新的應(yīng)用程序體系結(jié)構(gòu)，它能結(jié)構(gòu)化你的代碼，那就是 extjs4 MVC。 extjs4 MVC 有別于其他 MVC

2、架構(gòu)，extjs 有他自己定義：1、Model 是一個 Field 以及他的 Data 的集合，Modes 知道如何通過 Stores 來表示數(shù)據(jù)，以能用于網(wǎng)格和其他組件。模型的工作很像 extjs3 的記錄集（Recordclass），通常通過數(shù)據(jù)加載器（Stores）渲染至網(wǎng)格（grid）和其他組件上邊。 2、View：用以裝載任何類型的組件grid、tree 和 panel 等等。3、Controller用來放使得 app 工作的代碼，例如 render views , instantiating Models 或者其他應(yīng)用邏輯。 本篇文章，我們將創(chuàng)建一個非常簡單的應(yīng)用程序，即用戶數(shù)據(jù)管

3、理，最后，你就會知道如何利用 extjs4 MVC 去創(chuàng)建簡單應(yīng)用程序。extjs4 MVC 應(yīng)用程序 架構(gòu)提供應(yīng)用程序的結(jié)構(gòu)性和一致性。這樣的模式帶來了一些重要的好處： 1、 每個應(yīng)用程序的工作方式相同，我們只需要學(xué)習(xí)一次。 2、 應(yīng)用程序之間的代碼共享很容易，應(yīng)為他們所有的工作方式都相同 3、 你可以使用 extjs 提供的構(gòu)建工具創(chuàng)建你應(yīng)用程序的優(yōu)化版本。既然是介紹 Extjs4 MVC，那么，我們開始創(chuàng)建這個應(yīng)用。一、文件結(jié)構(gòu)（ File Structure）：Extjs4 MVC 的應(yīng)用程序和別的應(yīng)用程序一樣都遵循一個統(tǒng)一的目錄結(jié)構(gòu)。在 MVC 布局中，所有的類放在應(yīng)用程序文件夾，它

4、的子文件夾中包含您的命 名空間，模型，視圖，控制器和存儲器。下面來通過簡單的例子來看下怎樣應(yīng)用。 在這個例子中，我們將整個應(yīng)用程序放到一個名為”account_manager”的文件夾下，”account_manager”文件夾中的結(jié)構(gòu)如上圖?，F(xiàn)在編輯 index.html，內(nèi)容 如下： ..2.Account Manager二、創(chuàng)建 app.js 文件。 所有 Extjs4 MVC 應(yīng)用從 Ext.application 的一個實例開始，應(yīng)用程序中應(yīng)包含全局設(shè)置、以及應(yīng)用程序所使用的模型(model)，視圖（view）和控 制器 （control

5、lers），一個應(yīng)用程序還應(yīng)該包含一個發(fā)射功能(launch function)。 現(xiàn)在來創(chuàng)建一個簡單的賬戶管理應(yīng)用。首先，需要選擇一個命名空間（所有 extjs4 應(yīng)用應(yīng)該使用一個單一的全局變來來作為命名空間）。暫時，使用”AM”來作為命名空間。 ..8.Ext.application(name: AM,appFolder: app,launch: function() Ext.create(Ext.container.Viewport,layout: fit, items: xtype: panel, tit

6、le: Users,html : List of users will go here);以上代碼，做了如下幾件事。首先，調(diào)用 Ext.application 創(chuàng)建一個應(yīng)用程序類的實 例，設(shè)置了一個”AM”的命名空間，他將作為整個應(yīng)用的全局變量，也將作為 Ext.Loader 的命名空間，然后通過 appFolder 來指定配置選項設(shè) 置相應(yīng)的路徑。最后，創(chuàng)建了一個簡單的發(fā)射功能，這里僅僅創(chuàng)建了一個 Viewport， 其中包含一個 panel，使其充滿整個窗口。 三、定義一個控制器 控制器是整個應(yīng)用程序的關(guān)鍵，他負責(zé)，并對某些時間做出相應(yīng)的動作?，F(xiàn)在我們創(chuàng)建一個控制器，將其命名為 Users

7、.js，其路徑是 app/controller/Users.js。然后，我們?yōu)?Users.js 添加如下代碼： .5.6.7.Ext.define(AM.controller.Users, extend: Ext.app.Controller,init: function() console.log(Initialized Users! This happens before the Application launch function is called););完成之后，我們將創(chuàng)建好的控制器添加到程序配置文件：app.js 中： ..9.Ext.

8、application(.controllers: Users,.);當(dāng)我們訪問 index.html 時，用戶控制器(Users.js)自動加載，因為我們在上面的 app.js 中的定義中指定了。Init 函數(shù)一個最 棒的地方是控制器與視圖的交互， 這里的交互是指控制功能，因為他很容易就可以到視圖類的處理函數(shù)，并采取相應(yīng)的措施，并及時渲染相關(guān)信息到面板上 來。 編寫 Users.js：.5.Ext.define(AM.controller.Users, extend: Ext.app.Controller,init: function() this.control(6.7.8.

9、5.viewport panel: render: this.onPanelRendered);,onPanelRendered: function() console.log(The panel was rendered);在 Users.js 中，init 函數(shù)使用 this.control 來負責(zé)，由于使用了新的 ComponentQuery 引擎，所以可以快速方便的找到頁面上組件的引用(viewport panel),這有些類似 CSS 選擇器，通過匹配，快速的找到相匹配的組件。 在上面的 init 函數(shù)中，我們使用 viewport panel，來

10、找到 app.js 中 Viewport 下的 panel 組件，然后，我們提供了一個對象的處理函數(shù)(this. onPanelRendered， 注意，這里的對象是 this，他的處理函數(shù)是 onPanelRendered)。整個效果是，只要符合觸發(fā) render當(dāng)運行我們的應(yīng)用程序，我們將看到以下內(nèi)容。 的任何組件，那么 onPanelRendered 函數(shù)將被調(diào)用。四、定義一個視圖 到目前為止，應(yīng)用程序只有幾行，也只有兩個文件,app.js 和 app/controller /Users.js?，F(xiàn)在我們來增加一個 grid,來顯示整個系統(tǒng)中的所有用戶。作為視圖組件的一個子類，我們創(chuàng)建一個

11、新的文件，并把他放到 app /view/user 目錄下。命名為 List.js。整個路徑是這樣的。app/view/user/List.js，下面，我們寫 List.js的代 碼： .5.Ext.define(AM.view.user.List , extend: Ext.grid.Panel,alias : widget.userlist, title : All Users,initComponent: function() .6.17.18.this.store = fields: name, email, data

12、: name: Ed,email: ,name: Tommy, email: ;this.columns = header: Name, dataIndex: name, flex: 1,header: Email, dataIndex: email, flex: 1;this.callParent(arguments););我們創(chuàng)建好的這個類，只是一個非常普通的類，并沒有任何意義，為了能讓我們更好的使用這個定義好的類，所以我們使用 alias 來定義一個別名，這個 時候，我們的類可以使用 Ext.create()和 Ext.widget(

13、)創(chuàng)建，在其他組件的子組件中，也可以使用 xtype 來創(chuàng)建。 .5.6.7.Ext.define(AM.controller.Users, extend: Ext.app.Controller, views: user.List,init: .onPanelRendered: .);修改 Users.js,增加 views 屬性，修改 app.js 中的 launch 方法，將 List 渲染到 Viewport。 ..9.Ext.application(.launch: function() Ext.create(Ext.container.Viewport, layout: fit, items: xtype: userlist););看到這里，也許會有人開始抓狂了，這個 user.List 到底是怎么來的，為什么要這樣寫？如果你開始感到疑惑，那么