[ExtJS5學習筆記]第四節歡迎來到extjs5-手把手教你實現你的第一個應用 · 利劍Extjs5

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38331347](http://blog.csdn.net/sushengmiyan/article/details/38331347) 本文作者：sushengmiyan ------------------------------------------------------------------------------------------------------------------- 翻譯來源：[http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html](http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html) -------------------------------------------------------------------------------------------------------------------- 這篇指引提供了一個簡單的ext js介紹，我們會從討論建立一個簡單的hello world例子開始我們的體驗。我們會接著講解在extjs中代碼是怎樣的結構，這個指導同樣也會包括一些其他可以使用的資源的鏈接，所以，你應該盡可能的多看一些來提升你對ext的認知程度。 ### **helloworld** ---------------------- 來體驗ext js 5很簡單,我們先創建一個文件夾，將ext5包放入（下載地址：[http://download.csdn.net/detail/sushengmiyan/7701943](http://download.csdn.net/detail/sushengmiyan/7701943)），再創建一個簡單的html文件,建立如下的目錄結構,如圖： ![](https://box.kancloud.cn/2016-02-03_56b214e7a0aa8.jpg) 我們命名的index.html的內容如下： ~~~ <html> <head> <title>Welcome to Ext JS!</title> <link rel="stylesheet" type="text/css" href="ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="ext-5.0.0/build/ext-all.js"></script> <script type="text/javascript" src="ext-5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type ="text/javascript" src="app.js"></script> </head> <body></body> </html> ~~~ 像jQuery或者AngularJS囊括了html的聲明標記，但是ext js不是這樣，你只需要在我們內部類輔助系統和js中書寫就夠了。你可以看到像如下結構的例子： ~~~ Ext.create('Ext.Panel', { renderTo : Ext.getBody(), width : 200, height : 150, bodyPadding : 5, title : 'Hello World', html : 'Hello <b>World</b>...' }); ~~~ 現在講上述代碼嵌入到你的app.js文件中，在index.html同級目錄下新建app.js內容粘貼上去即可。如果你現在刷新頁面，你可能無法看到運行結果，因為現在框架還沒有被完全加載。這就是為什么我們需要在應用程序中增加launch()函數，這個函數是當頁面準備結束的時候就被調用。現在我們給app.js內容替換為如下： ~~~ Ext.application({ name: "ExtJSTest", launch: function(){ Ext.create('Ext.Panel', { renderTo : Ext.getBody(), width : 200, height : 150, bodyPadding : 5, title : 'Hello World', html : 'Hello <b>World</b>...' }); } }); ~~~ 在IE8中運行有提示錯誤，但是在chrom中完全可以，看到如下結果： ![](https://box.kancloud.cn/2016-02-03_56b214e7bad43.jpg) 這個例子說明了開始ext js 5是多么簡單，從這里，天空是你的極限。你可以探索ext js 5的許多功能通過研究我們的例子，它們給出了框架工具盒能力的偉大介紹。 ext-all.js ---------- 我們應該注意到，index.html中ext-all.js和ext-them-neptune.css是被完全包含進來的，這個對于我們練習來說是合適的，但是當你想只用框架的部分來發布應用程序的時候就不太適合了。你可以根據你的工程的需要來簡化你的框架。你可以參考 getting started guide 來獲取更多的關于這方面的extjs5和sencha cmd 的介紹。請繼續閱讀關于extjs5的核心。 ### **什么是extjs** ------------------------ Ext JS 5是一個JavaScript應用程序框架,它為您提供了一整套工具用于創建跨平臺的應用程序。Ext JS 5支持所有現代瀏覽器,IE8的最新版本以及Chrome和介于兩者之間的。 Ext JS是面向對象的、基于類庫的,這意味著它的設計允許您的應用程序范圍從單個開發人員到多團隊的企業。讓我們打破這些概念的一些你不熟悉的術語。面向對象編程 ?面向對象編程(OOP)是一個模塊化的方式設置為可重用的代碼,使碎片。這也使代碼更易于維護比常見的“內聯”腳本編碼與許多其他JavaScript庫。而不是使一個巨大的項目,說計劃可以分為連接部分,最終,會讓事情更容易維護和規模。閱讀更多關于面向對象編程的基礎知識。類和對象 OOP的關鍵概念包括類和對象。一個類是一個抽象的定義應用程序的一個組件。這是一個簡單的抽象基礎水平的“東西”。這個類可以作為表示類的對象實例。在這一點上,抽象的對象包含的所有信息,除了任何其他部分的擴展。現在我們開始另一個例子來展示extjs的類系統，我們還是從上述的index.html和app.js開始。我們先來定義一個類：我們定義一個panel類如下： ~~~ Ext.define( 'MyApp.MyPanel', { extend : 'Ext.Panel', title : 'Hello World', html : 'Hello <b>World</b>...' }); ~~~ 你可以看到，我們定義了一個東西叫做MyPanel，它繼承于ext js panel類現在我們可以使用這個模板來創建一個新的對象。或許我們需要兩個面板，他們之間的唯一區別就是內容不一樣，我們就可以創建兩個實例，現在你的app.js內容應該像下面這樣： ~~~ Ext.define( 'ExtJSTest.MyPanel', { extend : 'Ext.Panel', title : 'Hello World', html : 'Hello <b>World</b>...' }); Ext.application({ name: "ExtJSTest", launch: function(){ Ext.create('ExtJSTest.MyPanel', { renderTo : Ext.getBody(), title : 'MyFirst Panel', html : 'MyFirst Panel' }); Ext.create('ExtJSTest.MyPanel', { renderTo : Ext.getBody(), title : 'MySecend Panel', html : 'MySecend Panel' }); } }); ~~~ 刷新index.html可以看到如下效果： ![](https://box.kancloud.cn/2016-02-03_56b214e7d14fc.jpg) 如你所見，這可以讓你重復使用一段基代碼，但是也可以達到我們不同的需要。雖然這是一個簡單的例子,使用和擴展Ext JS類是一個非常強大的機制,將幫助您創建清潔和可維護的代碼。你可以閱讀更多關于我們班的內部系統。注意:這個方法是“嵌入”例如目的。如果你寫一個真正的應用程序中,您會MyApp.view.MyPanel視圖在一個單獨的文件。此外,在控制器中創建語句會或發射()函數。你可以在這里閱讀更多關于應用程序體系結構。 ### **比helloWorld更深一層** ---------------------------------------------- 你現在已經看到了我們創建helloworld的例子，如果你對sencha 框架式不熟悉的話，它可能看起來像稍微正常語法,你可能需要創建一些那么簡單的東西。讓我們看看網格,這樣你可以看到最真實的情況下如何利用少量的語法來創建真正令人印象深刻的輸出。在這個例子中,我們會產生Ext.grid.panel,其中包含一行編輯插件和幾行數據。查看此示例,只需你app.js文件的內容替換為以下代碼: ~~~ Ext.application({ name : 'MyApp', launch : function() { Ext.widget({ renderTo : Ext.getBody(), xtype : 'grid', title : 'Grid', width : 650, height : 300, plugins : 'rowediting', store : { fields : [ 'name', 'age', 'votes', 'credits' ], data : [ [ 'Bill', 35, 10, 427 ], [ 'Fred', 22, 4, 42 ] ] }, columns: { defaults: { editor : 'numberfield', width : 120 }, items: [ { text: 'Name', dataIndex: 'name', flex: 1, editor: 'textfield' }, { text: 'Age', dataIndex: 'age' }, { text: 'Votes', dataIndex: 'votes' }, { text: 'Credits', dataIndex: 'credits' } ] } }) } }); ~~~ 當你刷新瀏覽器的時候，可以看到如下效果： ![](https://box.kancloud.cn/2016-02-03_56b214e7e078e.jpg) ? 你在這里看到的是一個功能齊全的Ext JS網格。這個網格包含可排序的可移動的列也是可拖放的。這些列可以利用網格頭下的列選項的下拉菜單顯示和隱藏。這個網格還包含一行通過雙擊激活任何行的編輯器。這些行包含可編輯的文本字段和一個有用的和有吸引力的用戶界面。 ? 真正神奇的事情是,你得到這個在大約30行代碼。這種功能帶有網格在默認情況下,這意味著更少的時間添加功能。唯一的添加到這個示例是行編輯器,它只需要一行配置被添加到您的網格。 ? 這應該說明一旦你熟悉語法Ext JS可以節省你多少時間。最后,你節省時間和用戶與應用程序功能豐富的經驗。注意:在一個真實世界的例子,您將使用一個單獨的存儲和模型來填充你的網格數據。你可以在我們的應用程序架構指南中閱讀更多關于Ext.data.store和Ext.data.model ### 下節內容： -------------------- 既然你已經看到了啟動是如此的簡單，那么你就可以看一些比較高深的知識了。你可以在如下地址找到extjs的doc文檔：http://docs.sencha.com/extjs/5.0.0/ 下一步我們就要學習： 1.set up and geting started 2.the class system 3.layouts and containers 4.enwents in ext js 5.examples