Sencha touch sencha touch 2数据视图位于顶部的复选框字段和底部的按钮之间

我有这样一个要求，即为用户提供订阅特定类别的服务。拟设计的布图具有—

复选框=>在顶部切换自动订阅设置

dataview=>位于中间，包含订阅列表和复选框字段

按钮=>允许用户更新订阅列表

我已经正确设置了dataview。Dataview被添加为fallows-

 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'
    }

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

我不明白为什么dataview没有显示（甚至没有填充数据）。当dataview未在复选框和按钮之间添加面包圈时，它将按预期呈现。

---

当dataview添加面包屑时，看起来是这样的-

请尝试在css中为模板或dataview配置提供一些高度，并使用容器的

hbox

布局尝试了一些事情并设法解决了这个问题。通常，列表或数据视图用于显示全屏内容。但在我的例子中，我需要它在另外两个组件之间

为了实现这一点，我在父容器中添加了以下配置-

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

但这还不够。需要在每个组件中添加

flex

config。没有此配置，就看不到dataview。我对数据不填充的看法是错误的，事实上确实如此（因为html是深度嵌套的，所以我第一次错过了它）。下面是预览它的外观

---

谢谢您的指导

hbox

对我来说不太管用，但它确实给了我一个看电视的机会。我在回答中增加了细节。而且我们不应该显式地为dataview提供

layout

config。它会抛出警告消息，说明它自动管理的布局。