Ext.js - Câu hỏi và câu trả lời

Ext JS là viết tắt của JavaScript mở rộng. Nó là một khung JavaScript để phát triển các ứng dụng máy tính để bàn dựa trên web UI phong phú.

Nó là một sản phẩm Sencha được mở rộng từ YUI (giao diện người dùng Yahoo).

Đây là các tệp chính cần đưa vào trang HTML để chạy mã Ext JS -

• Ext-all.js
• Ext-all.css

• Các tiện ích giao diện người dùng có thể tùy chỉnh với bộ sưu tập giao diện người dùng phong phú như Lưới, lưới trục, biểu mẫu, biểu đồ, cây.
• 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 trình duyệt, thiết bị và kích thước màn hình.
• Gói dữ liệu nâng cao tách các tiện ích giao diện người dùng khỏi lớp dữ liệu. Gói dữ liệu cho phép thu thập dữ liệu phía máy khách bằng cách sử dụng các mô hình chức năng cao cho phép các tính năng như sắp xếp và lọc.
• Nó là giao thức bất khả tri và có thể truy cập dữ liệu từ bất kỳ nguồn back-end nào.
• Các chủ đề có thể tùy chỉnh Các tiện ích Ext JS có sẵn trong nhiều chủ đề ngoại vi phù hợp trên các nền tảng.

• Hợp lý hóa việc phát triển đa nền tảng trên máy tính để bàn, máy tính bảng và điện thoại thông minh - cho cả trình duyệt hiện đại và cũ.

• Tăng năng suất của các nhóm phát triển bằng cách tích hợp vào môi trường phát triển doanh nghiệp thông qua các plugin IDE.

• Giảm chi phí phát triển ứng dụng web.

• Trao quyền cho các nhóm tạo ứng dụng với trải nghiệm người dùng hấp dẫn.

• Nó có một tập hợp các widget để làm cho giao diện người dùng trở nên mạnh mẽ và dễ dàng.

• Nó tuân theo kiến ​​trúc MVC nên mã rất dễ đọc.

• Kích thước của thư viện lớn khoảng 500 KB khiến thời gian tải ban đầu nhiều hơn và làm cho ứng dụng chậm.

• HTML chứa đầy các thẻ <DIV> làm cho nó phức tạp và khó gỡ lỗi.

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

• Đôi khi để tải những thứ thậm chí đơn giản đòi hỏi vài dòng mã hóa đơn giản hơn trong html hoặc Jquery thuần túy.

• Cần nhà phát triển khá kinh nghiệm để phát triển các ứng dụng Ext JS.

Ext JS hỗ trợ khả năng tương thích nhiều trình duyệt, nó hỗ trợ tất cả các trình duyệt chính như -

• IE 6 trở lên
• Firefox 3.6 trở lên
• Chrome10 trở lên
• Safari 4 trở lên
• Opera 11 trở lên

Ext JS 4+ hỗ trợ kiến ​​trúc MVC (Model view controller). Từ Ext JS 5, nó cũng bắt đầu hỗ trợ MVVM (Model View Viewmodel).

Ext JS 6 là phiên bản mới nhất của Ext JS có lợi ích chính là nó có thể được sử dụng cho cả máy tính để bàn và cũng như các ứng dụng di động. Về cơ bản nó là sự hợp nhất của Ext JS (ứng dụng máy tính để bàn) và Sencha touch (ứng dụng di động).

Ext JS là một khung công tác JavaScript, vì vậy để bắt đầu sử dụng nó, bạn nên có kiến ​​thức trước về HTML và JS (không phải cấp chuyên gia nhưng phải có hiểu biết cơ bản). Sau đó cần hiểu cơ bản nên cho thời gian và học dần dần.

Cả hai framework đều khá khác nhau, chúng ta có thể so sánh Ext JS và jQuery UI vì Ext JS là framework phong phú về giao diện người dùng chính thức. Nhưng Ext JS vẫn có nhiều thành phần hơn sau đó là jQuery UI.

Ext JS 1.1

Phiên bản đầu tiên của Ext JS được phát triển bởi Jack Slocum vào năm 2006. Nó là một tập hợp các lớp tiện ích là một phần mở rộng của YUI. Ông đặt tên thư viện là YUI-ext.

Ext JS 2.0

Ext JS phiên bản 2.0 được phát hành vào năm 2007. Phiên bản này có tài liệu API mới cho Ứng dụng máy tính để bàn với các tính năng hạn chế. Phiên bản này không có khả năng tương thích ngược với phiên bản Ext JS trước.

Ext JS 3.0

Ext JS phiên bản 3.0 được phát hành vào năm 2009. Phiên bản này đã bổ sung các tính năng mới như xem biểu đồ và danh sách nhưng phải trả giá bằng tốc độ. Nó tương thích ngược với phiên bản 2.0.

Ext JS 4.0

Sau khi phát hành Ext JS 3, các nhà phát triển của Ext JS đã gặp phải thách thức lớn là tăng tốc độ. Ext JS phiên bản 4.0 được phát hành vào năm 2011. Nó có cấu trúc được sửa đổi hoàn chỉnh, theo sau là kiến ​​trúc MVC và một ứng dụng nhanh chóng.

Ext JS 5.0

Ext JS phiên bản 5.0 được phát hành vào năm 2014. Thay đổi lớn trong bản phát hành này là thay đổi kiến ​​trúc MVC thành kiến ​​trúc MVVM. Nó bao gồm khả năng xây dựng ứng dụng máy tính để bàn trên các thiết bị hỗ trợ cảm ứng, liên kết dữ liệu hai chiều, bố cục đáp ứng và nhiều tính năng khác.

Ext JS 6.0

Ext JS 6 hợp nhất khung Ext JS (cho ứng dụng máy tính để bàn) và sencha touch (cho ứng dụng di động).

Ext JS có các thành phần giao diện người dùng khác nhau, một số thành phần được sử dụng chính là:

• Grid
• Form
• Hộp tin nhắn
• Thanh tiến trình
• Mẹo dụng cụ
• Window
• Trình chỉnh sửa HTML
• Charts

xType xác định loại thành phần Ext JS UI, được xác định trong quá trình kết xuất thành phần. Ví dụ: Trường văn bản, Số, nút, v.v.

Đây là loại xác nhận có thể được tùy chỉnh dễ dàng. Một số vType được cung cấp bởi Ext JS là -

alphanumText - Giá trị này trả về false nếu văn bản được nhập có bất kỳ ký hiệu nào khác với giá trị chữ cái hoặc số.

emailText - Điều này trả về false, nếu văn bản không phải là địa chỉ email hợp lệ.

Có Ext JS có thể được tích hợp với Ajax. Thực hiện như: giả sử trên một số hộp văn bản sau khi làm mờ, nó phải xác thực dữ liệu từ máy chủ để chúng ta có thể có lệnh gọi Ajax onblur / onchange tới id hộp văn bản để kiểm tra xem dữ liệu được nhập vào hộp văn bản có trong máy chủ / cơ sở dữ liệu hay không .

Có Ext JS có thể được tích hợp với các khuôn khổ phía máy chủ khác như Java, .net, Ruby on rails, PHP, ColdFusion, v.v.

Ext JS có thể được triển khai trên bất kỳ môi trường phát triển tích hợp phổ biến nào (IDE) như Eclipse, Aptana, Sublime, Webstrom, v.v.

Đây là một số cách để truy cập các phần tử DOM trong Ext JS -

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

Kiến trúc MVVM là Model View Viewmodel. Trong bộ điều khiển kiến ​​trúc MVVM của MVC được thay thế bằng ViewModel.

ViewModel- Về cơ bản, nó điều trị những thay đổi giữa chế độ xem và mô hình. Nó liên kết dữ liệu từ mô hình sang chế độ xem. Đồng thời, nó không có bất kỳ tương tác trực tiếp nào với view nó chỉ có kiến ​​thức về mô hình.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady () là phương thức đầu tiên được gọi khi DOM được tải đầy đủ để bất kỳ phần tử nào bạn muốn tham chiếu sẽ có sẵn khi tập lệnh chạy.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Các loại hộp cảnh báo khác nhau trong Ext JS là:

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.promt();
• Ext.MessageBox.show();

Các lớp cơ sở cho Store là Ext.data.Store

Đối với mô hình là Ext.data.Model

Đối với Bộ điều khiển là Ext.app.controller

Đây là những cách khác nhau để xử lý sự kiện -

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

Store.getCount() - Đối với các bản ghi được lưu trong bộ nhớ cache

Store.getTotalCount() - Tổng số không có bản ghi nào trong DB.

Phương thức Store.getModifiedRecords () được sử dụng để lấy các bản ghi đã sửa đổi.

Phương thức Store.commitChanges () để cập nhật các thay đổi của cửa hàng.

Nếu chúng ta có lưới Id: Ext.getCmp ('gridId'). GetStore (). GetAt (index);

Nếu chúng ta có Id cửa hàng: Ext.getStore ('storeId'). GetAt (index);

Store.load ();

• Lớp cơ sở cho Grid - Ext.grid.GridPanel
• Đối với biểu mẫu - Ext.form.Panel
• Đối với bảng điều khiển - Ext.panel.Panel
• Đối với biểu đồ - Ext.chart.Chart
• Đối với cây - Ext.tree.Panel

Các loại bố cục khác nhau là -

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

Điều này có thể được thực hiện bằng cách sử dụng pagingToolbar () as -

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Mặt nạ tải được sử dụng để ngăn chặn bất kỳ hoạt động nào khác bằng cách hiển thị tải (hoặc Thông báo tùy chỉnh) cho người dùng cho đến khi dữ liệu được hiển thị dưới dạng lưới. Loadmask: true; là thuộc tính để hiển thị mặt nạ tải trong khi dữ liệu được hiển thị vào lưới.

Trình kết xuất được sử dụng khi chúng ta muốn thao tác dữ liệu mà chúng ta nhận được từ cửa hàng để hiển thị dữ liệu được thao tác dựa trên một số tiêu chí. Nó là một thuộc tính cột có thể được sử dụng như:

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). GetValue ();

Ẩn: true;

Có thể sắp xếp: đúng; mặc định là true.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 có gói bộ công cụ mà nó có thể bao gồm các yếu tố trực quan của cả hai khuôn khổ (Ext JS và Sencha Touch).

Nó có thể được thêm vào là -

'bộ công cụ': 'cổ điển', // hoặc 'hiện đại'

Nếu bộ công cụ là cổ điển, nó bao gồm khung ứng dụng máy tính để bàn Ext JS.

Và nếu bộ công cụ hiện đại thì nó bao gồm khung ứng dụng di động sencha touch.