Sencha：无法设置正确的布局:(

我想创建一个容器有四个项目，我需要的是容器是滚动而不是每个单独项目的容器，我也希望每个项目有它自己的高度，如果四个项目比屏幕大，用户可以通过容器向下滚动才能看到其他项目信息...Sencha：无法设置正确的布局:(

的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')); 
      } 
    });

来源

2013-05-29 martuanez

用破碎的布局创建小提琴会让事情更容易修复。 – blessenm

我不知道如何做到这一点与sencha，不会sencha期望每个视图，文件等在他们的通信文件夹或投诉，如果不这样做？ – martuanez

只需将所有类放入启动函数即可。这是一个你可以分叉和修改的小提琴。 http://jsfiddle.net/Gmn8v/ – blessenm

我终于让它工作，我在容器的默认部分将滚动设置为false，并在子项上设置高度。发生的一件事是，当在childs中将可滚动设置为false而不是默认设置时，sencha不会识别高度，这是他们声称已经修复的错误，实际版本是在写作时我正在使用的2.2版本2.1.1

注意：我还设法设置每个项目的动态高度，我通过将其设置分开并稍后通过执行myContainer.add（itemWithDinamicHeight）来添加项目;
;）

干杯！

来源

2013-05-30 19:58:05 martuanez

Sencha：无法设置正确的布局:(

回答

相关问题