0

我有这样的要求，即为用户提供订阅某些类别的服务。要设计的布局具有 -

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

我已经正确设置了数据视图。数据视图被添加为休闲 -

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

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

4

2 回答 2

1

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

于 2013-02-10T06:31:06.167 回答
0

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

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

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

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

在此处输入图像描述

于 2013-02-10T07:42:30.300 回答