sencha touch 2 dataview 位于顶部的复选框字段和底部的按钮之间答案

【问题标题】：sencha touch 2 dataview breaded between checkboxfield at top and button at bottomsencha touch 2 dataview 位于顶部的复选框字段和底部的按钮之间
【发布时间】：2013-02-09 08:45:05
【问题描述】：

我的要求是让用户订阅某些类别。要设计的布局有 -

复选框 => 在顶部切换自动订阅设置。
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'
                   }
       }
   ]    
   }
});

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

【问题讨论】：

标签： sencha-touch sencha-touch-2 dataview

【解决方案1】：

请尝试使用 hbox 容器布局在模板或数据视图配置的 css 中给出一些高度

【讨论】：

感谢您的指导。 hbox 并没有完全适合我，但绝对让我推动了在哪里看。我在答案中添加了详细信息。而且我们不应该将layout 配置明确地提供给dataview。它会抛出警告消息，说明它自动管理的布局。

【解决方案2】：

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

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

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

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

【讨论】：