Extjs是個不錯的js框架，在企業(yè)級開發(fā)中有著廣泛的應(yīng)用，但他的一個廣受詬病的缺點是太重。

幸運的是，從extjs 4開始引入了dynamic loading(動態(tài)加載)的特性，使得這一問題有稍微一些改善。

記得一年多前參與的一個管理系統(tǒng)使用了3.4版本的，現(xiàn)在因工作原因又需要使用extjs，需要重新學(xué)習(xí)一下。本系列文章將記錄extjs重新學(xué)習(xí)的整個過程，本來想基于django寫的，但是又轉(zhuǎn)型到.net開發(fā)了，所以本文將以mvc3為學(xué)習(xí)框架。

首先下載extjs 4.1，解壓后在iis或者其他web server中，將解壓后的目錄添加為一個站點

這樣在查看API和Example的時候就非常方便了。

1.了解extjs目錄內(nèi)容

? ? 解壓后的目錄中有很多內(nèi)容，達到一百多兆，當然我們開發(fā)中使用到的東西不會這么多。

? ? 首先是很多js文件，我們在開發(fā)中會經(jīng)常用到的4個：

? ? ext.js: 這是壓縮后的主文件，222 KB的內(nèi)容，這種方式是dynamic loading時使用的

? ? ext-debug.js: 這是ext.js的未壓縮代碼，509 KB的內(nèi)容，也是dynamic loading的

? ? ext-all.js: 這是傳統(tǒng)方式的代碼，所有內(nèi)容都放置在一個文件中，適合在初學(xué)的時候使用

? ? ext-all-debug.js： 同上，是可讀的代碼　

? ? 本系列使用的dynamic loading的方式，在調(diào)試過程中，使用ext-debug.js

　 然后是src和resources目錄，我們在開發(fā)的時候會經(jīng)常使用到這兩個目錄的內(nèi)容

2.開始使用extjs 4.1

? ? 準備工作做好了之后，我們就可以進入開發(fā)了。

? ? 首先我們需要一個頁面，初始化一些配置，隨后將下述代碼添入其中

? ??

<!-- 引入主css文件，extjs樣式 --><link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/resources/css/ext-all.css" /><!-- dynamic loading時使用的主js入口 --><script type="text/javascript" src="http://www.cnblogs.com/Scripts/Ext/ext.js"></script><script type="text/javascript">//使用extjs的loader功能，動態(tài)載入代碼 Ext.Loader.setConfig({enabled: true,//在項目中使用Ext為命名空間時，在如下路徑中尋找代碼 paths: {Ext: "http://www.cnblogs.com/Scripts/Ext/src" } }); </script>

? ? 隨后我們就可以在項目中自由的使用extjs的強大功能了。

? ? 筆者在加入extjs的resources目錄時，并沒有將整個目錄都復(fù)制過來，因為這可能會稍微增大項目的大小，如果你不在意這些冗余而且也懶得手動加入文件的話，就可以直接將整個resources目錄復(fù)制過來。

? ? 筆者采用的方式是（較繁瑣）：建立resources目錄，在建立子目錄css和themes,將ext-all.css拷入css目錄中

? ? 在使用extjs的過程中，使用chrome的控制臺查看哪些文件缺失，再將相應(yīng)的文件拷入。

? ? 至于src目錄，其中的代碼都是調(diào)試的代碼，在發(fā)布時，可以使用壓縮工具壓縮后存放。

3. 建立id為logon_div的div標簽，插入如下javascript代碼，這個是sencha ext js的樣例代碼

View Code Ext.require(['Ext.form.*','Ext.layout.container.Column','Ext.tab.Panel' ]);Ext.onReady(function () {Ext.QuickTips.init();var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';var simple = Ext.widget({xtype: 'form',layout: 'form',collapsible: true,id: 'simpleForm',url: 'save-form.php',frame: true,title: '登錄權(quán)限管理系統(tǒng)',bodyPadding: '5 5 0',width: 350,fieldDefaults: {msgTarget: 'side',labelWidth: 75},defaultType: 'textfield',items: [{fieldLabel: 'First Name',afterLabelTextTpl: required,name: 'first',allowBlank: false}, {fieldLabel: 'Last Name',afterLabelTextTpl: required,name: 'last',allowBlank: false}, {fieldLabel: 'Company',name: 'company'}],buttons: [{text: '登錄',handler: function () {this.up('form').getForm().isValid();}}, {text: '取消',handler: function () {this.up('form').getForm().reset();}}]});simple.render(Ext.get('logon_div')); });

由于使用dynamic loading,在使用控件之前，需要使用Ext.require(['Ext.grid.*']);這一類的代碼將js

文件動態(tài)引入。

運行，在chrome控制臺或者Firebug中查看錯誤信息，會看到一些文件缺失的提示，按照提示的文件路徑，建立相應(yīng)的目錄，并拷入相應(yīng)的文件（如果你將整個resources目錄引入的話，則不需要）。

一個包含三個輸入框的界面出來了，前兩個為必填項，如果缺失，會有紅色線和警示符提醒。

?

轉(zhuǎn)載于:https://www.cnblogs.com/nolink/archive/2012/12/18/2823316.html

總結(jié)

以上是生活随笔為你收集整理的一、搭建Extjs 4.1开发环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。