Ext.define()의 initComponent()에 대한 모범 사례

Question

Ext.define()을 사용하여 ExtJS의 새 MVC 방식으로 모든 구성 요소를 작성하고 있습니다.

initComponent() 내부의 속성을 정의 하든지 아니면 property: 42,처럼 간단히 설정하여도 다소 어려움을 겪습니다.

널리 채택되는 모범 사례가 있습니까?

나는 initComponent()를 사용하여 사이의 엄청난있어 필요한 경우에만 (예. 나는 동적 뭔가 또는 범위를 설정하고자 할 때) 기능을 짧은 유지하고 좀 추한 this.의 예비 항상 이득이있다, 그 나는 그것을 사용 이전의 속성을 initComponent()으로 옮길 필요가 없기 때문에 더 동적으로 만들고 싶습니다.

불행히도 Sencha의 문서는 그 사실에 대해별로 알려주지 않고 있으며 사용 가능한 예제가 원하는 것처럼 보입니다.

Answer 1

기다리는 것은 오버라이드 (override) 할 수 있다는

• 변수 x, y, width 같은 크기를 정의 할 때 개인 연습, 나는 속성 영역에서 변수를 선언합니다

  , height

• 변수 또는 사용자 정의 , 예컨대 title, saveBtnTxt, url, fields, iconCls
• 특별한 접두사가 몇 가지 상수, 쉽게 그리고

내가 선언합니다 그래서 무시되지 않습니다 items하여 obj (this, me)의 범위를 필요 listeners, this.on, Ext.apply(me, {..}) 또는 아무것도, 앉아서 안에 내 initComponent. 또는 모든 것이 설정되기 전에 사용자가 내 구성 요소를 손상시키지 않도록 중요한 변수 중 일부를 무시하여 수정/재정의해야하는 항목.

물론 내 안내 역할을 할 것입니다. 추악한 this 약 2 센트

편집

, 나는 내 응용 프로그램에서 변수 me 널리 사용되는 한, 그것은 this보다 훨씬 청소기 보인다. 스코프를 자주 변경하지 않아도됩니다.

Answer 2

귀하의 질문이 정확하게 전달되지는 않지만 귀하에게 도움이 될 수 있습니다.

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, 
..... 
}); 

다음과 같이 사용할 수 있습니다.

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

비 프리미티브을 initComponent에 설정하는 것이 더 낫다고 라이오넬의 답변에 추가하고 싶습니다. (원시에 의해 나는 string, boolean, number를 의미한다). 배열 및 객체는 initComponent입니다.
그래서 정의는 다음과 같아야합니다 : 당신이 initComponent 함수에 모든 비 원시적 CONFIGS을 넣어해야하는 이유

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 
} 

이유는 다른 모든 인스턴스의 CONFIGS가 같은 개체를 참조하는 것입니다. 예를 들어, 당신은 같은합니다 NewClass를 정의하는 경우 : 모든 인스턴스의

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

bbar의이 같은 객체를 참조합니다. 따라서 새로운 인스턴스를 만들 때마다 bbar는 우선 인스턴스에서 사라집니다.