두 개의 Sencha Ext.Lists를 세로로 쌓습니다.

Question

두 개의 Sencha Touch Ext.List를 세로로 쌓고 싶습니다. 이 두 목록을 스크롤 할 수있는 컨테이너에 속하게하고 싶습니다. 내가 가지고있는 문제는이 목록을 완전히 확장 된 구성 요소로 구성 할 수 있는지 잘 모르겠다는 것입니다 (포함 된 컨테이너가 스크롤링을 처리해야 함).

e.e. 두 번째 목록으로 이동하려면 첫 번째 목록의 전체 내용을 아래로 스크롤해야합니다.

또한 컨테이너를 포함하는 컨테이너는 폼과 같은 다른 스택 구성 요소로 채울 수 있어야합니다.

예 : 나는 목록에 null로 스크롤 설정하여 작업 뭔가를 얻을 관리했습니다

-> Container (should show scroll bars if contained content doesn't fit in the container) 
    -> Form (should not show any scrollbars, thus fully expanded) 
    -> List (should not show any scrollbars, thus fully expanded) 
    -> List (should not show any scrollbars, thus fully expanded) 

UPDATE. 그러나 2.1.0 이전의 Sencha Touch 버전에서만 작동하므로 2.0.1이 정상적으로 작동합니다.

var mainPanel = Ext.create("Ext.Container", 
    { 
     fullscreen: true, 
     layout: 'vbox' 
    }); 

    var subPanel = Ext.create("Ext.Container", { 
     flex: 1, 
     layout: 'vbox' 
    }); 

    Ext.define('MyList', { 
     extend: 'Ext.List', 
     config: { 
      scrollable: null, 
      fullscreen: false 
     } 
    }); 

    var itemName = 'MyItem'; 
    Ext.define(itemName, { 
     extend: 'Ext.data.Model', 
     config: { 
      fields: ["title"] 
     } 
    }); 

    var store = Ext.create('Ext.data.Store', { 
     model: itemName, 
     data: [ 
       { title: 'row1' }, 
       { title: 'row2' } 
      ] 
    }); 

    var list1 = Ext.create('MyList'); 
    list1.setItemTpl('<div>List 1 - {title}</div>'); 
    list1.setStore(store); 

    var list2 = Ext.create('MyList'); 
    list2.setItemTpl('<div>List 2 - {title}</div>'); 
    list2.setStore(store); 

    subPanel.add(list1); 
    subPanel.add(list2); 

    mainPanel.add(subPanel); 
    Ext.Viewport.add(mainPanel); 

2.1.0 이상에서 작동하지 않는 이유는 무엇입니까?

Answer 1

목록의 scrollable 구성을 false으로 설정 했습니까?

Ext.dataview.List에서 시작하는 대신 을 확장하는 것이 좋습니다. 자신 만의 스타일링을 만들어야하지만 Ext.List에서 원하지 않는 기능을 제거하는 것보다 쉽다는 것을 알게되었습니다.