Extjs5.0(1)：簡單暴力地窺視Extjs5.0的真容
阿新 • • 發佈：2019-01-03
雖然Extjs5.1 beta版已經出來了，但是我們這裡還是使用5.0版本，因為用5.1建立的專案，會有”beta”水印，非常不爽。
廢話不多說，開始簡單暴力的窺視Extjs5.0的真容。
隨便在硬碟上找一個地方，建立資料夾，這裡命名為”test”吧。開啟test資料夾，新建index.html檔案（怎麼建，不用我說吧），輸入以下程式碼：
<!DOCTYPE html> <html> <head> <title>Welcome to Ext JS!</title> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> <script type="text/javascript" src="http://cdn.sencha.com/ext/trial/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>
繼續在test資料夾裡面新建app.js檔案，輸入以下程式碼：
Ext.application({ name : 'MyApp', launch : function() { Ext.create('Ext.Panel', { renderTo : Ext.getBody(), width : 200, height : 150, bodyPadding : 5, title : 'Hello World', html : 'Hello <b>World</b>...' }); } });
好了，雙擊index.html檔案，耐心等待一下，會看到我們的hello word程式已經執行起來了。
但是我們也發現右邊有討厭的“Ext JS Trial”水印。所以這種做法只適合想盡快一睹extjs5風采時使用，真正開發時，我們還是得按部就班的搭建專案。下一篇我們講如何手動搭建Extjs5專案。