ExtJS:. Xtype tốt cho

Question

tôi thấy có rất nhiều của các ví dụ trong ExtJS nơi thay vì thực sự tạo các đối tượng ExtJS, một đối tượng theo nghĩa đen với một tài sản xtype được thông qua tại

là gì này tốt là gì? Trường hợp là đạt được hiệu suất (nếu đó là lý do) nếu đối tượng sẽ được tạo ra anyway?

Answer 1

xtype là một cách viết tắt để xác định các thành phần cụ thể là: 'bảng' = Ext.Panel, 'textfield' = Ext.form.TextField, v.v. Khi bạn tạo một trang hoặc một biểu mẫu, bạn có thể sử dụng các xtypes này chứ không phải là các đối tượng khởi tạo. Ví dụ,

items: [{ 
    xtype: 'textfield', 
    autoWidth: true, 
    fieldLabel: 'something' 
}] 

Hơn nữa, tạo ra các trang theo cách này cho phép ExtJS to render lazily the page. Đây là nơi bạn thấy "hiệu suất đạt được". Thay vì tạo một số lượng lớn các thành phần khi ứng dụng tải, ExtJS hiển thị các thành phần khi người dùng cần xem chúng. Không phải là một vấn đề lớn nếu bạn có một trang, nhưng nếu bạn khai thác tab hoặc accordion, nhiều trang ban đầu bị ẩn và do đó ứng dụng sẽ tải nhanh hơn.

Ngoài ra, bạn có thể tạo và đăng ký thành phần mới tạo xtypes bạn chọn. ExtJS sẽ làm tương tự các thành phần của bạn một cách lười biếng.

Bạn cũng có thể truy xuất các thành phần theo ID. Vì thành phần của bạn (cũng như các thành phần ExtJS) có thể cung cấp một loạt các hành vi tốt đẹp, đôi khi rất thuận tiện để tìm kiếm và truy xuất một thành phần thay vì một phần tử hoặc nút DOM đơn giản.

Trong ngắn hạn, xtypes xác định các thành phần và thành phần là một khía cạnh quan trọng của ExtJS.

Answer 2

xtypes in ext không dành cho hiệu suất. Nó là dễ dàng để mã. Với sự giúp đỡ của mã xtype trở nên ngắn hơn, dễ đọc và dễ hiểu, Đặc biệt nếu bạn đang tạo ra một Ext.form.FormPanel và nó có nhiều textareas, datefields, combo và vv ... Ví dụ: nó rất hữu ích khi mọi trường con của biểu mẫu phải có định dạng như 'dmY', bạn không cần phải viết định dạng riêng: 'dmY' thành mọi trường ngày tháng, bạn chỉ cần viết để định cấu hình mặc định đối tượng cấu hình: {format: 'dmY'} ... có nhiều trường hợp khi xtype shorters mã ...

Tóm lại: đó là để dễ dàng mã ...

Answer 3

Tôi đã hỏi cùng câu hỏi với Joe, nhưng tôi đã tìm thấy câu trả lời. Nếu bạn sử dụng xtype, một cách tiếp cận cũng chỉ định một ItemID trong cùng một đối tượng:

{ ItemID: 'myObject', xtype: 'myClass' ... }

Sau đó, bạn có thể tìm thấy nó với 'getComponent()', như trong

this.getComponent('myObject'); 

Answer 4

Một xtype đơn giản là tên được đặt để đại diện cho một lớp. Nó là một đối tượng định nghĩa mà không cần phải được khởi tạo khi được sử dụng trong bất kỳ phần nào của ứng dụng.

Khi đăng ký xtype, chúng tôi chỉ cần sử dụng cú pháp này: Ext.reg (,). Nhưng, chúng tôi không sử dụng từ khóa 'mới' với tên lớp vì Component Mgr sẽ tự động tạo cá thể của lớp này chỉ khi cần thiết ví dụ. để trả lời một sự kiện như nhấp chuột.

Chúng tôi không cần lấy một cá thể thủ công vì sau khi đăng ký xtype, 'Component Mgr' sẽ tự động tạo một cá thể cho lớp được chỉ định bởi xtype đó nếu nó được sử dụng ở bất kỳ đâu trong ứng dụng hoặc đơn giản là don không khởi tạo lớp đó nếu không được sử dụng ở nơi khác. Component Mgr chạy mã này:

create : function(config, defaultType){ 
    return new types[config.xtype || defaultType](config); 
} 

xtype không khởi tạo lớp khi Ext.Ready chạy. Nhưng, Ext.Container mới() sẽ tạo ra tất cả các cá thể khi Ext.Ready chạy. Vì vậy, sử dụng xtype là thông minh cho các ứng dụng lớn để loại bỏ các đối tượng rác.

Answer 5

Tôi mới sử dụng Sencha/Ext JS nhưng tôi nghĩ tại thời điểm này khái niệm kỳ lạ về việc có chuỗi định danh viết tắt cho chỉ các thành phần giao diện người dùng phải thỏa mãn người dùng cũ.

Nhìn vào "Danh sách xtypes" ở đây: http://docs.sencha.com/touch/2-0/#!/guide/components

Có bất kỳ lý do tốt để sử dụng một định danh chuỗi tương tự như-nhưng-không-khá-the-giống như tên "class" như định nghĩa viết tắt định danh? Tôi không nghĩ vậy.

Kiểm tra các mẫu sau đây của một số xtype để ánh xạ tên lớp cho Sencha liên lạc:

• video - Ext.Video
  Ok này loại có ý nghĩa - phiên bản chữ thường của tên 'lớp'
• carousel - Ext.carousel.Carousel
  Cùng mẫu ở đây
• carouselindicator - Ext.carousel.Indicator
  Um, ok - chúng tôi sẽ bao gồm một gói quá
• navigationview - Ext.navigation.View
  Và một lần nữa ở đây
• datepicker - Ext.picker.Date
  Ok, wtf?

Một số trong những lập luận trên cho xtype là rằng nó cho phép instantiation chậm của các thành phần. Tôi nghĩ rằng điều đó hoàn toàn không liên quan - điều cho phép instantiation hoãn lại là Sencha/Ext JS hỗ trợ đặc tả của một chuỗi định danh thay cho một thành phần instantiated trong một hệ thống phân cấp khung nhìn.

Ánh xạ của một chuỗi cụ thể đến một thành phần cụ thể có thể được khởi tạo sau là hoàn toàn tùy ý - và trong trường hợp của Sencha/Ext JS, thật không may (xem ví dụ ở trên).

Ít nhất chỉ cần làm theo một mẫu hợp lý - ví dụ tại sao không thể là Ext.Label có "xtype" của Label? Quá đơn giản? Trong thực tế tôi biết tại sao - đó là bởi vì họ đã làm cho tên xtype đọc tốt - có rất nhiều tên lớp lặp đi lặp lại sẽ không hoạt động (Ext.Panel và Ext.tab.Panel), và pickerDate sẽ chỉ âm thanh ngu ngốc.

Nhưng tôi vẫn không thích nó - đó là một phím tắt không nhất quán kỳ quặc mà làm xáo trộn nhiều hơn nó giúp.

Answer 6

Nếu bạn khai báo một lớp và đặt cho nó một xtype, bạn có thể truy vấn nó sau này với Ext.ComponentQuery.query()

Ví dụ:

Ext.create('MyApp.view.MyButton', { 
    xtype: 'mybutton', 
    ..... 
}); 

Sau đó trong mã của bạn, nếu bạn làm:

var buttonArray = Ext.ComponentQuery.query('mybutton'); 

sau đó buttonArray sẽ chứa một mảng các thành phần của loại lớp đó. Nếu bạn tạo thành phần nội tuyến, truy vấn thành phần của bạn sẽ phức tạp hơn.

Một ưu điểm khác của xtypes là nếu bạn di chuyển các lớp xung quanh (giả sử, bạn thêm một thư mục con khác trong "view": MyApp.view.button.MyButton), thì truy vấn thành phần của bạn vẫn có thể giữ nguyên, vì xtype của bạn không thay đổi. Khi dự án của bạn trở nên lớn, bạn sẽ bắt đầu tạo các thư mục con và di chuyển các lớp xung quanh.