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

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

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

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

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

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

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

? ? 首先是很多js文件，我們?cè)陂_發(fā)中會(huì)經(jīng)常用到的4個(gè)：

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

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

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

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

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

　 然后是src和resources目錄，我們?cè)陂_發(fā)的時(shí)候會(huì)經(jīng)常使用到這兩個(gè)目錄的內(nèi)容

2.開始使用extjs 4.1

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

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

? ??

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

? ? 隨后我們就可以在項(xiàng)目中自由的使用extjs的強(qiáng)大功能了。

? ? 筆者在加入extjs的resources目錄時(shí)，并沒有將整個(gè)目錄都復(fù)制過來，因?yàn)檫@可能會(huì)稍微增大項(xiàng)目的大小，如果你不在意這些冗余而且也懶得手動(dòng)加入文件的話，就可以直接將整個(gè)resources目錄復(fù)制過來。

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

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

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

3. 建立id為logon_div的div標(biāo)簽，插入如下javascript代碼，這個(gè)是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

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

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

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

?

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

總結(jié)

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

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