作者：齊飛
聲明：本博客原創(chuàng)文字只代表本人工作中在某一時(shí)間內(nèi)總結(jié)的觀點(diǎn)或結(jié)論，與本人所在單位沒有直接利益關(guān)系,。非商業(yè),，未授權(quán)，貼子請(qǐng)以現(xiàn)狀保留,，轉(zhuǎn)載時(shí)必須保留此段聲明,，且在文章頁面明顯位置給出原文連接。
ExtJS功能繁多,，要想徹底的了解確實(shí)很困難。作為初學(xué)者,，如何能找到一條快速的通道呢,？我覺得，如果你有Javascript的基礎(chǔ),，那就不要懼怕ExtJS的復(fù)雜,，從動(dòng)手開始，遇到問題,，解決問題,，積累經(jīng)驗(yàn)，這是一條非?？焖俚膶W(xué)習(xí)途徑,。從今天開始我將完成一系列ExtJS使用中常常用到的功能，并通過例子的形式告訴大家如何一步一步的完成,，相信我,，ExtJS并不可怕！ 本系列教程以代碼演示為主,，代碼講解相結(jié)合,，盡量將ExtJS的學(xué)習(xí)難度降到最低。 要學(xué)習(xí)本系列教程,，你需要具有以下知識(shí)：
今天我將帶領(lǐng)初學(xué)者朋友完成第一個(gè)例子,，將ExtJS引入到你的項(xiàng)目中,，并搭建一個(gè)模板，我們后續(xù)的例子都將以這個(gè)模板為基礎(chǔ)進(jìn)行編碼,。 獲取ExtJSExtJS的官網(wǎng)地址：http://www./products/extjs 在這個(gè)網(wǎng)址上面,，我們可以下載到ExtJS的最新版本。目前,，ExtJS的最新版是4.2.1,，我們將使用這個(gè)版本進(jìn)行講解。ExtJS 4.x 做了很大的改變,，對(duì)3.x是不兼容的,。 在頁面中，我們可以找到下載按鈕,，下載最新這個(gè)版本的ExtJS,。下載完成以后對(duì)它進(jìn)行解壓,，接下來我們將完成Hello World 示例。 Hello World 示例—— 我相信從無到有的過程絕對(duì)是開天辟地的,。所以請(qǐng)尊重Hello World這個(gè)例子,。 下載完以后，我們需要對(duì)壓縮包進(jìn)行解壓,。ExtJS 是開源的,，所以壓縮包中包含了很多源代碼和調(diào)試用的一些東西，這些東西對(duì)我們開發(fā)工程中的調(diào)試很有用,，但在引用的時(shí)候,，我們只需要使用到：
這些文件的說明如下：
了解了這些內(nèi)容,，我們就可以很輕松的完成Hello World示例了。 第一步,，新建一個(gè)html文件<!DOCTYPE html> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> </body> </html> 第二步,，添加上述的三個(gè)文件引用<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="extjs-4.2.1/ext-all.js"></script> <script src="extjs-4.2.1/locale/ext-lang-zh_CN.js"></script> <link href="extjs-4.2.1/resources/css/ext-all.css" rel="stylesheet" /> </head> 第三步，完成編碼我們的編碼很簡單,，為了方便演示,，我們只在頁面加載完成的時(shí)候彈出一個(gè)對(duì)話框，在對(duì)話框中顯示“Hello World”,。代碼如下： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>實(shí)用ExtJS教程100例-001：開天辟地的Hello World - www.</title> <script src="extjs-4.2.1/ext-all.js"></script> <script src="extjs-4.2.1/locale/ext-lang-zh_CN.js"></script> <link href="extjs-4.2.1/resources/css/ext-all.css" rel="stylesheet" /> <script type="text/javascript"> Ext.onReady(function () { Ext.MessageBox.alert("提示", "Hello world"); }); </script> 代碼說明： 首先在head標(biāo)簽中添加一個(gè)script標(biāo)簽,，用來在里面添加我們自己的js代碼 然后調(diào)用Ext.onReady()方法，這個(gè)方法會(huì)在DOM加載完成以后調(diào)用傳入的方法,，如果使用過jquery,，這個(gè)方法就不難理解。通常我們會(huì)將代碼放在頁面加載完成以后執(zhí)行,。 在傳入的方法中,，我們使用Ext.MessageBox.alert()方法彈出一個(gè)對(duì)話框，這個(gè)方法的第一個(gè)參數(shù)的標(biāo)題,，第二個(gè)參數(shù)是內(nèi)容,。 我們的頁面在瀏覽器中的效果如下：
這個(gè)對(duì)話框顯得非常精美，顯得非常專業(yè)，可以用高端大氣上檔次來形容了,，這也是為什么那么多人喜歡ExtJS的原因,。 在ASP.NET MVC中搭建模板看到了吧，如果我們決定動(dòng)手的時(shí)候,，ExtJS也并不是那么麻煩,，一個(gè)簡單的Hello World已經(jīng)把你帶入ExtJS的世界，在這個(gè)世界里還有更多更好玩兒的東西等著你來發(fā)現(xiàn),，但在出發(fā)之前,，我們先來完善一下裝備吧。 由于我比較擅長使用ASP.NET,，本系列的例子將使用ASP.NET MVC來提供服務(wù)器端的支撐。由于ExtJS的平臺(tái)無關(guān)性（只與瀏覽器有關(guān)）,，Java和php方面的朋友也可以毫無顧忌的參考這些例子,。 在使用ASP.NET MVC的時(shí)候，我們通常會(huì)用到layout頁面,，我們來完成一個(gè)通用的layout頁面,，在接下來的示例中，我們都將使用這個(gè)布局頁為基礎(chǔ)進(jìn)行編碼,。 我們創(chuàng)建好一個(gè)MVC項(xiàng)目,，項(xiàng)目結(jié)構(gòu)圖如下：
接下來我們創(chuàng)建一個(gè)layout.cshtml，并修改代碼： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link href="~/Resources/extjs-4.2.1/resources/css/ext-all.css" rel="stylesheet" /> <script src="~/Resources/extjs-4.2.1/ext-all.js"></script> <script src="~/Resources/extjs-4.2.1/locale/ext-lang-zh_CN.js"></script> @RenderSection("script", false) </head> <body> <div> @RenderBody() </div> </body> </html> 我們只添加了ExtJS的相關(guān)引用,，然后在head標(biāo)簽中添加了script節(jié)點(diǎn)的繪制,。接下來我們看看這個(gè)layout頁是否能正確的完成任務(wù)，我們來將剛才的HelloWorld示例使用布局頁重新完成一次,。 第一步,，在HomeController中添加HelloWorld方法：public ActionResult HelloWorld() { return View(); } 第二步，為HelloWorld方法添加視圖：@{ ViewBag.Title = "HelloWorld"; } <h2>HelloWorld</h2> 第三步,，創(chuàng)建一個(gè)JS文件,，用來完成編碼我們?cè)陧?xiàng)目根目錄中創(chuàng)建一個(gè)JSApp目錄,，將示例用到的JS代碼都放在這個(gè)目錄下面。 在JSApp目錄中創(chuàng)建一個(gè)Home文件夾,，用來對(duì)應(yīng)HomeController，然后在下面創(chuàng)建一個(gè)HelloWorld.js,，用來對(duì)應(yīng)HomeController中的HelloWorld方法,。這算是一種約定吧，以后我們也會(huì)遵循這種約定,。 HelloWorld.js代碼如下： Ext.onReady(function () { Ext.MessageBox.alert("提示", "Hello world"); }); 第四步,，修改我們的HelloWorld視圖頁面修改這個(gè)視圖頁面，將HelloWorld.js引入頁面中，修改后的代碼如下： @{ ViewBag.Title = "實(shí)用ExtJS教程100例-001：開天辟地的Hello World - www."; } @section script{ <script src="~/JSApp/Home/HelloWorld.js"></script> } 完成上面的四步以后,，運(yùn)行程序,，在瀏覽器中的截圖如下：
還不錯(cuò)，模板頁已經(jīng)正常工作了,。在以后的示例中,，我們將使用這四個(gè)步驟來添加演示的代碼。 本文還發(fā)布在了ExtJS教程網(wǎng)站起飛網(wǎng)上面,，如果轉(zhuǎn)載請(qǐng)保留本段聲明，謝謝合作,。 作者：齊飛 聲明：本博客原創(chuàng)文字只代表本人工作中在某一時(shí)間內(nèi)總結(jié)的觀點(diǎn)或結(jié)論，與本人所在單位沒有直接利益關(guān)系,。非商業(yè),，未授權(quán)，貼子請(qǐng)以現(xiàn)狀保留,，轉(zhuǎn)載時(shí)必須保留此段聲明,，且在文章頁面明顯位置給出原文連接。 |
|
|
