[學習筆記]歡迎來到extjs，學習筆記extjs
本文地址：
本文作者：sushengmiyan
翻譯來源：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），再建立一個簡單的html檔案,建立如下的目錄結構,
我們命名的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>
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中完全可以，看到如下結果：
這個例子說明了開始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庫。
而不是使一個巨大的項目,說計劃可以分為串連部分,最終,會讓事情更容易維護和規模。
閱讀
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
