Sencha : 올바른 레이아웃을 설정할 수 없습니다. (

Question

4 개의 항목이있는 컨테이너를 만들려고합니다. 각 항목 대신 스크롤하는 컨테이너가 필요합니다. 또한 모든 항목을 원합니다. 네 개의 항목이 화면보다 큰 경우 사용자가 다른 항목의 정보를 볼 용기를 아래로 스크롤 할 수 있습니다 ...

JSFiddle 그것을 자신의 높이가하기 : http://jsfiddle.net/martuanez/7GV3b/

내 코드 :

var store = { 
    type: 'store', 
    fields: ['label', 'value'], 
    data: [{ 
        label: 'label', 
        value: 'value', 
      }, { 
        label: 'label', 
        value: 'value', 
      }, { 
        label: 'label', 
        value: 'value', 
      }, 
    ] 
}; 

Ext.Loader.setConfig({ 
      enabled: true 
    }); 
Ext.application({ 
      name: ('SF' || 'SenchaFiddle'), 
      launch: function() { 
        Ext.define('MyApp.view.Contacts.ContactsDetailsView', { 
            xtype: 'ContactsDetailsView', 
            extend: 'Ext.Container', 
            config: { 
              layout: { 
                type: 'vbox', 
                padding: 3 
              }, 
              defaults: { 
                scrollable: { 
                  direction: 'horizontal', 
                  directionLock: true 
                }, 
                height: 500, 
                layout: 'fit' 
              }, 
              scrollable: 'vertical', 
              itemCls: 'details-list-container', 
              items: [{ 
                  xtype: 'dataview', //add xtype 
                  itemId: 'detailItem', 
                  loadingText: 'Loading keys...', 
                  emptyText: '<div>No keys found.</div>', 
                  store: store, 
                  onItemDisclosure: false, 
                  itemTpl: '<br/>item 1:<br/> {label}<br/>{value}<br/><br/>', 
                  itemCls: 'details-list', 
                  selectedItemCls: '', 
                  disableSelection: true, 
                  pressedCls: '' 
                }, { 
                  xtype: 'list', 
                  itemId: 'detailKeys', 
                  store: store, 
                  loadingText: 'Loading keys...', 
                  emptyText: '<div>No keys found.</div>', 
                  onItemDisclosure: false, 
                 itemTpl: 'item 2: {label}{value}<br/>', 
                  itemCls: 'details-list', 
                  selectedItemCls: '', 
                  disableSelection: true, 
                  pressedCls: '' 
                }, { 
                  xtype: 'list', //add xtype 
                  itemId: 'detailuserdefs', 
                  store: store, 
                  loadingText: 'Loading userdefs...', 
                  onItemDisclosure: false, 
                  itemTpl: 'item 3: {label}{value}<br/>', 
                  itemCls: 'details-list', 
                  selectedItemCls: '', 
                  disableSelection: true, 
                  pressedCls: '' 
                }, { 
                  xtype: 'list', 
                  itemId: 'detailOthers', 
                  store: store, 
                  loadingText: 'Loading userdefs...', 
                  onItemDisclosure: true, 
                  itemTpl: 'item 4: {label}{value}<br/>', 
                  itemCls: 'details-list' 
                } 
              ] 
            } 

          }); 


         Ext.Viewport.add(Ext.create('MyApp.view.Contacts.ContactsDetailsView')); 
      } 
    }); 

Answer 1

나는 마침내 그것을 작동하게, 나는 container의 defaults 섹션에서 false로 scrollable을 설정하고 자식 아이템에서는 높이를 설정한다. 일어난 한가지 사실은 기본값에서가 아니라 child에서 scrollable을 false로 설정할 때 sencha가 높이를 인식하지 못했다는 것입니다. 이것은 내가 이미 writting 할 때까지 실제 버전이 이미 고쳐 졌다고 주장하는 버그입니다. 이 2.2 버전 2.1.1에서 작업 중임

참고 : 또한 각 항목에 대해 dinamic 높이를 설정할 수있었습니다.이 설정은 나중에 설정하고 나중에 myContainer.add (itemWithDinamicHeight)를 수행하여 항목을 추가하여 수행했습니다.
)

건배!