Ext.js - 第一個程式

本章列出了在 Ext JS 中編寫第一個 HelloWorld 程式的步驟。

步驟 1

在任意選定的編輯器中建立一個 index.htm 頁面。在 html 頁面的頭部分包含必需的庫檔案，如下所示。

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

說明

當 Ext JS 準備好渲染 Ext JS 元素時，將呼叫 Ext.onReady() 方法。
Ext.create() 方法用於在 Ext JS 中建立物件。我們在此處建立簡單面板類 Ext.Panel 的物件。
Ext.Panel 屬於 Ext JS 中建立面板的預定義類。
每個 Ext JS 類具有執行一些基本功能的不同屬性。

Ext.Panel 類有如下各種屬性 −

renderTo 是此面板要進行渲染的元素。'helloWorldPanel' 是 Index.html 檔案中的 div id。
Height 和 width 屬性是用於定製面板大小的屬性。
Title 屬性是用於為面板提供標題的屬性。
Html 屬性是將要在面板中顯示的 html 內容。

步驟 2

在標準瀏覽器中開啟 index.htm 檔案，在瀏覽器中會得到如下輸出。

列印頁面