Sencha: Невозможно установить правильную компоновку :(

Question

Я пытаюсь создать контейнер с четырьмя элементами, и мне нужен контейнер, который будет прокручиваться вместо каждого отдельного элемента, также я хочу, чтобы каждый элемент иметь свою собственную высоту так, если четыре элемента больше, чем экран, пользователь может прокручивать вниз через контейнер, чтобы увидеть другую информацию пунктов ...

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

Я наконец-то заставьте его работать, я установил прокручиваемое значение false в разделе по умолчанию контейнера и высоте для дочерних элементов. Одна вещь, которая произошла, заключается в том, что при установке прокрутки в false в дочерних элементах, а не по умолчанию, sencha не распознал высоту, это ошибка, по которой они утверждают, что они уже исправили фактическую версию к моменту, когда я пишу это 2.2, версия, над которой я работаю 2.1.1

Примечание: Мне также удалось установить динамические высоты для каждого элемента, я сделал это, установив его отдельно и добавив элементы позже, выполнив myContainer.add (itemWithDinamicHeight);
;)

Cheers!