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專案。