랠리 sdk 2.0에서 사용자 정의 HTML을 추가하려면 어떻게합니까?

Question

랠리 SDK 2.0을 사용하여 일부 맞춤 게이지로 앱을 만들고 있습니다. 일부 맞춤 HTML이 필요합니다. 예제에서 레이크 컴파일 된 app.html 파일을 시작점으로 사용했습니다. 내 게이지에 JustGage 사용하기. 여기 내 발사 기능입니다.

launch: function() { 
       var info = this.getStoriesForProject(); //Gets some aggregate info 

       $('#header label').html(info.Title); 
       var g = new JustGage({ 
        id: "devgauge", 
        value: info.DevPercent, 
        levelColors: ['#f80404', '#f8f804', '#50ed0e'], 
        min: 0, 
        max: 100, 
        title: "Dev %" 
       }); 

       this.add('foo'); 

      }, 

그런 다음 app.html에 맞춤 HTML을 추가했습니다. 내가 코드없이 "this.add ('foo는')"이 실행하면

지금, 응용 프로그램 클래스 = "X-컨테이너"를 본문에 새로운 사업부를 추가하고 내 사용자 지정을두고 해당 div 외부의 HTML을 효과적으로 숨 깁니다.

내가 그것을 사업부 클래스 = 엑스레이 컨테이너를 생성하지 않습니다 "this.add ('foo는')를 사용하고는 잘 내 위젯을 표시합니다.

을 내가 '무엇을 달성하는 적절한 방법은 무엇입니까 m SDK 2.0 사용하려고? 추가 메서드는 Ext 구성 요소를 추가하는 것입니다 실현하지만 어떻게 든 호출이 내 HTML 확인 렌더링 일으키는. 우리는 이전 SDK에서 개발 한 사용자 지정 HTML 사용하여

Answer 1

Ext는 레이아웃에 따라 어떤 일이 일어나는지 알고 싶어합니다. 지식 없이도 그 아래에있는 돔을 수동으로 조작하는 경우 혼동을 일으킬 수 있습니다. 일반적으로 알려진 몇 가지 초기 레이아웃 세트가있는 경우 항목 일에 수집 출시 당신이 그렇게 좋아하는 콘텐츠를 추가 할 수 있습니다 내부

Ext.define('My.App', { 
    extend: 'Rally.app.App', 
    items: [ 
     { 
      xtype: 'container', 
      itemId: 'header' 
     }, 
     { 
      xtype: 'container', 
      itemId: 'devguage' 
     } 
    ] 
}); 

그런 다음 : 전자 응용 프로그램은

this.down('#devguage').add({ 
    //some other component 
}); 

당신은 언제나 그러나뿐만 아니라 요소 수준까지 모든 방법을 드롭 할 수 있습니다

this.down('#header').getEl().dom //the raw html element 

기본적으로 앱은 자동 레이아웃을 사용하므로 모든 항목이 정상적인 html로 예상되는대로 흐르게됩니다.

Answer 2

또는 대신해서 해당 itemId를 사용하여, 당신은 해당 ID 속성을 사용하여 컨테이너의 요소의 ID를 설정할 수 있습니다

Ext.define('My.App', { 
    extend: 'Rally.app.App', 
    items: [ 
     { 
      xtype: 'container', 
      id: 'header' 
     }, 
     { 
      xtype: 'container', 
      id: 'devguage' 
     } 
    ] 
}); 

결과 HTML 요소가 그 ID를 사용합니다, 수 있습니다 당신은 직접 타겟팅 할 자신의 커스텀 렌더링.