Extjs4學習指南完整版_第1頁
Extjs4學習指南完整版_第2頁
Extjs4學習指南完整版_第3頁
Extjs4學習指南完整版_第4頁
Extjs4學習指南完整版_第5頁
已閱讀5頁，還剩173頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

Extjs4學習指南（僅供學習使用、轉(zhuǎn)載需注明出處）Extjs4可用的學習資料少之又少，本文內(nèi)容大部分為網(wǎng)絡整理、方便學習者使用，如有出入以extjs4api文檔為準。

Extjs初步獲取Extjs下載extjs：可以從/獲得需要的extjs發(fā)布包及更多支持。搭建學習環(huán)境：假設您的機器已經(jīng)安裝myeclipse和tomcat，如果沒有請參閱其他相關(guān)資料。myeclipse建立新Webproject項目Extjs4并且將extjs4.0.7壓縮包解壓后的全部文件復制到項目的Webroot目錄下Examples目錄為ext官方提供的例子程序，其中可能包涵php的代碼，錯誤信息可以暫時不理會。部署并且啟動tomcat，測試環(huán)境是否可用。打開瀏覽器，輸入http://localhost:8080/Ext4/index.html假設您的tomcat端口為8080您會看到以下界面，證明環(huán)境已經(jīng)搭建成功！查看api文檔http://localhost:8080/Ext4/docs/index.html查看示例頁面http://localhost:8080/Ext4/examples/index.html測試例子開始...Webroot目錄下建立hellowword.js輸入如下內(nèi)容:Ext.application({name:'HelloExt',launch:function(){Ext.create('Ext.container.Viewport',{layout:'fit',items:[{title:'HelloExt',html:'Hello!WelcometoExtJS.'}]});}});再建立一個helloword.html,輸入如下內(nèi)容<html><head><title>HelloExt</title><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"><scripttype="text/javascript"src="ext-all.js"></script><scripttype="text/javascript"src="HelloExt.js"></script></head><body></body></html>Html文件中只引入了一個css和2個js文件，注意引用路徑和你建立文件路徑是否能匹配，如果路徑?jīng)]有問題的話，打開瀏覽器輸入http://localhost:8080/Ext4/helloworld.html您將會看到瀏覽器里顯示一個panel，標題是HelloExt,內(nèi)容Hello!WelcometoExtJS.，如果沒有，請查看是否有路徑不匹配。其他：在ExtJS里最常用的,應該就是Ext.onReady和Ext.application這兩個個方法了,而且它也可能是你學習ExtJS所接觸的第一個方法,這個方法在當前的DOM加載完畢后自動調(diào)用,保證頁面內(nèi)的所有元素都能被Script所引用.可以嘗試在這個方法中添加一條語句,看看頁面打開后是什么反映（先建立js和html文件，將如下代碼加入js文件中，html文件相應引入對應的js文件，本文檔所有示例代碼均如此方式運行以下不再重復）Ext.onReady(function(){alert('helloworld!');});上面的代碼將在頁面加載完畢后彈出一對話框,打印出'helloworld!'字樣.獲取元素還有一個常用的方法,就是獲取頁面上的元素了,ExtJS提供了一個get方法,可以根據(jù)ID取到頁面上的元素:varmyDiv=Ext.get('myDiv');會取到頁面上ID為'myDiv'的元素.如果使用Element.dom的方法,則可以直接操作底層的DOM節(jié)點,Ext.get返回的則是一個Element對象.在不能使用這種方式來獲取多個DOM的節(jié)點,或是要獲取一些ID不一致,但又有相同特征的時候,可以通過選擇器來進行獲取,比如要獲取頁面上所有的標簽,則可以使用:varps=Ext.select('p');這樣你就可以對所要獲取的元素進行操作了,select()方法返回的是Ext.CompositeElement對象,可以通過其中的each()方法對其所包含的節(jié)點進行遍歷:ps.each(function(el){el.highlight();});當然,如果你要是對獲取的所有元素進行相同的操作,可以直接應用于CompositeElement對象上,如:ps.highlight();或是:Ext.select('p').highlight();當然,select參數(shù)還可以更復雜一些,其中可以包括W3CCss3Dom選取器,基本的XPath,HTML屬性等,詳細情況,可以查看DomQueryAPI的文檔,來了解細節(jié).事件響應獲取到了元素,則可能會對一些元素的事件進行一些處理,比如獲取一個按鈕,我們?yōu)樗砑右粋€單擊事件的響應:復制代碼代碼如下:Ext.onReady(function(){Ext.get('myButton').on('click',function(){alert('Youclickedthebutton!');});});當然,你可以把事件的響應加到通過select()方法獲取到的元素上:復制代碼代碼如下:Ext.select('p').on('click',function(){alert('Youclickedaparagraph!');});WidgetsExtJS還提供了豐富的UI庫來供大家使用.Extjs4布局詳解Fit布局在Fit布局中，子元素將自動填滿整個父容器。注意：在fit布局下，對其子元素設置寬度是無效的。如果在fit布局中放置了多個組件，則只會顯示第一個子元素在Fit布局中，子元素將自動填滿整個父容器。注意：在fit布局下，對其子元素設置寬度是無效的。如果在fit布局中放置了多個組件，則只會顯示第一個子元素。典型的案例就是當客戶要求一個window或panel中放置一個GRID組件，grid組件的大小會隨著父容器的大小改變而改變。示例代碼：Ext.application({name:'HelloExt',launch:function(){Ext.create('Ext.container.Viewport',{layout:'fit',items:[{title:'HelloExt',html:'Hello!WelcometoExtJS.'}]});}});Border布局border布局：border布局也稱邊界布局，他將頁面分隔為west,east,south,north,center這五個部分，我們需要在在其items中指定使用region參數(shù)為其子元素指定具體位置。border布局：border布局也稱邊界布局，他將頁面分隔為west,east,south,north,center這五個部分，我們需要在在其items中指定使用region參數(shù)為其子元素指定具體位置。注意：north和south部分只能設置高度（height），west和east部分只能設置寬度（width）。northsouthwesteast區(qū)域變大，center區(qū)域就變小了。參數(shù)split:true可以調(diào)整除了center四個區(qū)域的大小。參數(shù)collapsible:true將激活折疊功能，title必須設置，因為折疊按鈕是出現(xiàn)標題部分的。center區(qū)域是必須使用的，而且center區(qū)域不允許折疊。Center區(qū)域會自動填充其他區(qū)域的剩余空間。尤其在Extjs4.0中，當指定布局為border時，沒有指定center區(qū)域時，會出現(xiàn)報錯信息。示例代碼：Ext.application({ name:"HelloExt", launch:function(){ Ext.create('Ext.panel.Panel',{ width:1024, height:720, layout:'border', items:[{ region:'south', xtype:'panel', height:20, split:false, html:'歡迎登錄!', margins:'0555' },{ title:'WestRegioniscollapsible', region:'west', xtype:'panel', margins:'5005', width:200, collapsible:true, id:'west-region-container', layout:'fit' },{ title:'CenterRegion', region:'center', xtype:'panel', layout:'fit', margins:'5500', html:'在Extjs4中，center區(qū)域必須指定，否則會報錯。' }], renderTo:Ext.getBody() }); }});Accordion布局accordion布局：accordion布局也稱手風琴布局，在accordion布局下，在任何時間里，只有一個面板處于激活狀態(tài)。其中每個面邊都支持展開和折疊。accordion布局：accordion布局也稱手風琴布局，在accordion布局下，在任何時間里，只有一個面板處于激活狀態(tài)。其中每個面邊都支持展開和折疊。注意：只有Ext.Panels和所有Ext.panel.Panel子項，才可以使用accordion布局。示例代碼：Ext.application({ name:"HelloExt", launch:function(){ Ext.create('Ext.panel.Panel',{title:'AccordionLayout',width:300,height:300,x:20,y:20,layout:'accordion',defaults:{bodyStyle:'padding:15px'},layoutConfig:{titleCollapse:false,animate:true,activeOnTop:true},items:[{title:'Panel1',html:'Panelcontent!'},{title:'Panel2',html:'Panelcontent!'},{title:'Panel3',html:'Panelcontent!'}],renderTo:Ext.getBody()});}});Card布局Card布局：這種布局用來管理多個子組件，并且在任何時刻只能顯示一個子組件。這種布局最常用的情況是向?qū)Ｊ?，也就是我們所說的分布提交。Card布局：這種布局用來管理多個子組件，并且在任何時刻只能顯示一個子組件。這種布局最常用的情況是向?qū)Ｊ?，也就是我們所說的分布提交。Card布局可以使用layout:'card'來創(chuàng)建。注意：由于此布局本身不提供分步導航功能，所以需要用戶自己開發(fā)該功能。由于只有一個面板處于顯示狀態(tài)，那么在初始時，我們可以使用setActiveItem功能來指定某一個面板的顯示。當要顯示下一個面板或者上一個面板的時候，我們可以使用getNext()或getPrev()來得到下一個或上一個面板。然后使用setDisabled方法來設置面板的顯示。另外，如果面板中顯示的是FORM布局，我們在點擊下一個面板的時候，處理FORM中提交的元素，通過AJAX將表單中的內(nèi)容保存到數(shù)據(jù)庫中或者SESSION中。下面的示例代碼展示了一個基本的Card布局，布局中并沒有包含form元素，具體情況，還要根據(jù)實際情況進行處理：Ext.application({name:'HelloExt',launch:function(){varnavigate=function(panel,direction){ varlayout=panel.getLayout(); layout[direction](); Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); Ext.getCmp('move-next').setDisabled(!layout.getNext()); }; Ext.create('Ext.panel.Panel',{ title:'Card布局示例', width:300, height:202, layout:'card', activeItem:0, x:30, y:60, bodyStyle:'padding:15px', defaults:{border:false}, bbar:[{ id:'move-prev', text:'Back', handler:function(btn){ navigate(btn.up("panel"),"prev"); }, disabled:true }, '->', { id:'move-next', text:'Next', handler:function(btn){ navigate(btn.up("panel"),"next"); } }], items:[{ id:'card-0', html:'<h1>WelcometotheWizard!</h1><p>Step1of3</p>' }, { id:'card-1', html:'<p>Step2of3</p>' }, { id:'card-2', html:'<h1>Congratulations!</h1><p>Step3of3-Complete</p>' }], renderTo:Ext.getBody() });}});Anchor布局anchor布局將使組件固定于父容器的某一個位置，使用anchor布局的子組件尺寸相對于容器的尺寸，即父容器容器的大小發(fā)生變化時，使用anchor布局的組件會根據(jù)規(guī)定的規(guī)則重新渲染位置和大小。anchor布局將使組件固定于父容器的某一個位置，使用anchor布局的子組件尺寸相對于容器的尺寸，即父容器容器的大小發(fā)生變化時，使用anchor布局的組件會根據(jù)規(guī)定的規(guī)則重新渲染位置和大小。AnchorLayout布局沒有任何的直接配置選項（繼承的除外），然而在使用AnchorLayout布局時，其子組件都有一個anchor屬性，用來配置此子組件在父容器中所處的位置。anchor屬性為一組字符串，可以使用百分比或者是-數(shù)字來表示。配置字符串使用空格隔開，例如anchor:'75%25%'，表示寬度為父容器的75%，高度為父容器的25%anchor:'-300-200'，表示組件相對于父容器右邊距為300，相對于父容器的底部位200anchor:'-25020%'，混合模式，表示組件黨對于如容器右邊為250，高度為父容器的20%示例代碼：Ext.application({name:'HelloExt',launch:function(){Ext.create('Ext.Panel',{ width:500, height:400, title:"Anchor布局", layout:'anchor', x:60, y:80, renderTo:Ext.getBody(), items:[{ xtype:'panel', title:'75%Widthand25%Height', anchor:'75%25%' },{ xtype:'panel', title:'Offset-300Width&-200Height', anchor:'-300-200' },{ xtype:'panel', title:'MixedOffsetandPercent', anchor:'-25030%' }] });}});Absolute布局Absolute布局繼承Ext.layout.container.Anchor布局方式，并增加了X/Y配置選項對子組件進行定位，Absolute布局的目的是為了擴展布局的屬性，使得布局更容易使用Absolute布局繼承Ext.layout.container.Anchor布局方式，并增加了X/Y配置選項對子組件進行定位，Absolute布局的目的是為了擴展布局的屬性，使得布局更容易使用。Ext.application({ name:"HelloExt", launch:function(){ Ext.create('Ext.form.Panel',{ title:'Absolute布局', width:300, height:275, x:20, y:90, layout:'absolute', defaultType:'textfield', items:[{ x:10, y:10, xtype:'label', text:'SendTo:' },{ x:80, y:10, name:'to', anchor:'90%' },{ x:10, y:40, xtype:'label', text:'Subject:' },{ x:80, y:40, name:'subject', anchor:'90%' },{ x:0, y:80, xtype:'textareafield', name:'msg', anchor:'100%100%' }], renderTo:Ext.getBody() }); }});Column布局Column布局一般被稱為列布局，這種布局的目的是為了創(chuàng)建一個多列的格式。其中每列的寬度，可以為其指定一個百分比或者是一個固定的寬度。Column布局一般被稱為列布局，這種布局的目的是為了創(chuàng)建一個多列的格式。其中每列的寬度，可以為其指定一個百分比或者是一個固定的寬度。Column布局沒有直接的配置選項（繼承的除外），但Column布局支持一個columnWidth屬性，在布局過程中，使用columnWidth指定每個面板的寬度。注意：使用Column布局布局時，其子面板的所有columnWidth值加起來必須介于0~1之間或者是所占百分比。他們的總和應該是1。另外，如果任何子面板沒有指定columnWidth值，那么它將占滿剩余的空間。

示例代碼：Ext.application({ name:"HelloExt", launch:function(){ Ext.create('Ext.panel.Panel',{ title:'ColumnLayout-按比例', width:350, height:250, x:20, y:100, layout:'column', items:[{ title:'Column1', columnWidth:.25 },{ title:'Column2', columnWidth:.55 },{ title:'Column3', columnWidth:.20 }], renderTo:Ext.getBody() }); }});Extjs4文檔閱讀ExtJS4使用新的類機制進行了大量的重構(gòu)。為了支撐新的架構(gòu),ext4幾乎重寫了每一個類,因此最好先好好的理解一下新的架構(gòu),再開始編碼。本文適合想在extjs4中擴展現(xiàn)有類或者創(chuàng)建新類的開發(fā)者。其實，不管是想擴展還是使用，都建議您仔細閱讀一下（如果E文好的，建議您還是閱讀英文原文。鏈接地址是：/ext-js/4-0/#/guide/）。文章共分4個部分，建議每一部分都仔細研究下，對之后的開發(fā)工作，會有意想不到的好處。系統(tǒng)類(classsystem)Api文檔路徑：http://localhost/Ext4/docs/index.html#!/guide/class_system第一部分：概述。說明了強大的類機制的必要性第二部分：編碼規(guī)范。討論類、方法、屬性、變量和文件命名第三部分：DIY。詳細的編碼示例第四部分：錯誤處理和調(diào)試。提供一些有用的調(diào)試和異常處理技巧概述ExtJS4擁有超過300個的類.迄今為止,我們的社區(qū)擁有超過20萬來自世界各地,使用不同后臺語言的開發(fā)者.要在這種規(guī)模的框架上提供具有以下特點的架構(gòu),需要面臨巨大的挑戰(zhàn)：1、簡單易學。2，快速開發(fā)、調(diào)試簡單、部署容易。3，良好的結(jié)構(gòu)、可擴展性和可維護性。編碼和規(guī)范*在所有類、命名空間（namespace）和文件名中使用一致的命名約定,有助于保持代碼的良好結(jié)構(gòu)和可讀性。1)Classes類名只能包含字母和數(shù)字。允許包含數(shù)字，但是大部分情況下不建議使用，除非這些數(shù)字是專業(yè)術(shù)語的一部分。不要使用下劃線，連字符等非數(shù)字字母符號。例如：MyCompany.useful_util.Debug_ToolbarisdiscouragedMyCompany.util.Base64isacceptable類名應該包含在使用點號分隔的命名空間中。至少，要有一個頂級命名空間。例如：MyCompany.data.CoolProxyMyCompany.Application頂級命名空間和實際的類名應使用駝峰命名（CamelCased），其他則為小寫。例如：MyCompany.form.action.AutoLoad不是Sencha開發(fā)的類（即不是Ext自帶的）不要使用Ext做為頂級命名空間?？s寫也要遵守以上的駝峰式命名約定。例如：Ext.data.JsonProxy代替Ext.data.JSONProxyMyCompany.util.HtmlParser代替MyCompary.parser.HTMLParserMyCompany.server.Http代替MyCompany.server.HTTP2)代碼文件類名對應類所在的文件（包括文件名）。因此，每個文件應該只包含一個類（類名和文件名一樣）。例如：Ext.util.Observable

存放在path/to/src/Ext/util/Observable.js

Ext.form.action.Submit

存放在

path/to/src/Ext/form/action/Submit.js

MyCompany.chart.axis.Numeric

存放在

path/to/src/MyCompany/chart/axis/Numeric.jspath/to/src是你的應用所在目錄。所有類都應該在這個通用根目錄下，并且使用適當?shù)拿臻g以利于開發(fā)、維護和部署。3）方法和變量?和類命名一樣，方法和變量也只能包含字母和數(shù)字。數(shù)字同樣是允許但不建議，除非屬于專業(yè)術(shù)語。不要使用下劃線，連字符等任何非字母數(shù)字符號。?方法和變量名一樣使用駝峰式命名，縮寫也一樣。?舉例?合適的方法名：

encodeUsingMd5()getHtml()代替getHTML()

getJsonResponse()代替getJSONResponse()

parseXmlContent()代替parseXMLContent()?合適的變量名：

varisGoodName

varbase64Encoder

varxmlReader

varhttpServer4）屬性類屬性名稱遵循以上的變量和方法命名約定.除非是靜態(tài)的常量.類的靜態(tài)屬性常量應該全部大寫。例如：Ext.MessageBox.YES="Yes"Ext.MessageBox.NO="No"MyCompany.alien.Math.PI="4.13"DIY親自動手（示例代碼）聲明Extjs4之前的方式如果你曾經(jīng)使用過舊版本的extjs,那么你肯定熟悉使用Ext.extend來創(chuàng)建一個類:1:varMyWindow=Ext.extend(Object,{...});這個方法很容易從現(xiàn)有的類中繼承創(chuàng)建新的類.相比直接繼承,我們沒有好用的API用于類創(chuàng)建的其他方面,諸如:配置、靜態(tài)方法、混入（Mixins）。呆會我們再來詳細的重新審視這些方面。現(xiàn)在，讓我們來看看另一個例子：1:My.cool.Window=Ext.extend(Ext.Window,{...});在這個例子中，我們創(chuàng)建我們的新類，繼承Ext.Window，放在命名空間中。我們有兩個問題要解決：1，在我們訪問My.cool的Window屬性之前,My.cool必須是一個已有的對象.2,Ext.Window必須在引用之前加載.第一個問題通常使用Espace(別名Ext.ns)來解決.該方法遞歸創(chuàng)建(如果該對象不存在)這些對象依賴.比較繁瑣枯燥的部分是你必須在Ext.extend之前執(zhí)行Ext.ns來創(chuàng)建它們.1:Ext.ns('My.cool');2:My.cool.Window=Ext.extend(Ext.Window,{...});第二個問題不好解決,因為Ext.Window可能直接或間接的依賴于許多其他的類,依賴的類可能還依賴其它類...出于這個原因,在ext4之前,我們通常引入整個ext-all.js,即使是我們只需要其中的一小部分.Extjs4新的方式在Extjs4中,你只需要使用一個方法就可以解決這些問題:Ext.define.以下是它的基本語法:1:Ext.define(className,members,onClassCreated);className:類名members:代表類成員的對象字面量(鍵值對,json)onClassCreated:可選的回調(diào)函數(shù),在所有依賴都加載完畢,并且類本身建立后觸發(fā).由于類創(chuàng)建的新的異步特性,這個回調(diào)函數(shù)在很多情況下都很有用.這些在第四節(jié)中將進一步討論例如:Ext.define('My.sample.Person',{name:'Unknown',

constructor:function(name){if(name){=name;}

returnthis;},eat:function(foodType){alert(+"iseating:"+foodType);

returnthis;}});

varaaron=Ext.create('My.sample.Person','Aaron');aaron.eat("Salad");程序執(zhí)行結(jié)果會彈出alert窗口顯示"Aaroniseating:Salad".注意我們使用Ext.create()方法創(chuàng)建了My.sample.Person類的一個新實例.我們也可以使用新的關(guān)鍵字(newMy.sample.Person())來創(chuàng)建.然而,建議養(yǎng)成始終用Ext.create來創(chuàng)建類示例的習慣,因為它允許你利用動態(tài)加載的優(yōu)勢.更多關(guān)于動態(tài)加載信息,請看入門指南:入門指南配置在ExtJS4,我們引入了一個專門的配置屬性,用于提供在類創(chuàng)建前的預處理功能.特性包括:配置完全封裝其他類成員getter和setter.如果類沒有定義這些方法,在創(chuàng)建類時將自動生成配置的屬性的getter和setter方法。同樣的,每個配置的屬性自動生成一個apply方法.自動生成的setter方法內(nèi)部在設置值之前調(diào)用apply方法.如果你要在設置值之前自定義自己的邏輯,那就重載apply方法.如果apply沒有返回值,則setter不會設置值.看下面applyTitle的例子:Ext.define('My.own.Window',{/**@readonly*/isWindow:true,

config:{title:'TitleHere',bottomBar:{enabled:true,height:50,resizable:false}},

constructor:function(config){this.initConfig(config);

returnthis;},

applyTitle:function(title){if(!Ext.isString(title)||title.length===0){alert('Error:Titlemustbeavalidnon-emptystring');}else{returntitle;}},

applyBottomBar:function(bottomBar){if(bottomBar&&bottomBar.enabled){if(!this.bottomBar){returnExt.create('My.own.WindowBottomBar',bottomBar);}else{this.bottomBar.setConfig(bottomBar);}}}});以下是它的用法:varmyWindow=Ext.create('My.own.Window',{title:'HelloWorld',bottomBar:{height:60}});alert(myWindow.getTitle());//alerts"HelloWorld"myWindow.setTitle('SomethingNew');alert(myWindow.getTitle());//alerts"SomethingNew"myWindow.setTitle(null);//alerts"Error:Titlemustbeavalidnon-emptystring"myWindow.setBottomBar({height:100});//Bottombar'sheightischangedto100Statics靜態(tài)成員可以使用statics配置項來定義Ext.define('Computer',{statics:{instanceCount:0,factory:function(brand){//'this'instaticmethodsrefertotheclassitselfreturnnewthis({brand:brand});}},config:{brand:null},constructor:function(config){this.initConfig(config);//the'self'propertyofaninstancereferstoitsclassthis.self.instanceCount++;returnthis;}});vardellComputer=Computer.factory('Dell');varappleComputer=Computer.factory('Mac');alert(appleComputer.getBrand());//usingtheauto-generatedgettertogetthevalueofaconfigproperty.Alerts"Mac"alert(Computer.instanceCount);//Alerts"2"錯誤處理&調(diào)試Extjs4包含一些有用的特性用于調(diào)試和錯誤處理.你可以使用Ext.getDisplayName()來顯示任意方法的名字.這對顯示拋出異常的類和方法非常有用.thrownewError('['+Ext.getDisplayName(arguments.callee)+']Somemessagehere');當使用Ext.define()定義的類中的方法拋出異常后.你將在調(diào)用堆棧中看到類和方法名(如果你使用webkit).例如,以下是chrome瀏覽器的效果:javascript是一種類無關(guān)（原文：classless）、基于原型的語言。因此javascript最強大的特點是靈活。同樣的事情可以使用不同的方式，不同的編碼風格和技巧去完成。這個特點也會帶來一些不可預測的風險。如果沒有統(tǒng)一的編碼規(guī)范，javascript代碼將很難理解、維護和復用。相反的，基于類的編程語言擁有較為流行的面向?qū)ο竽Ｐ停瑥婎愋?、?nèi)建的封裝機制和強制的編碼約束等特點。通過強制開發(fā)人員遵守一些大的原則來使代碼的行為更容易被理解，以及提高可擴展性(這里不明白,javascript這類動態(tài)語言不是更容易擴展么?)和可伸縮性。但是，這類語言沒有javascript的靈活性MVC應用模式一直想寫一些Extjs4MVC的東西，但由于自己的英文水平足夠媲美小學5年紀的學生，所以在找了一些比我強一點的網(wǎng)友+機器翻譯，總結(jié)出了以下這篇文章。但個人強烈建議去看英文原版（http://localhost/Ext4/docs/index.html#!/guide/application_architecture）。本段代碼示例建議使用firefoxfirebug插件配合使用，ie無法加在console.log對象。那么，我們開始吧！對于Extjs來說，大客戶端程序一直很難寫，當你為大客戶端程序添加更多的功能和項目的時候，項目的體積往往迅速增長。這樣的大客戶端程序很難組織和維持，所以，Extjs4配備了一個新的應用程序體系結(jié)構(gòu)，它能結(jié)構(gòu)化你的代碼，那就是Extjs4MVC。Extjs4MVC有別于其他MVC架構(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工作的代碼，例如renderviews,instantiatingModels或者其他應用邏輯。本篇文章，我們將創(chuàng)建一個非常簡單的應用程序，即用戶數(shù)據(jù)管理，最后，你就會知道如何利用Extjs4MVC去創(chuàng)建簡單應用程序。Extjs4MVC應用程序架構(gòu)提供應用程序的結(jié)構(gòu)性和一致性。這樣的模式帶來了一些重要的好處：1、

每個應用程序的工作方式相同，我們只需要學習一次。2、

應用程序之間的代碼共享很容易，應為他們所有的工作方式都相同3、

你可以使用EXTJS提供的構(gòu)建工具創(chuàng)建你應用程序的優(yōu)化版本。既然是介紹Extjs4MVC，那么，我們開始創(chuàng)建這個應用。文件結(jié)構(gòu)（FileStructure）：

Extjs4MVC的應用程序和別的應用程序一樣都遵循一個統(tǒng)一的目錄結(jié)構(gòu)。在MVC布局中，所有的類放在應用程序文件夾，它的子文件夾中包含您的命名空間，模型，視圖，控制器和存儲器。下面來通過簡單的例子來看下怎樣應用。在這個例子中，我們將整個應用程序放到一個名為”account_manager”的文件夾下，”account_manager”文件夾中的結(jié)構(gòu)如上圖。現(xiàn)在編輯index.html，內(nèi)容如下：

<html><head><title>AccountManager</title><linkrel="stylesheet"type="text/css"href="ext-4.0/resources/css/ext-all.css"><scripttype="text/javascript"src="ext-4.0/ext-debug.js"></script><scripttype="text/javascript"src="app.js"></script></head><body></body></html>創(chuàng)建app.js文件（Creatingtheapplication）所有Extjs4MVC應用從Ext.application的一個實例開始，應用程序中應包含全局設置、以及應用程序所使用的模型(model)，視圖（view）和控制器（controllers），一個應用程序還應該包含一個發(fā)射功能(launchfunction)?，F(xiàn)在來創(chuàng)建一個簡單的賬戶管理應用。首先，需要選擇一個命名空間（所有extjs4應用應該使用一個單一的全局變來來作為命名空間）。暫時，使用”AM”來作為命名空間。Ext.application({name:'AM',appFolder:'app',launch:function(){Ext.create('Ext.container.Viewport',{layout:'fit',items:[{xtype:'panel',title:'Users',html:'Listofuserswillgohere'}]});}});以上代碼，做了如下幾件事。首先，調(diào)用Ext.application創(chuàng)建一個應用程序類的實例，設置了一個”AM”的命名空間，他將作為整個應用的全局變量，也將作為Ext.Loader的命名空間，然后通過appFolder來指定配置選項設置相應的路徑。最后，創(chuàng)建了一個簡單的發(fā)射功能，這里僅僅創(chuàng)建了一個Viewport，其中包含一個panel，使其充滿整個窗口。

定義一個控制器（DefiningaController）控制器是整個應用程序的關(guān)鍵，他負責監(jiān)聽事件，并對某些時間做出相應的動作?，F(xiàn)在我們創(chuàng)建一個控制器，將其命名為Users.js，其路徑是app/controller/Users.js。然后，我們?yōu)閁sers.js添加如下代碼：Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',init:function(){console.log('InitializedUsers!ThishappensbeforetheApplicationlaunchfunctioniscalled');}});完成之后，我們將創(chuàng)建好的控制器添加到程序配置文件：app.js中：Ext.application({...controllers:['Users'],...});當我們訪問index.html時，用戶控制器(Users.js)自動加載，因為我們在上面的app.js中的定義中指定了。Init函數(shù)一個最棒的地方是控制器與視圖的交互，這里的交互是指控制功能，因為他很容易就可以監(jiān)聽到視圖類的事件處理函數(shù)，并采取相應的措施，并及時渲染相關(guān)信息到面板上來。編寫Users.js：Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',init:function(){this.control({'viewport>panel':{render:this.onPanelRendered}});},onPanelRendered:function(){console.log('Thepanelwasrendered');}});在Users.js中，init函數(shù)使用this.control來負責監(jiān)聽，由于使用了新的ComponentQuery引擎，所以可以快速方便的找到頁面上組件的引用(viewport>panel),這有些類似CSS選擇器，通過匹配，快速的找到相匹配的組件。在上面的init函數(shù)中，我們使用viewport>panel，來找到app.js中Viewport下的panel組件，然后，我們提供了一個對象的處理函數(shù)(this.onPanelRendered，注意，這里的對象是this，他的處理函數(shù)是onPanelRendered)。整個效果是，只要符合觸發(fā)render事件的任何組件，那么onPanelRendered函數(shù)將被調(diào)用。當運行我們的應用程序，我們將看到以下內(nèi)容。

定義一個視圖（DefiningaView）到目前為止，應用程序只有幾行，也只有兩個文件,app.js和app/controller/Users.js?，F(xiàn)在我們來增加一個grid,來顯示整個系統(tǒng)中的所有用戶。作為視圖組件的一個子類，我們創(chuàng)建一個新的文件，并把他放到app/view/user目錄下。命名為List.js。整個路徑是這樣的。app/view/user/List.js，下面，我們寫List.js的代碼：

Ext.define('AM.view.user.List',{extend:'Ext.grid.Panel',alias:'widget.userlist',title:'AllUsers',initComponent:function(){this.store={fields:['name','email'],data:[{name:'Ed',email:'ed@'},{name:'Tommy',email:'tommy@'}]};this.columns=[{header:'Name',dataIndex:'name',flex:1},{header:'Email',dataIndex:'email',flex:1}];this.callParent(arguments);}});我們創(chuàng)建好的這個類，只是一個非常普通的類，并沒有任何意義，為了能讓我們更好的使用這個定義好的類，所以我們使用alias來定義一個別名，這個時候，我們的類可以使用Ext.create()和Ext.widget()創(chuàng)建，在其他組件的子組件中，也可以使用xtype來創(chuàng)建。Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',views:['user.List'],init:...onPanelRendered:...});修改Users.js,增加views屬性，修改app.js中的launch方法，將List渲染到Viewport。Ext.application({...launch:function(){Ext.create('Ext.container.Viewport',{layout:'fit',items:{xtype:'userlist'}});}});看到這里，也許會有人開始抓狂了，這個user.List到底是怎么來的，為什么要這樣寫？如果你開始感到疑惑，那么不妨看看Ext.Loader是如何工作的（參見文檔其他部分），在看過Ext.Loader之后，你就會明白了，User.List就是app/view/user下的List.js文件。為什么Ext要從view下找呢？因為我們在控制器中定了views:['user.List']。這就是Extjs動態(tài)加載的強大之處，具體Ext.Loader，請看本站的其他文章，你就會明白了。當我們刷新頁面。控制網(wǎng)格（Controllingthegrid）要注意的是,onPanelRendered功能仍然是被調(diào)用的。這是因為gird匹配'viewport>panel'。

然后我們添加一個監(jiān)聽，當我們雙擊grid中的行，就可以編輯用戶。

Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',views:['user.List'],init:function(){this.control({'userlist':{itemdblclick:this.editUser}});},editUser:function(grid,record){console.log('Doubleclickedon'+record.get('name'));}});這里，我們修改了ComponentQuery的選擇（'userlist'）和事件的名稱（'itemdblclick'）和處理函數(shù)（'editUser'）。如果要實現(xiàn)真正編輯用戶，那么我們需要一個真正用于用戶編輯window，接著，創(chuàng)建一個JS文件。其路徑是：app/view/user/Edit.js，代碼是這樣的：Ext.define('AM.view.user.Edit',{extend:'Ext.window.Window',alias:'widget.useredit',title:'EditUser',layout:'fit',autoShow:true,initComponent:function(){this.items=[{xtype:'form',items:[{xtype:'textfield',name:'name',fieldLabel:'Name'},{xtype:'textfield',name:'email',fieldLabel:'Email'}]}];this.buttons=[{text:'Save',action:'save'},{text:'Cancel',scope:this,handler:this.close}];this.callParent(arguments);}});我們定義了一個子類，繼承Ext.window.Window，然后使用initComponent創(chuàng)建了一個表單和兩個按鈕，表單中，兩個字段分別裝載用戶名和電子郵件。接下來，我們修改視圖控制器，使其可以載入用戶數(shù)據(jù)。Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',views:['user.List','user.Edit'],init:...editUser:function(grid,record){varview=Ext.widget('useredit');view.down('form').loadRecord(record);}});首先，我們創(chuàng)建的視圖，使用便捷的方法Ext.widget，這是相當于Ext.create（'widget.useredit“）。然后我們利用ComponentQuery快速獲取編輯用戶的形式引用。在ExtJS4的每個組件有一個down函數(shù)，可以使用它快速的找到任何他的子組件。當雙擊Grid中的行，我們可以看到如下圖所示：創(chuàng)建Model和StoreExt.define('AM.store.Users',{extend:'Ext.data.Store',fields:['name','email'],data:[{name:'Ed',email:'ed@'},{name:'Tommy',email:'tommy@'}]});接下來修改兩個文件：Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',stores:['Users'],...});修改app/view/user/List.js，使其引用UsersExt.define('AM.view.user.List',{extend:'Ext.grid.Panel',alias:'widget.userlist',//wenolongerdefinetheUsersstoreinthe`initComponent`methodstore:'Users',...});現(xiàn)在，我們定義的用戶控制器已經(jīng)能順利的加載數(shù)據(jù)了，到目前，我們所定義的Store已經(jīng)足夠使用了，但是Extjs4提供了一個強大的Ext.data.Model類，不如，我們利用它來重構(gòu)下我們Store，創(chuàng)建app/model/User.js

Ext.define('AM.model.User',{extend:'Ext.data.Model',fields:['name','email']});創(chuàng)建好模型之后，我們將他引入用戶控制：//theUserscontrollerwillmakesurethattheUsermodelisincludedonthepageandavailabletoourappExt.define('AM.controller.Users',{extend:'Ext.app.Controller',stores:['Users'],models:['User'],...});//wenowreferencetheModelinsteadofdefiningfieldsinlineExt.define('AM.store.Users',{extend:'Ext.data.Store',model:'AM.model.User',data:[{name:'Ed',email:'ed@'},{name:'Tommy',email:'tommy@'}]});完成上面的代碼后，刷新頁面，看到的結(jié)果和以前的一樣。

通過model保存數(shù)據(jù)現(xiàn)在雙擊Grid中的行，會彈出編輯用戶的window，實現(xiàn)Save來保存用戶數(shù)據(jù)，我們需要修改init函數(shù)。Ext.define('AM.controller.Users',{init:function(){this.control({'viewport>userlist':{itemdblclick:this.editUser},'usereditbutton[action=save]':{click:this.updateUser}});},updateUser:function(button){console.log('clickedtheSavebutton');}});在this.control中，我們增加了一個選擇項，'usereditbutton[action=save]'，當ComponentQuery找到符合的組件（button按鈕，并且action動作為save），給他增加一個方法click，事件為updateUser。如圖：上圖中，可以看到正確的Click事件，在updateUser函數(shù)中，需要一個正式的邏輯，來完成用戶數(shù)據(jù)的更新。updateUser:function(button){varwin=button.up

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論