Ext.js - Chương trình đầu tiên

Chương này liệt kê các bước để viết chương trình Hello World đầu tiên trong Ext JS.

Bước 1

Tạo một trang index.htm trong trình soạn thảo mà chúng tôi chọn. Bao gồm các tệp thư viện bắt buộc trong phần đầu của trang html như sau.

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>

Giải trình

Phương thức Ext.onReady () sẽ được gọi khi Ext JS đã sẵn sàng để hiển thị các phần tử Ext JS.
Phương thức Ext.create () được sử dụng để tạo một đối tượng trong Ext JS. Ở đây chúng ta đang tạo một đối tượng của lớp bảng điều khiển đơn giản Ext.Panel.
Ext.Panel là lớp được xác định trước trong Ext JS để tạo bảng điều khiển.
Mỗi lớp Ext JS có các thuộc tính khác nhau để thực hiện một số chức năng cơ bản.

Lớp Ext.Panel có các thuộc tính khác nhau như -

renderTolà phần tử mà bảng điều khiển này phải hiển thị. 'helloWorldPanel' là id div trong tệp Index.html.
Height và width thuộc tính để tùy chỉnh kích thước của bảng điều khiển.
Title thuộc tính cung cấp tiêu đề cho bảng điều khiển.
Html thuộc tính là nội dung html sẽ được hiển thị trong bảng điều khiển.

Bước 2

Mở tệp index.htm trong trình duyệt tiêu chuẩn và bạn sẽ nhận được kết quả sau trên trình duyệt.