센차 터치 - 사용자 정의 구성 요소

Question

내가 가지고있는 다음과 같은 사용자 지정 구성 요소가

Ext.define('TRA.view.MainMenuItemView', { 
    xtype: 'mainmenuitem', 
    extend: 'Ext.Container', 

    text: 'Menu text', 
    icon: './resources/icons/Icon.png', 

    tap: function(){ 

    }, 

    config: { 
     layout: { 
      type: 'vbox', 
      pack: 'center', 
      align: 'center' 
     }, 
     items: [ 
      { 
       width: '115px', 
       height: '115px', 
       style: 'border-radius: 50%; background-color: #e4e4e6', 
       items: [ 
        { 
         xtype: 'image', 
         src: '', 
         width: '65px', 
         height: '65px', 
         centered: true 
        } 
       ] 
      }, 
      { 
       xtype: 'label', 
       html: '', 
       margin: '5px 0', 
       style: 'color: #455560; text-align: center; text-transform: uppercase; font-weight: bold;' 
      } 
     ] 
    }, 

    initialize: function() { 
     var me = this; 

     me.callParent(arguments); 





     //set icon 
     me.getAt(0).getAt(0).setSrc(me.icon); 

     //set text 
     me.getAt(1).setHtml(me.text); 



     //setup componet event 
     me.element.onAfter('tap', me.tap); 


    } 
}) 

를 구축 '생산'구축에 잘 작동하지 않습니다와 나는 아주 이상하게이

{ 

         xtype: 'mainmenuitem', 
         text: 'Signal Coverage', 
         icon: './resources/images/icon-signal-coverage.png', 

         tap: function() { 
          var nav = Ext.ComponentQuery.query('#mainnavigationview')[0]; 


          nav.push({ 
           title: 'Signal Coverage', 
           html: 'test Signal Coverage' 
          }); 

         } 
        } 

같은 다른 용기에 그것을 사용하고 있습니다 그것은 모든 정상적으로 잘 작동합니다. sencha cmd를 사용하여 네이티브 또는 웹 빌드 용 sencha 응용 프로그램을 빌드 할 때를 제외하고

sencha app build production 

프로덕션 버전은 내 사용자 지정 구성 요소의 icon 및 text 속성을 덮어 쓰지 않습니다. 정상적인 버전에서는 모두 잘 작동합니다. 무슨 문제가 될 수 있니? 첫 번째 항목이하는

1) 둘하기 위해 xtype을 가지고도 아니고 defaultType는

2) 폭을 정의 않습니다 : 우선

Answer 1

, 몇 가지 아이디어는 당신의 코드를 다른 사람에 대한 쉽게 읽을 수 수 있도록 없습니다 ' 115px ', width : 115, height115

3) me.getAt(). getAt() 대신 itemId를 정의하고 me.down ('# theItemId ')을 사용하십시오.

3a) 또는 Ext.Component 참조로 템플릿을 확장하고 추가 할 수 있습니다. 그게 나야 .referenceElement

4) me.onAfter ('탭', ... 탭 이벤트를 지원하지 않는 항목에서 작동하는지 확실하지 않은 경우 탭 이벤트를 설정해야 할 수도 있습니다. .element를 추가하고 이전부터 사용할 수 있습니다.

5) 대신 getText (me.text)를 사용하여 updateText : function (newValue) {this.getAt()를 사용하십시오. 아이콘

다음 내 개인 opion에 대한 getAt().의 setText (NEWVALUE)}
같은

개인적으로 나는 어쨌든이 코드가 실행되는 것을 결코 기대하지 못했습니다. 그러나 수정 me.config.icon를 작성하고 그것은 타이밍의 문제

솔루션

me.config.text 할 수 있습니다. 생성자가 실행되는 동안 설정 내에 아이콘이나 텍스트가 정의되어 있지 않습니다.

초기화시에만 발생합니다. 거기에 당신은 그것들을 설정 안에 넣습니다.

아이콘 추가 : null, text : ''을 구성 요소의 구성에 추가하면 getter 및 setter로 단어가 표시됩니다.