Sencha Touch - 템플릿 아래에 버튼 표시

Question

Sencha Touch 2 프레임 워크를 사용하여 템플릿에서 패널을 만들려고하는데 약간 문제가 있습니다.

Ext.define('GS.view.Home', { 

extend: 'Ext.Panel', 

config: { 
    title: 'Home', 
    items: [ 
     { 
      xtype: 'panel', 
      html: [ 
       '<img src="resources/images/someImage.gif"/>', 
       '<h1>A Header</h1>', 
       "<p>some text</p>" 
      ].join("") 
     }, 
     { 
      xtype: 'button', 
      text: 'Click Me', 
      ui: 'forward' 
     } 
    ] 
} 
}); 

렌더링 할 때 다음과 같습니다 :

것 대신에 템플릿이 사용하는 HTML의 예 - 내가 뭘하려는 아래 버튼 다음에 HTML 템플릿을 표시입니다

대신 템플릿을 사용하여 패널을로드하지만 그 아래에 버튼이 있습니다. 내 코드는 현재이 같은 같습니다

var tpl = new Ext.XTemplate(
    '<img src="resources/images/someImage.gif"/>', 
    '<h1>A Header</h1>', 
    '<p>some text</p>', 
    { 
     // XTemplate configuration: 
     compiled: true 
    } 
); 
Ext.define('GS.view.Home', { 

    extend: 'Ext.Panel', 
    xtype: 'home', 
    config: { 
     title: 'Home', 
     tpl: tpl, 
     data: [], 
     items: [ 

      { 
       xtype: 'button', 
       text: 'Click Me', 
       ui: 'forward' 
      } 
     ] 
    } 
}); 

을하지만이 템플릿 HTML 위에 배치되는 버튼 결과 :

가 나는 또한 함께 항목의 배열에 패널을 추가하려고했습니다 tpl 값을 템플릿으로 설정하지만 HTML이 전혀 렌더링되지 않습니다.

누구나 템플릿을 사용할 수 있지만 하단에는 버튼이 있습니다. 귀하의 대답은 템플릿 html로 올바른 클래스 이름을 가진 버튼을 포함하는 것입니다 어떻게 컨트롤러로 다시 연결합니까? (일반적으로 itemId 구성 등록 정보를 사용합니다).

건배,

제임스

Answer 1

이 당신의 두 가지 접근 방식의 차이가 있습니다 : 첫 번째는 HTML과 판넬을 포함하는 패널을 가지고 있으며, 버튼을 .. 두 번째는있다 html과 버튼이 둘 다 포함 된 패널 (그리고 나는 sencha가 html을 버튼 아래 놓는다 고 추측한다). 트릭을 할해야 하단 솔루션에 두 개의 패널을 사용하여

:

Ext.define('GS.view.Home', { 

    extend: 'Ext.Panel', 
    xtype: 'home', 
    config: { 
     title: 'Home', 
     items: [ 
      { 
       xtype: 'panel', 
       tpl: tpl, 
       data: [], 
      }, 

      { 
       xtype: 'button', 
       text: 'Click Me', 
       ui: 'forward' 
      } 
     ] 
    } 
});