Thực tiễn tốt nhất liên quan đến initComponent() trong Ext.define()

Question

Tôi đang viết tất cả các thành phần của mình trong thời trang MVC mới của ExtJS sử dụng Ext.define().

Tôi gặp khó khăn trong việc xác định thuộc tính bên trong của initComponent() hoặc đơn giản là đặt chúng như property: 42,.

Có thực tiễn tốt nhất được chấp nhận rộng rãi không?

Tôi đang kinh ngạc khi sử dụng initComponent() chỉ khi cần thiết (ví dụ: khi tôi muốn điều gì đó năng động hoặc đặt phạm vi) giữ chức năng ngắn hơn và phụ tùng cho tôi một số xấu xí this. s và luôn sử dụng không bao giờ phải di chuyển các tài sản cũ sang initComponent() chỉ vì tôi muốn làm cho nó trở nên năng động hơn.

Thật không may, tài liệu của Sencha không nói nhiều về điều đó và các ví dụ có sẵn dường như làm như họ muốn.

Answer 1

thực hành cá nhân, tôi sẽ khai báo các biến trong lĩnh vực bất động sản khi các biến

• xác định tầm quan trọng, giống như x, y, width, height
• biến đang chờ để được ghi đè, hoặc tùy biến , như title, saveBtnTxt, url, fields, iconCls
• một số hằng số, mà sẽ có tiền tố đặc biệt như vậy sẽ không được ghi đè quá dễ dàng

Sau đó, tôi sẽ tuyên bố items, listeners, this.on, Ext.apply(me, {..}) hoặc bất cứ điều gì mà đòi hỏi phạm vi của obj (this, me), ngồi bên trong initComponent của tôi. Hoặc những thứ cần được sửa đổi/ghi đè trước khi mọi thứ được thiết lập để người dùng sẽ không phá vỡ thành phần của tôi bằng cách ghi đè một số biến quan trọng.

Tất nhiên, đó sẽ là hướng dẫn của tôi. 2 cent

EDIT

Về xấu xí this, tôi đã sử dụng các biến me dụng rộng rãi trong ứng dụng của tôi, và có vẻ sạch hơn rất nhiều so với this. Nó giúp tôi thay đổi phạm vi ít thường xuyên hơn.

Answer 2

Tôi không nhận được câu hỏi của bạn chính xác nhưng điều này có thể hữu ích cho bạn.

Ext.define('My.Group', { 
// extend: 'Ext.form.FieldSet', 
xtype : 'fieldset', 
config : { 
    title : 'Group' + i.toString(), 
    id : '_group-' + i.toString() 

}, 
constructor : function(config) { 
    this.initConfig(config); 

    return this; 
},  
collapsible: true, 
autoScroll:true, 
..... 
}); 

bạn có thể sử dụng như sau.

handler : function() {      
     i = i + 1; 
     var group = new My.Group({ 
      title : 'Group' + i.toString(), 
      id : '_group-' + i.toString() 
     }); 
     // console.log(this); 
     // console.log(group); 
     Ext.getCmp('panelid').insert(i, group); 
     Ext.getCmp('panelid').doLayout(); 
    } 

Answer 3

Tôi muốn thêm vào câu trả lời của Lionel rằng tốt hơn là khai báo bất kỳ cấu hình không không nguyên thủy nào trong initComponent. (Bởi nguyên thủy tôi có nghĩa là chuỗi, boolean và số). Mảng và đối tượng đi vào initComponent.
Vì vậy, định nghĩa nên xem xét như thế này:

Ext.define('My.NewClass', { 
    extend: 'OldClass', 
    // here all primitive configs: 
    cls: 'x-my-cls', 
    collapsible: true, 
    region: 'west', 
    // and so on ... 

    initComponent: function() { 
    // here you declare non-primitive configs: 
    this.tbar = [/* blah-blah */]; 
    this.columns = [/* blah-blah */]; 
    this.viewConfig = {/* blah-blah */}; 
    // and so on ... 

    this.callParent(arguments); 
    } 

    // other stuff 
} 

Lý do tại sao bạn nên đặt tất cả configs phi nguyên thủy vào initComponent là khác configs của tất cả các trường sẽ giới thiệu cho các đối tượng tương tự. Ví dụ: nếu bạn định nghĩa NewClass như:

Ext.define('My.NewClass', { 
    extend: 'OldClass', 
    bbar: Ext.create('Ext.toolbar.Toolbar', { 
    // ... 

bbar s của tất cả các trường hợp sẽ tham chiếu cùng một đối tượng. Và do đó mỗi khi bạn tạo bbar thể hiện mới biến mất khỏi thể hiện nguy hiểm.