Sencha Touch - Hướng dẫn nhanh

Sencha Touch là một khuôn khổ phổ biến của Sencha để tạo giao diện người dùng cho các ứng dụng di động. Nó giúp nhà phát triển tạo ứng dụng di động bằng HTML, CSS, JS đơn giản, hỗ trợ nhiều thiết bị di động như android, IOS, BlackBerry và Windows. Nó dựa trên kiến ​​trúc MVC. Phiên bản mới nhất của Sencha Touch là 2.4.

Lịch sử của Sencha Touch

Sau khi phát hành sản phẩm khác của Sencha, ExtJs, dành cho ứng dụng web, cần phải phát triển một khuôn khổ hoạt động trên các thiết bị di động.

Phiên bản đầu tiên của Sencha Touch là phiên bản 0.9 beta, hỗ trợ các thiết bị Android và IOS. Sau đó, bản phát hành chính đầu tiên của Sencha Touch phiên bản 1.0 là vào tháng 11 năm 2010, đây là phiên bản ổn định đầu tiên và cũng hỗ trợ các thiết bị Blackberry.

Phiên bản mới nhất của Sencha Touch là phiên bản 2.4 được phát hành vào tháng 6 năm 2015, hỗ trợ nhiều thiết bị như Windows, Tizen cùng với Android, IOS, BlackBerry OS 10, Google Chrome cho Android và Safari di động, v.v.

Các tính năng của Sencha Touch

Sau đây là những tính năng nổi bật nhất của Sencha Touch -

  • Có thể tùy chỉnh và hơn 50 tiện ích con xây dựng trong giao diện người dùng với bộ sưu tập giao diện người dùng phong phú như danh sách, băng chuyền, biểu mẫu, menu và thanh công cụ, được xây dựng đặc biệt cho nền tảng di động.

  • Khả năng tương thích mã của phiên bản mới với phiên bản cũ hơn.

  • Trình quản lý bố cục linh hoạt giúp tổ chức hiển thị dữ liệu và nội dung trên nhiều thiết bị di động với hệ điều hành khác nhau.

  • Khung bao gồm một gói dữ liệu mạnh mẽ có thể sử dụng dữ liệu từ bất kỳ nguồn dữ liệu phụ trợ nào.

  • Bố cục thích ứng, hoạt ảnh và cuộn mượt mà để có trải nghiệm ứng dụng web di động tốt hơn cho việc sử dụng.

  • Các chủ đề ngoại lai, có giao diện gốc cho mọi nền tảng chính cho phép làm cho các ứng dụng web và ứng dụng kết hợp phù hợp với giao diện của các nền tảng mục tiêu.

Sencha Touch ─ Lợi ích

Sencha Touch là tiêu chuẩn hàng đầu để phát triển ứng dụng web cấp doanh nghiệp. Nó cung cấp các công cụ cần thiết để xây dựng các ứng dụng mạnh mẽ cho hầu hết các thiết bị di động cung cấp một nền tảng duy nhất để phát triển các ứng dụng. Sau đây là một số lợi ích -

  • Cung cấp tính năng cảm ứng nhạy, do đó người dùng có thể dễ dàng điều hướng trong khi sử dụng ứng dụng dành cho thiết bị di động.

  • Cung cấp khả năng tương thích với tất cả các phiên bản mới nhất của IOS, Android và Blackberry cũng như Windows.

  • Cung cấp tốc độ nhanh nhất có thể mong muốn cho bất kỳ ứng dụng di động nào.

  • Cung cấp giải pháp hiệu quả về chi phí với khả năng tương thích đa nền tảng.

  • Dựa trên các API gốc và các ngôn ngữ phát triển web cơ bản như HTML, CSS, JS giúp nhà phát triển hiểu Sencha Touch dễ dàng hơn.

Sencha Touch ─ Hạn chế

Sencha Touch API không có khả năng sau:

  • Ứng dụng không có quyền truy cập vào máy ảnh, danh bạ và gia tốc kế của thiết bị.

  • Nó không cung cấp cơ sở thông báo đẩy. Đối với điều này, chúng tôi phải sử dụng websockets hoặc cuộc thăm dò dài.

  • Theo chính sách cấp phép công cộng chung, nó là miễn phí cho các ứng dụng nguồn mở tuy nhiên trả phí cho các ứng dụng thương mại.

  • Nó không tốt cho các ứng dụng đồ họa và hoạt hình nặng như ứng dụng chơi game.

Sencha Touch ─ Công cụ

Sencha SDK

Đây là bộ phát triển Sencha được sử dụng để tạo khung xương của dự án. Chúng tôi sử dụng lệnh "sencha -sdk path / to / touch create app appName" để tạo một ứng dụng với tên được cung cấp trong lệnh.

Khi ứng dụng được tạo, bạn có thể thấy các tệp sau trong ứng dụng:

  • app - Thư mục này chứa các tệp mô hình, chế độ xem, bộ điều khiển và lưu trữ cho ứng dụng.

  • app.js- Đây là tệp JS chính cho ứng dụng của bạn. Từ tệp này, luồng mã Sencha bắt đầu.

  • app.json - Đây là tệp cấu hình cho ứng dụng, tất cả các chi tiết cấu hình hiển thị ở đây.

  • index.html - Đây là tệp html chính mà chúng tôi bao gồm app.js và các tệp khác có liên quan đến Sencha.

  • package.json - Tệp này có tất cả phụ thuộc và thông tin khác liên quan đến ứng dụng.

  • resources - Thư mục này bao gồm tất cả các tệp CSS và hình ảnh cần thiết cho ứng dụng.

Sencha CMD

Sencha CMD là một công cụ dòng lệnh, cung cấp các tính năng thu nhỏ mã Sencha Touch, dàn giáo, tạo công trình và các tính năng hữu ích khác cho mục đích sản xuất.

Chúng tôi sử dụng lệnh "Gói xây dựng ứng dụng Sencha" trong dấu nhắc lệnh để xây dựng ứng dụng cho việc này. Đi tới thư mục ứng dụng trong dấu nhắc lệnh và nhập lệnh trên. Sau khi xây dựng thành công, chúng ta sẽ thấy phiên bản thu nhỏ của ứng dụng về cơ bản được sử dụng cho mục đích sản xuất.

Cái này có thể được tải xuống từ https://www.sencha.com/products/extjs/cmd-download/

Thanh tra Sencha

Sencha Inspector là một công cụ gỡ lỗi để gỡ lỗi bất kỳ vấn đề nào trong mã Sencha trong quá trình phát triển.

Thiết lập môi trường cục bộ

Phần này hướng dẫn bạn cách tải xuống và thiết lập Sencha Touch trên máy của bạn. Vui lòng làm theo các bước để thiết lập môi trường.

Tải xuống tệp thư viện

Tải xuống phiên bản thương mại của các tệp thư viện Sencha Touch từ liên kết sau https://www.sencha.com. Bạn sẽ nhận được phiên bản dùng thử từ trang web trên id mail đã đăng ký của mình, đây sẽ là một thư mục nén có tên sencha-touch-2.4.2-Commercial.

Giải nén thư mục và bạn sẽ tìm thấy các tệp JavaScript và CSS khác nhau để đưa vào ứng dụng của mình. Bao gồm hầu hết các tệp sau:

Javascript Files - Tệp JS mà bạn có thể tìm thấy trong thư mục \ sencha-touch-2.4.2commercial \ touch-2.4.2 là -

Sr.No Mô tả tập tin
1

sencha-touch.js

Đây là tệp cốt lõi chứa tất cả các chức năng để chạy ứng dụng.

2

sencha-touch-all.js

Tệp này chứa tất cả mã được rút gọn và không có chú thích nào trong tệp.

3

sencha-touch-debug.js

Đây là phiên bản chưa hợp nhất của sencha-touch-all.js cho mục đích gỡ lỗi.

4

sencha-touch-all-debug.js

Tệp này cũng chưa được xác minh và được sử dụng cho mục đích phát triển vì nó chứa tất cả các nhận xét và nhật ký bảng điều khiển để kiểm tra bất kỳ lỗi / sự cố nào.

Bạn có thể thêm các tệp này vào thư mục JS dự án của mình hoặc bạn có thể cung cấp một đường dẫn trực tiếp nơi các tệp nằm trong hệ thống của bạn.

CSS Files - Có một số tệp dựa trên chủ đề mà bạn có thể tìm thấy trong thư mục I: \ sencha touch \ sencha-touch-2.4.2-Commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css

Các tệp thư viện này sẽ được thêm vào ứng dụng Sencha Touch như sau:

<html>
   <head>
      <script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>  
      <link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

Bạn có thể giữ mã ứng dụng Sencha Touch trong tệp app.js.

Thiết lập CDN

CDN là mạng phân phối nội dung mà bạn không cần tải xuống các tệp thư viện Sencha Touch, thay vào đó bạn có thể thêm trực tiếp liên kết CDN cho ExtJS vào chương trình của mình như sau:

<html>
   <head>
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>    
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

Biên tập viên phổ biến

Vì nó là một khung JavaScript được sử dụng để phát triển các ứng dụng web, dự án sẽ có các tệp HTML, JS và để viết các chương trình Ext JS, bạn sẽ cần một trình soạn thảo văn bản. Có nhiều IDE có sẵn trên thị trường. Nhưng hiện tại, bạn có thể xem xét một trong những điều sau:

  • Notepad - Trên máy Windows, bạn có thể sử dụng bất kỳ trình soạn thảo văn bản đơn giản nào như Notepad (Đề xuất cho hướng dẫn này), Notepad ++.

  • Brackets - Một IDE phổ biến khác có thể được tải xuống từ http://brackets.io/ .

  • Sublime - Một IDE phổ biến khác có thể được tải xuống từ https://www.sublimetext.com/3/ .

Naming conventionlà một tập hợp các quy tắc cần tuân theo cho các số nhận dạng. Nó làm cho mã dễ đọc và dễ hiểu đối với các lập trình viên khác.

Quy ước đặt tên trong Sencha Touch tuân theo quy ước JavaScript tiêu chuẩn, quy ước này không bắt buộc nhưng là một thực tiễn tốt để tuân theo. Nó phải tuân theo cú pháp trường hợp lạc đà để đặt tên cho lớp, phương thức, biến và thuộc tính.

Nếu tên được kết hợp với hai từ, từ thứ hai sẽ bắt đầu bằng một chữ cái viết hoa. Ví dụ: doLayout (), StudentForm, firstName, v.v.

Sr.No. Tên & Quy ước
1

Class Name

Nó phải bắt đầu bằng một chữ cái viết hoa, sau đó là chữ hoa lạc đà. Ví dụ, StudentClass

2

Method Name

Nó phải bắt đầu bằng một chữ thường, tiếp theo là chữ hoa camel. Ví dụ: studentMethod ()

3

Variable Name

Nó phải bắt đầu bằng một chữ thường, tiếp theo là chữ hoa camel. Ví dụ: studentName

4

Constant Name

Nó chỉ được viết hoa. Ví dụ: COUNT, MAX_VALUE

5

Property Name

Nó phải bắt đầu bằng một chữ thường, tiếp theo là chữ hoa camel. Ví dụ: enableColumnResize = true

Lớp dưới cùng của bất kỳ ứng dụng di động nào là Hệ điều hành, trên đó là bất kỳ thứ gì hoặc mọi thứ đều được xây dựng. Sau đó, chúng tôi có các trình duyệt mà chúng tôi sẽ chạy các ứng dụng. Nó có thể là Chrome, Safari, IE bất cứ thứ gì. Lớp trên là tiêu chuẩn W3, tiêu chuẩn chung cho tất cả mọi người. Sencha Touch là viết tắt của hoặc được xây dựng dựa trên tiêu chuẩn W3, không gì khác ngoài HTML5, giúp một ứng dụng tương thích với các trình duyệt khác nhau của các thiết bị khác nhau.

Sencha Touch là sự kết hợp của ba framework - ExtJs, JqTouch và Raphael (vẽ vector). Nó tuân theo kiến ​​trúc MVC. MVC tách mã thành các phần dễ quản lý hơn.

Mặc dù kiến ​​trúc không bắt buộc đối với chương trình, tuy nhiên, cách tốt nhất là tuân theo cấu trúc này để làm cho mã của bạn có thể bảo trì và tổ chức cao.

Cấu trúc dự án với ứng dụng Sencha Touch

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Thư mục ứng dụng Sencha Touch sẽ nằm trong thư mục JavaScript của dự án của bạn.

Ứng dụng sẽ chứa các tệp điều khiển, chế độ xem, mô hình, cửa hàng và tiện ích với app.js.

app.js- Tệp chính từ nơi bắt đầu dòng chương trình. Nó phải được đưa vào tệp HTML chính bằng thẻ <script>. Ứng dụng gọi bộ điều khiển của ứng dụng cho phần còn lại của chức năng.

Controller.js- Đây là tệp điều khiển của kiến ​​trúc Sencha Touch MVC. Điều này chứa tất cả các quyền kiểm soát ứng dụng, trình nghe sự kiện và hầu hết các chức năng của mã. Nó thực hiện các nhiệm vụ sau: định tuyến, trung gian giữa chế độ xem và mô hình, và thực thi các sự kiện.

View.js- Nó chứa phần giao diện của ứng dụng, hiển thị cho người dùng. Sencha Touch sử dụng nhiều giao diện người dùng phong phú khác nhau, có thể mở rộng và tùy chỉnh theo yêu cầu.

Store.js- Nó chứa dữ liệu được lưu trong bộ nhớ cache cục bộ, sẽ được hiển thị trên chế độ xem với sự trợ giúp của các đối tượng mô hình. Store tìm nạp dữ liệu bằng proxy, có đường dẫn được xác định cho các dịch vụ để tìm nạp dữ liệu phụ trợ.

Model.js- Nó chứa các đối tượng liên kết dữ liệu cửa hàng để xem. Nó là đại diện của đối tượng trong thế giới thực, về cơ bản xử lý cơ sở dữ liệu.

Utils.js- Nó không có trong kiến ​​trúc MVC nhưng cách tốt nhất là sử dụng nó để làm cho mã sạch, ít phức tạp và dễ đọc hơn. Chúng tôi có thể viết các phương thức trong tệp này và gọi chúng trong bộ điều khiển hoặc xem trình kết xuất ở bất kỳ đâu cần thiết. Nó cũng hữu ích cho mục đích tái sử dụng mã.

MVC là viết tắt của Model View Controller. Nó là một mô hình kiến ​​trúc phân tách ứng dụng thành các thành phần hợp lý làm cho nó dễ quản lý hơn.

Sơ đồ sau đây cho thấy cách kiến ​​trúc MVC hoạt động:

Controller - Bộ điều khiển kiểm soát toàn bộ ứng dụng, nó thông báo cho chế độ xem nếu mô hình được thay đổi và thực hiện các hành động dựa trên đầu vào của người dùng.

View- Nó chứa phần giao diện của ứng dụng trực quan cho người dùng. Nó thông báo cho bộ điều khiển thay đổi mô hình trên đầu vào của người dùng.

Model- Nó chứa các đối tượng liên kết dữ liệu cửa hàng để xem. Nó là đại diện của đối tượng thế giới thực về cơ bản xử lý cơ sở dữ liệu. Nó cũng thông báo cho bộ điều khiển nếu có bất kỳ thay đổi nào về chế độ xem.

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.

Nhu cầu ngày nay đối với một ứng dụng web là phát triển một ứng dụng nhanh với ít nỗ lực phát triển hơn. Sencha Touch giúp bạn làm điều đó một cách dễ dàng vì nó cung cấp một số thư viện bản dựng để lựa chọn, dựa trên mã phát triển hoặc mã sản xuất cùng với cơ sở để tạo bản dựng tùy chỉnh.

Các thư viện xây dựng Sencha Touch sẽ tải động các lớp. Tải động là viết tắt của các lớp được tải khi được yêu cầu và chỉ những lớp đó mới được đưa vào mà được yêu cầu trong ứng dụng. Điều này làm cho ứng dụng chạy nhanh hơn do số lượng tệp được tải giảm xuống, đồng thời giảm thời gian tải.

Sencha Touch 2.x cung cấp năm thư viện xây dựng sau.

Sr.No. Công trình & Cách sử dụng
1

sencha-touchdebug.js

Bản dựng này được sử dụng trong khi phát triển ứng dụng cục bộ. Nó là một phiên bản không được thống nhất với tất cả các nhận xét và nhật ký gỡ lỗi để dễ dàng gỡ lỗi trong khi phát triển.

2

senchatouch.js

Tập tin này được sử dụng cho mục đích sản xuất. Nó là phiên bản thu nhỏ khi chúng tôi có một bản dựng tùy chỉnh.

3

sencha-touchall.js

Tập tin này được sử dụng cho mục đích sản xuất. Nó là phiên bản thu nhỏ khi chúng tôi không có bản dựng tùy chỉnh.

4

sencha-touchall-debug.js

Tệp này được sử dụng để gỡ lỗi trong sản xuất. Nó không được rút gọn và có tất cả các nhận xét và nhật ký gỡ lỗi.

5

sencha-touchall-compat.js

Bản dựng này được sử dụng để chuyển phiên bản 1.x sang phiên bản 2.x. Nó đưa ra cảnh báo khi mã phiên bản 1.x không tương thích và cần sửa đổi mã.

Với các bản dựng được đề cập ở trên, Sencha Touch cung cấp một cơ sở để tạo các bản dựng tùy chỉnh.

Ưu điểm của việc có một bản dựng tùy chỉnh

Bản dựng tùy chỉnh không tải tất cả các tệp cảm ứng. Nó chỉ tải những tệp mà chúng tôi đang sử dụng trong ứng dụng, điều này làm cho ứng dụng nhanh hơn và dễ bảo trì.

Sencha CMD được sử dụng để tạo một bản dựng tùy chỉnh. Để tạo một bản dựng tùy chỉnh trong Sencha CMD, hãy chuyển đến thư mục chứa tệp ứng dụng và nhập một trong các lệnh sau để tạo một bản dựng.

Sr.No. Lệnh & Cách sử dụng
1

sencha app build native

Xây dựng ứng dụng và chuẩn bị một tệp có tên packager.temp.json mà bạn có thể sử dụng để đóng gói một ứng dụng - packager.temp.json giống như packager.json, nhưng chứa các đường dẫn bổ sung.

2

sencha app build -run native

Xây dựng và tự động đóng gói ứng dụng, đồng thời khởi chạy trình mô phỏng thích hợp.

3

sencha app build package

Tạo ứng dụng với hỗ trợ đóng gói, nhưng không định cấu hình tệp JSON của trình đóng gói. Điều này hữu ích cho các dự án duy trì nhiều tệp packager.json theo cách thủ công.

Sau khi xây dựng thành công, nó sẽ tạo tệp all-class.js mà chúng tôi cần đưa vào index.html của mình để sẵn sàng sản xuất.

Đoạn mã sau cho thấy những thay đổi cần thực hiện đối với mã sẵn sàng sản xuất.

Index.html before building application

<!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-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

Index.html after building the application

<!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.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>

Sencha Touch đi kèm với các cải tiến khác nhau từ phiên bản trước đó.

Sencha Touch 2 đi kèm với bản dựng tương thích ngược, giúp quá trình di chuyển dễ dàng hơn từ phiên bản 1.x sang 2.x.

Bản dựng này chỉ giúp công việc trở nên dễ dàng hơn bằng cách cung cấp cảnh báo và nhật ký bất cứ khi nào xảy ra bất kỳ sự cố di chuyển nào hoặc yêu cầu thay đổi mã, vì vậy người dùng sẽ biết được vị trí cần thay đổi để đảm bảo ứng dụng hoạt động với phiên bản mới nhất.

Di chuyển Sencha Touch 2.x yêu cầu các thay đổi mã sau.

Hệ thống lớp học

Code in Sencha Touch 1.x -

MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
   scroll: 'vertical',
   html: 'Student Panel'
   initComponent: function() {
      Ext.getCmp('StudentIdDiv').update('This is a Student panel');
   }
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.view.StudentPanel', {
   extend: 'Ext.Panel',

   config: {
      scroll: 'vertical',
      html: 'Student Panel'
   },

   initialize: function() {
      Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
   }
});

Bằng cách xem xét cả hai phiên bản, bạn có thể thấy cách tạo lớp là những thay đổi hiện được lấy cảm hứng từ ExtJs chẳng hạn như:

  • Ext.extend được đổi thành Ext.define.

  • Tất cả các tham số cấu hình liên quan đến lớp bây giờ được xác định trong tham số cấu hình.

  • InitComponent được thay đổi thành phương thức khởi tạo ().

  • Trong Sencha Touch 2.x, chúng ta có thể có các hàm setHtml () và getHtml () để cập nhật html hoặc để lấy giá trị.

Kiến trúc MVC

Mã Sencha Touch 1.x là mã mô-đun và dựa trên kiến ​​trúc MVC. Sencha Touch 2.x tuân theo một cú pháp khác để viết mô hình, chế độ xem và bộ điều khiển. Hãy xem sự khác biệt của các tệp mô hình, chế độ xem và bộ điều khiển trong các phiên bản khác nhau.

Mô hình

Code in Sencha Touch 1.x -

Ext.regModel('MyApp.model.StudentModel', {
   fields: [
      {name: 'name',  type: 'string'},
      {name: 'age',   type: 'int'}
   ]
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.model.StudentModel', {
   extend: 'Ext.data.Model', config: {
      fields: [
         {name: 'name',  type: 'string'},
         {name: 'age',   type: 'int'}
      ]
   }
});

Ext.regModel được đổi thành Ext.define mở rộng Ext.data.Model.

Tất cả các trường hiện có trong phần cấu hình trong phiên bản 2.x.

Lượt xem

Code in Sencha Touch 1.x -

Ext.Panel("studentView", {
   items: [{}]
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.view.StudentView', {
   extend: 'Ext.tab.Panel',
   items: [{}]
});

Chế độ xem gần như giống nhau, thay đổi duy nhất là tên chế độ xem tuân theo không gian tên phiên bản 2.x chẳng hạn như Myapp.view.StudentView và mã được viết bằng phương thức Ext.define giống như mô hình.

Bộ điều khiển

Code in Sencha Touch 1.x -

Ext.regController("studentController", {
   someMethod: function() {
      alert('Method is called');
   }
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.controller.studentController', {
   extend: 'Ext.app.Controller', someMethod: function() {
      alert('Method is called');
   }
});

Giống như mô hình trong bộ điều khiển. Ngoài ra, Ext.regController được thay đổi thành Ext.define, mở rộng Ext.app.Controller.

Ứng dụng

Code in Sencha Touch 1.x -

Ext.application({
   name: 'MyApp',
   launch: function() {
      Ext.create('MyApp.view.StudentView');
   }
});

Code in Sencha Touch 2.x -

Ext.application({
   name: 'MyApp',
   models: ['studentModel'],
   controllers: ['studentController'],
   views: ['studentView'],
   stores: ['studentStore'],

   launch: function() {
      Ext.create('MyApp.view.Main');
   }
});

Sự khác biệt chính giữa phiên bản 1.x và phiên bản 2.x là, trong 2.x, chúng tôi khai báo tất cả mô hình, khung nhìn, bộ điều khiển và cửa hàng trong chính ứng dụng.

Sencha Touch có các khái niệm cốt lõi khác nhau như hệ thống lớp, ajax, bộ điều khiển, v.v.

Bảng sau liệt kê liên kết cho các khái niệm cốt lõi của Sencha Touch.

Sr.No. Liên kết khái niệm & mô tả
1 Hệ thống lớp học
2 Các thành phần
3 Bộ điều khiển
4 Hỗ trợ BlackBerry
5 Sử dụng Ajax

Gói dữ liệu trong Sencha Touch chịu trách nhiệm thực hiện bất kỳ loại thao tác dữ liệu nào hoặc lưu trữ hoặc tải dữ liệu.

Các gói dữ liệu có liên quan đến mô hình, cửa hàng và proxy.

Sr.No. Liên kết khái niệm & mô tả
1

Model

Nó là tập hợp dữ liệu và trường mà chúng tôi hiển thị tất cả các giá trị trên giao diện người dùng. Sự miêu tả

2

Store

Nó là một tập hợp các cá thể mô hình về cơ bản lưu trữ dữ liệu cục bộ. Trong cửa hàng, chúng tôi viết tất cả các sự kiện và các cuộc gọi còn lại để lấy dữ liệu. Sự miêu tả

3

Proxy

Về cơ bản, nó chịu trách nhiệm tải dữ liệu trong cửa hàng. Chủ yếu chúng tôi sử dụng proxy ajax để tải dữ liệu lưu trữ. Sự miêu tả

Sencha Touch cung cấp một số chủ đề được sử dụng trong các ứng dụng của bạn. Bạn có thể thêm các chủ đề khác nhau thay cho chủ đề cổ điển và xem sự khác biệt trong kết quả đầu ra dựa trên thiết bị chúng tôi đang sử dụng cho ứng dụng. Điều này được thực hiện đơn giản bằng cách thay thế tệp CSS chủ đề như được giải thích trong ví dụ sau.

Chủ đề máy tính để bàn

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. CSS sau từ ứng dụng được sử dụng cho chủ đề máy tính để bàn.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Để xem hiệu quả, hãy thử chương trình sau:

<!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>
</html>

Điều này sẽ tạo ra kết quả sau:

Chủ đề Windows

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Thêm CSS sau để sử dụng chủ đề Windows.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css

Để xem hiệu quả, hãy thử chương trình sau:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.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>
</html>

Điều này sẽ tạo ra kết quả sau:

Chủ đề iOS

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Thêm CSS sau để sử dụng chủ đề Windows

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css

Để xem hiệu quả, hãy thử chương trình sau:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.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>
</html>

Điều này sẽ tạo ra kết quả sau:

Chủ đề cổ điển iOS

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Thêm CSS sau để sử dụng chủ đề Windows -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css

Để xem hiệu quả, hãy thử chương trình sau:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.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>
</html>

Điều này sẽ tạo ra kết quả sau:

Chủ đề Android

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Thêm CSS sau để sử dụng chủ đề Windows.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css

Để xem hiệu quả, hãy thử chương trình sau:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.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>
</html>

Điều này sẽ tạo ra kết quả sau:

Chủ đề BlackBerry

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Thêm CSS sau để sử dụng chủ đề Windows.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css

Để xem hiệu quả, hãy thử chương trình sau:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.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>
</html>

Điều này sẽ tạo ra kết quả sau:

Trong thế giới công nghệ ngày nay, chúng ta có nhiều thiết bị như di động, máy tính bảng, máy tính để bàn và máy tính xách tay với các kích thước màn hình khác nhau. Do đó, cần phải phát triển các ứng dụng có thể truy cập được từ tất cả các thiết bị với giao diện đẹp. Tuy nhiên, để phát triển các mã khác nhau cho các thiết bị khác nhau là rất tốn thời gian và chi phí.

Sencha Touch giúp chúng tôi về vấn đề này, bằng cách cung cấp tính năng cấu hình thiết bị. Dựa trên cấu hình hoạt động, các phần phụ thuộc khác nhau sẽ được chạy và áp dụng.

Chúng tôi có thể khai báo hồ sơ thiết bị trong khi viết mã ứng dụng. Chúng tôi có thể có nhiều thiết bị như -

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

Sau khi hoàn tất, các cấu hình sẽ được tải dưới dạng:

  • MyApp.profiles.Phone.js
  • MyApp.profiles.Tablet.js

Viết một hồ sơ điện thoại đơn giản

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

Viết một hồ sơ máy tính bảng đơn giản

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

Như chúng ta có thể thấy trong hồ sơ, chúng ta có chức năng isActive xác định xem thiết bị cụ thể có đang hoạt động hay không. Nếu thiết bị đang hoạt động, các phần phụ thuộc tương ứng sẽ được tải và khởi tạo.

Như đã đề cập trong ví dụ trên, nếu chúng ta đang sử dụng thiết bị điện thoại thì hàm isActive của cấu hình điện thoại sẽ trả về true và các phần phụ thuộc liên quan đến thiết bị điện thoại sẽ được tải; tại đây phoneView sẽ được tải. Nếu thiết bị là máy tính bảng thì chức năng isActive của hồ sơ điện thoại sẽ trả về false và chức năng isActive của hồ sơ máy tính bảng sẽ trả về true và tabletView phụ thuộc sẽ được tải.

Quá trình khởi chạy

Một điểm nữa cần lưu ý ở đây là khi chúng ta có hồ sơ trong ứng dụng, thì việc tải và tạo mã ứng dụng sẽ theo thứ tự sau:

  • Bộ điều khiển được khởi tạo trước và mỗi chức năng init của bộ điều khiển sẽ được tải.
  • Chức năng khởi chạy của hồ sơ sẽ được gọi.
  • Chức năng khởi chạy của ứng dụng sẽ được gọi.

Cả chức năng khởi chạy của cấu hình và ứng dụng đều là tùy chọn, vì vậy nếu chúng tôi không xác định bất kỳ chức năng nào trong số chúng thì chúng sẽ không được gọi.

Hãy xem đoạn mã sau để kiểm tra vị trí và cách các hàm khởi chạy và init khác nhau có thể được xác định.

Chức năng init của bộ điều khiển

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

Chức năng khởi chạy của hồ sơ

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

Chức năng khởi chạy ứng dụng

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});

Có một số cách được định nghĩa trong Sencha Touch để khai báo các phần phụ thuộc, một bên trong ứng dụng và một bên trong các lớp.

Chúng ta hãy xem xét các cách khác nhau để xác định các phụ thuộc.

Mức độ phụ thuộc của ứng dụng

Ở đây, chúng tôi khai báo tất cả các phụ thuộc khi chúng tôi tạo Ext.application.

Ext.application({
   name: 'MyApp',
   views: ['StudentsView'],
   models: ['StudentsModel'],
   controllers: ['StudentsController'],
   stores: ['StudentsStore'],
   profiles: ['Phone', 'Tablet']
});

Bây giờ, khi ứng dụng được tải, tất cả các phụ thuộc sẽ được tải cùng một lúc. Đường dẫn của các tệp khác sẽ là:

  • MyApp.views.StudentsView
  • MyApp.models.StudentsModel
  • MyApp.stores.StudentsStore, v.v.

Cách khai báo trên không chỉ tải tệp mà còn quyết định hồ sơ nào sẽ được giữ là hoạt động. Sau khi tải bộ điều khiển, nó đảm bảo khởi tạo nó. Sau khi các cửa hàng được tải, nó khởi tạo chúng và cung cấp một id nếu chưa được cung cấp.

Sự phụ thuộc theo cấu hình cụ thể

Khi chúng ta đang sử dụng hồ sơ trong một ứng dụng, có thể có một vài chức năng chỉ được yêu cầu cho một số hồ sơ cụ thể.

Các phụ thuộc cụ thể của cấu hình được khai báo trong chính cấu hình thay vì khai báo mức ứng dụng.

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile', config: {
      views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
   }
});

Các phụ thuộc được tải bất kể cấu hình đang hoạt động hay không. Tuy nhiên, dựa trên cấu hình hoạt động, quá trình xử lý tiếp theo như khởi tạo bộ điều khiển và các cửa hàng sẽ xảy ra.

Sự phụ thuộc lồng nhau

Khi chúng tôi có ứng dụng lớn hơn, chúng tôi có nhiều bộ điều khiển, mô hình, chế độ xem và cửa hàng.

Luôn luôn tốt để duy trì tính mô-đun trong các ứng dụng lớn hơn. Vì vậy, chúng ta có thể định nghĩa các thư mục con và trong khi khai báo các phụ thuộc, chúng ta có thể sử dụng tên thư mục con để khai báo.

Ext.application({
   name: 'MyApp',
   controllers: ['Controller', 'nested.NewController'],
   views: ['class.Cview', 'SView']
});

Trong trường hợp trên, các tệp sau sẽ được tải:

  • MyApp.controllers.Controller
  • MyApp.controllers.nested.NewController
  • MyApp.Views.Sview
  • MyApp.Views.class.Cview

Sự phụ thuộc bên ngoài

Chúng ta có thể chỉ định các phụ thuộc bên ngoài ứng dụng bằng cách đặt tên đủ điều kiện của các lớp là:

Ext.Loader.setPath({
   'Class': 'Class'
});

Ext.application({
   views: ['Class.view.LoginForm', 'Welcome'],
   controllers: ['Class.controller.Sessions', 'Main'],
   models: ['Class.model.User']
});

Trong trường hợp trên, các tệp sau sẽ được tải:

  • Class/view/LoginForm.js
  • Class/controller/Sessions.js
  • Class/model/User.js
  • app/view/Welcome.js
  • app/controller/Main.js

Nó giúp bạn xác định hệ điều hành bạn đang sử dụng, trình duyệt bạn đang làm việc và những tính năng có sẵn cho môi trường của bạn.

Sencha Touch cung cấp các chức năng khác nhau để lấy thông tin cụ thể về môi trường. Tất cả các phương thức được đề cập bên dưới có thể được kiểm tra, nếu điều kiện là if (Ext.os.is.Windows) {} và dựa trên điều kiện các tác vụ có thể được thực hiện.

Tất cả các phương thức sau đều trả về giá trị Boolean.

Hệ điều hành

Ext.os là một lớp cung cấp cho bạn các phương thức khác nhau để biết chúng tôi đang làm việc trên hệ điều hành nào.

Sr.No Phương pháp & Mô tả
1

Ext.os.is.webOS

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành webos, nếu không nó sẽ trả về false.

2

Ext.os.is.RIMTable

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành RIMTable, nếu không nó sẽ trả về false.

3

Ext.os.is.Linux

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành Linux khác, nó sẽ trả về false.

4

Ext.os.is.Windows

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành windows, nếu không nó sẽ trả về false.

5

Ext.os.is.MacOs

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành Mac khác, nó trả về false.

6

Ext.os.is.BlackBerry

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành BlackBerry khác, nó sẽ trả về false.

7

Ext.os.is.iOS

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành IOS, nếu không nó sẽ trả về false.

số 8

Ext.os.is.Android

Hàm này sẽ trả về true nếu bạn đang sử dụng hệ điều hành Android khác, nó trả về false.

Phát hiện thiết bị

Sr.No Phương pháp & Mô tả
1

Ext.os.is.iPad

Hàm này sẽ trả về true nếu bạn đang sử dụng iPad khác, nó sẽ trả về false.

2

Ext.os.is.iPhone

Hàm này sẽ trả về true nếu bạn đang sử dụng iPhone khác, nó sẽ trả về false.

3

Ext.os.is.iPod

Hàm này sẽ trả về true nếu bạn đang sử dụng iPod khác, nó sẽ trả về false.

Phiên bản hệ điều hành

Sr.No Phương pháp & Mô tả
1

Ext.os.name

Nó trả về tên của hệ điều hành.

2

Ext.os.version.version

Nó cung cấp phiên bản hệ điều hành mà chúng tôi đang sử dụng.

Phát hiện trình duyệt

Sr.No Phương pháp & Mô tả
1

Ext.browser.is.IE

Hàm này trả về true nếu chúng ta đang sử dụng trình duyệt Internet explorer, nếu không hàm này trả về false.

2

Ext.browser.is.FF

Hàm này trả về true nếu chúng ta đang sử dụng trình duyệt FireFox, nếu không nó sẽ trả về false.

3

Ext.browser.is.Chrome

Hàm này trả về true nếu chúng ta đang sử dụng trình duyệt Chrome, nếu không nó sẽ trả về false.

4

Ext.browser.is.Opera

Hàm này trả về true nếu chúng ta đang sử dụng trình duyệt Opera, nếu không nó sẽ trả về false.
5

Ext.browser.is.Safari

Hàm này trả về true nếu chúng ta đang sử dụng trình duyệt Safari, nếu không nó sẽ trả về false.

Chức năng này Ext.browser cung cấp nhiều chức năng khác -

Sr.No Phương pháp & Mô tả
1

Ext.browser.userAgent

Nó trả về userAgent hiện tại.

2

Ext.browser.isSecure

Nó trả về true nếu trang hiện tại đang sử dụng SSL.

3

Ext.browser.isStrict

Nó trả về true nếu trình duyệt ở chế độ nghiêm ngặt.

4

Ext.browser.engineName

Nó trả về tên công cụ trình duyệt (WebKit, Gecko, Presto, Trident và Other).

5

Ext.browser.engineVersion

Nó trả về phiên bản của công cụ trình duyệt.

Đặc trưng

Ext.feature.has là để kiểm tra xem trình duyệt có tính năng sau hay không.

Sr.No Phương pháp & Mô tả
1

Ext.feature.has.Audio

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng thẻ âm thanh của html5.

2

Ext.feature.has.Canvas

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng thẻ canvas của html5.

3

Ext.feature.has.classList

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng classlist của html5 được sử dụng để thêm, xóa và chuyển đổi các lớp css cho phần tử html.

4

Ext.feature.has.Css3dTransforms

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng Css 3d Transform của css3.

5

Ext.feature.has.CssAnimations

Phương thức này trả về true nếu trình duyệt hỗ trợ hoạt ảnh của css3.

6

Ext.feature.has.CssTransforms

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng chuyển đổi Css của css3.

7

Ext.feature.has.CssTransitions

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng chuyển tiếp của css3.

số 8

Ext.feature.has.DeviceMotion

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng chuyển động của thiết bị.

9

Ext.feature.has.Geolocation

Phương thức này trả về true nếu trình duyệt hỗ trợ tính năng Geolocation của html5.

10

Ext.feature.has.History

Phương thức này trả về true nếu trình duyệt Hỗ trợ tính năng lịch sử của html.

11

Ext.feature.has.Orientation

Phương thức này trả về true nếu trình duyệt có thể phát hiện hướng thiết bị.

12

Ext.feature.has.OrientationChange

Phương thức này trả về true nếu trình duyệt có thể phát hiện sự thay đổi trong Hướng của thiết bị.

13

Ext.feature.has.Range

Phạm vi là một loại thẻ đầu vào html cho phần tử thanh trượt phạm vi, vì vậy nếu trình duyệt hỗ trợ thanh trượt, hàm này trả về true.

14

Ext.feature.has.SqlDatabase

Cơ sở dữ liệu web sql là một api trang web để lưu trữ dữ liệu n cơ sở dữ liệu mà chúng ta có thể thực hiện các thao tác truy vấn. Phương thức này trả về true nếu trình duyệt hỗ trợ Cơ sở dữ liệu web Sql.

15

Ext.feature.has.Svg

Svg là viết tắt của Scalable Vector Graphics, phương thức này trả về true nếu trình duyệt hỗ trợ tính năng svg của html 5.

16

Ext.feature.has.Touch

Phương thức này trả về true nếu trình duyệt có tính năng Touch.

17

Ext.feature.has.Video

Phương thức này trả về true nếu trình duyệt hỗ trợ thẻ video html 5.

18

Ext.feature.has.Vml

Vml là viết tắt của ngôn ngữ đánh dấu vectơ, là một ngôn ngữ đánh dấu dựa trên xml. Vì vậy, phương thức này trả về true nếu trình duyệt có hỗ trợ vml.

19

Ext.feature.has.WebSockets

Web socket về cơ bản là một giao thức giao tiếp cho máy tính hỗ trợ hai giao tiếp giữa máy khách và máy chủ. Phương thức này trả về true nếu trình duyệt hỗ trợ WebSockets khác nó trả về false.

Sự kiện là thứ gì đó sẽ được kích hoạt khi có điều gì đó xảy ra với lớp học. Ví dụ: khi một nút được nhấp hoặc trước / sau khi một phần tử được hiển thị.

Phương pháp viết sự kiện

Sau đây là các phương pháp viết sự kiện.

  • Sự kiện tích hợp sử dụng trình nghe.
  • Đính kèm các sự kiện sau
  • Sự kiện tùy chỉnh

Sự kiện tích hợp sử dụng trình nghe

Sencha Touch cung cấp thuộc tính người nghe để viết sự kiện và sự kiện tùy chỉnh trong tệp Sencha Touch.

Trình nghe viết trong Sencha Touch

Chúng tôi sẽ thêm trình lắng nghe trong chính chương trình trước đó bằng cách thêm thuộc tính lắng nghe vào bảng điều khiển, được hiển thị như sau:

<!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.Panel', {
                  html: 'My Panel', fullscreen: true, listeners: {
                     painted: function() {
                        Ext.Msg.alert('I was painted to the screen');
                     }
                  }
               });
            }
         });
      </script> 
   </head>
</html>

Điều này sẽ tạo ra kết quả sau:

Bằng cách này, chúng ta cũng có thể viết nhiều sự kiện trong thuộc tính người nghe.

Nhiều sự kiện trong cùng một người nghe

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });

               myButton.on({
                  tap: function() {
                     var randomWidth = 100 + Math.round(Math.random() * 200);
                     this.setWidth(randomWidth);
                  },
                  widthchange: function(button, newWidth, oldWidth) {
                     alert('My width changed from ' + oldWidth + ' to ' + newWidth);
                  }
               });
            }
         });       
      </script> 
   </head>
</html>

Nó sẽ tạo ra kết quả sau:

Đính kèm sự kiện sau

Trong phương pháp viết sự kiện trước đây, chúng ta đã viết sự kiện trong các trình lắng nghe tại thời điểm tạo các phần tử.

Cách khác để đính kèm các sự kiện như sau:

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });
               
               myButton.on('tap', function() {
                  alert("Event listener attached by .on");
               });
            }
         });
      </script> 
   </head>
</html>

Nó sẽ tạo ra kết quả sau:

Sự kiện tùy chỉnh

Chúng ta có thể viết các sự kiện tùy chỉnh trong Sencha Touch và kích hoạt các sự kiện bằng phương pháp fireEvent. Ví dụ sau giải thích cách viết sự kiện tùy chỉnh.

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: "Just wait 5 seconds",

                  listeners: {
                     myEvent: function(button, points) {
                        alert('myEvent was fired! You score ' + points + ' points');
                     }
                  }
               });

               Ext.defer(function() {
                  var number = Math.ceil(Math.random() * 100);
                  myButton.fireEvent('myEvent', myButton, number);
               }, 5000);
            }
         });
      </script> 
   </head>
</html>

Khi trang được tải và tài liệu đã sẵn sàng, trang giao diện người dùng có nút sẽ xuất hiện và khi chúng tôi kích hoạt một sự kiện sau 5 giây, khi tài liệu đã sẵn sàng, hộp cảnh báo sẽ xuất hiện sau 5 giây.

Ở đây chúng tôi đã viết sự kiện tùy chỉnh 'myEvent' và chúng tôi đang kích hoạt các sự kiện dưới dạng button.fireEvent (eventName);

Bố cục là cách các phần tử được sắp xếp trong một vùng chứa. Đó có thể là chiều ngang, chiều dọc hoặc bất kỳ hình thức nào khác. Sencha Touch có các bố cục khác nhau được xác định trong thư viện của nó mặc dù chúng tôi luôn có thể viết các bố cục tùy chỉnh.

Sr.No. Bố cục & Mô tả
1 hBox

Bố cục này cho phép phần tử được phân phối theo chiều ngang.

2 vBox

Bố cục này cho phép phần tử được phân phối theo chiều dọc. Đây là một trong những cách bố trí thường được sử dụng.

3 Phù hợp

Trong bố cục này, vùng chứa được lấp đầy bằng một bảng điều khiển duy nhất và khi không có yêu cầu cụ thể nào liên quan đến bố cục, thì bố cục này được sử dụng.

4 Thẻ (TabPanel)

Bố cục này sắp xếp các thành phần khác nhau theo kiểu tab. Các tab sẽ được hiển thị trên đầu vùng chứa. Mỗi khi chỉ có một tab được hiển thị và mỗi tab được coi là một thành phần khác nhau.

Sencha Touch đi kèm với hỗ trợ lịch sử đầy đủ và các tiện ích liên kết sâu.

Nó có chức năng nút quay lại đơn giản nhất, giúp người dùng điều hướng giữa các màn hình mà không cần làm mới trang hoặc ứng dụng.

Nó cũng cung cấp chức năng định tuyến, giúp người dùng điều hướng đến bất kỳ URL nào. Dựa trên URL được cung cấp trong cửa sổ trình duyệt, nó gọi các chức năng cụ thể để thực hiện một tác vụ cụ thể.

Hãy xem ví dụ sau để biết chức năng của nút quay lại.

Ví dụ này hiển thị danh sách lồng nhau không là gì ngoài danh sách bên trong danh sách, vì vậy khi bạn nhấp vào bất kỳ mục nào trong danh sách, nó sẽ mở ra một danh sách khác và nút quay lại xuất hiện trên đầu màn hình.

Để có cơ sở mã hoàn chỉnh, bạn có thể kiểm tra Danh sách lồng nhau dưới phần xem thành phần.

định tuyến

Ví dụ đơn giản nhất về các tuyến đường

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

Trong ví dụ trên nếu URL của trình duyệt là https://myApp.com/#login thì hàm showLogin sẽ được gọi.

Chúng tôi có thể cung cấp các tham số trong URL và dựa trên tham số cụ thể mà hàm có thể được gọi. Ví dụ: Nếu URL là https://myApp.com/#user/3 thì một hàm userId khác sẽ được gọi và ID cụ thể có thể được sử dụng bên trong các hàm.

Định tuyến trước

Đôi khi chúng ta có các tham số trước bao gồm dấu phẩy, khoảng trống và các ký tự đặc biệt, v.v. cho điều này nếu chúng ta sử dụng cách viết tuyến đường ở trên thì nó sẽ không hoạt động. Để giải quyết vấn đề này, Sencha touch cung cấp định tuyến có điều kiện, nơi chúng tôi có thể chỉ định điều kiện của loại dữ liệu mà tham số sẽ chấp nhận.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

Vì vậy, như trong ví dụ trên, chúng tôi đã đưa ra regex trong điều kiện nêu rõ loại dữ liệu nào nên được phép làm tham số URL.

Chia sẻ cùng một URL trên các cấu hình thiết bị khác nhau

Vì Sencha touch cung cấp cấu hình thiết bị nên cùng một mã ứng dụng có thể được sử dụng trên nhiều thiết bị, có thể có các cấu hình khác nhau có thể có chức năng khác nhau cho cùng một URL.

Để giải quyết vấn đề này, Sencha touch cho phép chúng ta tự do viết định tuyến trong bộ điều khiển chính và chức năng được gọi sẽ được ghi trong tất cả các cấu hình với các cấu hình cụ thể của chúng.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

Như ví dụ cho thấy chúng ta có một bộ điều khiển chính có chức năng showLogin và chúng ta có hai cấu hình khác nhau (Điện thoại / Máy tính bảng). Cả hai cấu hình đều có chức năng showLogin với mã khác nhau cụ thể cho cấu hình.

Bằng cách này, chúng tôi có thể chia sẻ cùng một URL trên nhiều thiết bị cấu hình với các chức năng cụ thể của chúng.

Sencha Touch cung cấp cấu hình XHR2 để hoạt động với sự phát triển của Ajax và Ajax2.

XHR2 là xmlHttpRequest cấp 2, được sử dụng để yêu cầu dữ liệu từ máy chủ. Đối với bất kỳ ứng dụng web nào, dữ liệu nằm tại máy chủ và khi trang được tải, dữ liệu sẽ được truy cập từ máy chủ với sự trợ giúp của các yêu cầu Ajax.

XHR2 trong Sencha Touch cung cấp tính năng thanh tiến trình, hiển thị cho người dùng lượng dữ liệu được truyền cho một yêu cầu cụ thể. XHR2 mới được thêm vào nên chúng ta cần kiểm tra xem trình duyệt có hỗ trợ hay không.

Sau đây là chức năng để kiểm tra xem trình duyệt có hỗ trợ XHR2 hay không -

if (Ext.feature.has.XHR2) {
   // Here we can write functionality to work if browser supports XHR2 
}

Chúng tôi thậm chí có thể kiểm tra xem tải lên liên tục với XHR2 có được trình duyệt hỗ trợ hay không.

if (Ext.feature.has.XHRUploadProgress) {
   // Here we can write functionality to work if browser supports progressive uploads
}

Nhiều tính năng XHR2 mới khác nhau được bao gồm trong Sencha Touch.

Sr.No Tính năng & Mô tả
1

XHR2: true

Điều này được sử dụng để bật và tắt chức năng XHR2 trong ứng dụng.

2

Ext.field.File

Trường tệp mới được thêm vào để cung cấp thêm tính xác thực về loại trường.

3

Ext.field.FileInput

Điều này để cung cấp FileInput.

4

Ext.progressIndicator

Điều này là để cung cấp phần trăm dữ liệu chính xác được truyền về thanh tiến trình.

5

xtype: fileinput

Để tạo thể hiện của lớp fileInput.

6

xtype: filefield

Để tạo thể hiện của lớp tệp.

7

responseType : value

Tham số này cho phép các loại phản hồi khác nhau như văn bản, tài liệu, đốm màu, v.v.

Sau đây là các ví dụ để gửi yêu cầu ajax đơn giản có và không có tham số và tải tệp lên bằng ajax.

Yêu cầu Ajax đơn giản không có tham số - Thành công

<!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.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Ví dụ trên cho thấy lệnh gọi ajax thành công vì URL được đề cập là đúng. Trong ví dụ này, chúng tôi không chuyển bất kỳ tham số nào, đó chỉ là một yêu cầu ajax đơn giản truy cập vào URL được đề cập.

Nếu bạn đang sử dụng trình duyệt chrome trong công cụ dành cho nhà phát triển, hãy điều hướng đến phần mạng, bạn có thể xem yêu cầu đang được gửi và phản hồi mà chúng tôi nhận được.

Yêu cầu Ajax đơn giản không có tham số - Không thành công

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Trong ví dụ trên, chỉ để hiển thị cách hoạt động của lỗi ajax, chúng tôi đã đề cập đến URL sai. So sánh ví dụ này và ví dụ trước, bạn sẽ tìm thấy sự khác biệt.

Gửi tham số trong yêu cầu Ajax

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

               // Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });      
      </script>
   </head>
   <body>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Trong ví dụ này, chúng ta đang truyền các tham số với ajax bằng cách sử dụng thuộc tính dữ liệu của lệnh gọi ajax.

Tải lên tệp bằng Ajax

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Ví dụ này cho thấy cách tải dữ liệu lên bằng lệnh gọi ajax. Trong ví dụ này, chúng tôi đang sử dụng chỉ báo trên thanh tiến trình để hiển thị tiến trình trong khi tải tệp lên.

Sencha Touch cung cấp các thành phần giao diện người dùng khác nhau, có thể tùy chỉnh theo yêu cầu.

Sr.N0. Thành phần & Mô tả
1 Băng chuyền

Thành phần giao diện người dùng này được sử dụng để hiển thị Băng chuyền.

2 Danh sách

Thành phần giao diện người dùng này được sử dụng để hiển thị danh sách.

3 Danh sách lồng nhau

Thành phần giao diện người dùng này được sử dụng để hiển thị danh sách lồng nhau.

4 Hình thức

Thành phần giao diện người dùng này được sử dụng để hiển thị các Biểu mẫu.

5 Đồ thị

Thành phần giao diện người dùng này được sử dụng để hiển thị các loại biểu đồ khác nhau.

6 Thành phần nổi

Thành phần giao diện người dùng này được sử dụng để hiển thị thành phần nổi.

7 Bảng điều khiển tab

Thành phần giao diện người dùng này được sử dụng để hiển thị chế độ xem bảng Tab.

số 8 Chế độ xem điều hướng

Thành phần giao diện người dùng này được sử dụng để hiển thị chế độ xem điều hướng.

9 Menu hành động

Thành phần giao diện người dùng này được sử dụng để hiển thị thanh menu hành động.

10 Xem dữ liệu

Thành phần giao diện người dùng này được sử dụng để hiển thị chế độ xem dữ liệu.

11 Bản đồ

Thành phần giao diện người dùng này được sử dụng để hiển thị bản đồ google.

Sencha Touch đi kèm với các tính năng đóng gói gốc.

Sau đây là các liên kết cho các khái niệm bao bì gốc của Sencha Touch.

Sr.No. Liên kết khái niệm & mô tả
1 Cấp phép iOS gốc
2 API gốc

Phương pháp hay nhất về JavaScript cơ bản

Một thực tiễn tốt là giữ tất cả mã liên quan đến JavaScript trong một tách biệt js (external JS) thay vì viết nó trong <script> dưới phần đầu hoặc JavaScript nội dòng trong nội dung tài liệu.

Luôn thực hiện kiểm tra null trước khi phần tử được sử dụng trong logic tiếp theo.

Luôn tuân theo quy ước đặt tên vì nó làm cho mã dễ hiểu đối với bất kỳ lập trình viên nào khác.

Để làm cho mã dễ hiểu, luôn được ưu tiên viết bình luận cho các phương thức JS với logic rõ ràng đằng sau những gì một hàm thực hiện.

Phương pháp hay nhất dành riêng cho Sencha Touch

Sử dụng cấu trúc thư mục được đề xuất của Sencha Touch, điều này sẽ hữu ích trong quá trình nén hoặc thu nhỏ JS.

Bạn nên sử dụng trình lắng nghe (onclick / onblur, v.v.) trong trình điều khiển thay vì viết nó trong chính trang html.

Không tạo phiên bản cửa hàng, khi cửa hàng đang được gọi từ dạng xem.

Khi chúng tôi tạo một phiên bản của một cửa hàng, chúng tôi nên phá hủy nó, vì nó ảnh hưởng đến hiệu suất.

Trong khi sử dụng Sencha Touch, không chỉ định bất kỳ tệp JavaScript đơn giản nào khác. Sử dụng tất cả các chức năng từ các lớp Ext (được đề cập trong bộ điều khiển hoặc utils).

Khi ánh xạ mô hình và tên giống nhau, thì không chỉ định ánh xạ. Chỉ có tên mới giải quyết được mục đích.

Không sử dụng các thuộc tính không cần thiết trong chế độ xem. Chỉ sử dụng thuộc tính được yêu cầu và nó có giá trị khác với giá trị mặc định.