Sencha Touch - Chương trình đầu tiên

Trong chương này, chúng tôi sẽ 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 một 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://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

Giải trình

Phương thức Ext.application () là điểm khởi đầu của ứng dụng Sencha Touch. Nó tạo ra một biến toàn cục có tên là 'Sencha' được khai báo với thuộc tính name - tất cả các lớp của Ứng dụng như Mô hình, Chế độ xem và Bộ điều khiển của nó sẽ nằm trong không gian tên duy nhất này, điều này làm giảm nguy cơ xung đột giữa các biến toàn cục và tên tệp.
Phương thức khởi chạy () được gọi khi trang đã sẵn sàng và tất cả các tệp JavaScript được tải.
Phương thức Ext.create () được sử dụng để tạo một đối tượng trong Sencha Touch. Ở đây, chúng tôi đang tạo một đối tượng của lớp bảng điều khiển đơn giản Ext.tab.Panel.
Ext.tab.Panel là lớp được xác định trước trong Sencha Touch để tạo bảng điều khiển.
Mỗi lớp Sencha Touch 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ư -

fullscreen thuộc tính sử dụng một màn hình hoàn chỉnh, do đó bảng điều khiển sẽ chiếm không gian toàn màn hình.
items tài sản là nơi chứa các mặt hàng khác nhau.
iconCls là lớp được sử dụng để hiển thị các biểu tượng khác nhau.
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.