패널을 스크롤 할 때 고정 높이를 설정합니까?

Question

다음 코드는 내 현재 응용 프로그램에서 사용하고있는 내 뷰 중 하나의 정의를 보여줍니다. 즉,이 뷰가 쉽게 만들어지고 표시되어야 할 때 Ext.Viewport에 추가된다는 것을 의미합니다.

그것의 구조는 매우 간단합니다 : 버튼, 패널 등

그러나 같은 다른 구성 요소를 포함 할 수 있습니다 아래에 패널 도구 모음, 거기에 내 문제이며, 내가 설정을 추가하기 때문에 스크롤이 : 사실을 패널에 놓으십시오 (아래에서 볼 수 있듯이),이 패널의 고정 높이 (이 경우 300)를 설정해야합니다. 높이를 설정하지 않으면 패널 내의 모든 구성 요소가 전혀 표시되지 않습니다.

짝수 악화 문제는, 내가 무엇 높이 내가 여기에 설정해야합니다을 모르는, 때문에 내 애플 리케이션해야 다른 화면 크기가 다른 장치에 코스 작업 (아이폰/아이 패드/...).

그래서 내가 얻고 싶은 것은 도구 모음 아래의 패널이 완전히 사용 가능한 높이를 사용한다는 것과 그 내용이 자체 높이보다 "높다"면 스크롤 할 수 있어야한다는 것입니다. 당신은 (아마도)뿐만 아니라, 당신은 layout:'fit'를 찾고 있습니다

Ext.define('PV.view.Menu', { 
    extend: 'Ext.Panel', 

    xtype: 'menu', 

    config: { 
     items: [ 
      { 
       xtype: 'toolbar', 
       title: 'My Menu' 
      }, 
      { 
       xtype: 'panel', 
       scrollable: true, 
       height: 300, 
       items: [ 
        { 
         xtype: 'button', 
         text: 'Navigate to view 1 >', 
         action: 'nav-to-view1' 
        }, 
        { 
         xtype: 'button', 
         text: 'Navigate to view 2 >', 
         action: 'nav-to-view2' 
        }, 
        { 
         html: 'A lot of text<br />A lot of text<br />A lot of text<br />A lot of text<br />A lot of text' 
        } 
       ] 
      } 
     ] 
    } 
}); 

Answer 1

그 :-)와 빠른에 대한 minHeight

http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-minHeight

http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Fit

config: { 
    layout:'fit', 
    items: [ 
     { 
      xtype: 'toolbar', 
      title: 'My Menu' 
     }, 
     { 
      xtype: 'panel', 
      scrollable: true, 
//    height: 300, 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Navigate to view 1 >', 
        action: 'nav-to-view1' 
       }, 
       { 
        xtype: 'button', 
        text: 'Navigate to view 2 >', 
        action: 'nav-to-view2' 
       }, 
       { 
        html: 'A lot of text<br />A lot of text<br />A lot of text<br />A lot of text<br />A lot of text' 
       } 
      ] 
     } 
    ] 
}