sencha touch 2 dataview在顶部的checkboxfield和底部的按钮之间

Question

我要求用户提供订阅某些类别的服务。要设计的布局是 -

1. checkbox =＆gt;在顶部切换自动订阅设置。
2. dataview =＆gt;在中间，有订阅列表和复选框字段。
3. button =＆gt;允许用户更新订阅列表。

我正确设置了数据视图。 Dataview被添加为休耕 -

 xtype: 'dataview',
 itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
           '<span style="float:left">{name}</span>' +
           '<span style="float:right">' +
               '<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
           '</span>'+
         '</div>',
 fields:['name'],
 data:[
    {
      name :'A'
    },
    {
      name :'B'
    },
    {
      name :'C'
    }

当我尝试添加组件1和3（上面指定的问题）时，不会显示数据视图。我只有复选框和按钮。当我检查渲染的html时，我意识到dataview甚至没有填充data配置。我用来添加这三个组件的代码就是休闲 -

Ext.define("PApp.view.home.Subscription", {
    extend:'Ext.Container',
    xtype:'subscription',
    config: {
        layout:'fit',
        fullscreen:true,
        scrollable:false,
        items: [
            {
                xtype:'container',
                fullscreen:true,
                items:[
                    {
                        xtype:'checkboxfield',
                        name : 'subscriber-setting',
                        label: 'Subscriber',
                        value: 'yes',
                        checked: true
                    },
                   {
                        xtype: 'dataview',
                        itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
                                    '<span style="float:left">{name}</span>' +
                                    '<span style="float:right">' +
                                          '<input type="checkbox" class="x-input-el x-input-checkbox"         style="display: inline;top:10px">'+
                                   '</span>'+
                               '</div>',
                        fields:['name'],
                        data:[
                           {
                              name :'A'
                           },
                           {
                              name :'B'
                           },
                           {
                              name :'C'
                           }
                   },
                   {
                              xtype:'button',
                              text:'Update',
                              ui:'action'
                   }
       }
   ]    
   }
});     

我无法弄清楚为什么没有显示数据视图（甚至没有填充数据）。当复选框和按钮之间没有数据视图时，它会按预期呈现。        当数据视图被覆盖时，它看起来像这样 -

Answer 1

请尝试使用hbox容器布局

在模板或数据视图配置的css中给出一些高度

Answer 2

尝试了一些事情并设法解决了这个问题。大多数情况下，列表或数据视图用于显示全屏内容。但在我的情况下，我需要在两个其他组件之间。

为了完成这项工作，我将以下配置添加到父容器 -

            layout: {
                type: 'vbox',
                align : 'stretch'
            },

但这还不够。需要在每个组件中添加flex配置。没有这个配置，没有看到dataview。我错误的数据确实没有填充（因为html是深度嵌套的，所以第一次错过了它）。这是预览它的外观。