如何使 dataview.list 在 Sencha Touch 2 中可见？

Posted 2023-02-25

【中文标题】如何使 dataview.list 在 Sencha Touch 2 中可见？

【英文标题】：How do I make a dataview.list visible in Sencha Touch 2?

【发布时间】：2012-03-13 13:36:32

【问题描述】：

这里是 Sencha Touch 新手。也就是说，在最后一天左右的时间里，我一直在慢慢了解它。让我发疯的一件事是表单面板和列表由于一些奇怪的布局原因而没有出现。我不知道为什么。例如，我有以下搜索视图：

Ext.define('NC.view.Search', 
  extend: 'Ext.dataview.List',
  xtype: 'searchpage',
  id: 'search-form',

  config: 
    title: 'Search',
    layout:  'vbox',
    itemTpl: '<div class="name">name</div>',
    store: 'Recipes',

    items: [
      
        xtype: 'toolbar',
        docked: 'top',

        items: [
           xtype: 'spacer' ,
          
            xtype: 'searchfield',
            placeHolder: 'Search...'
          ,
           xtype: 'spacer' 
        ]
      
    ]
  
)

这位于标签面板中：

Ext.define('NC.view.Recipes', 
  extend: 'Ext.tab.Panel',
  xtype: 'recipetabpanel',

  config: 
    title: 'Recipes',
    tabBarPosition: 'bottom',
    activeItem: 0,

    items: [
      
        title: 'Recipes',
        iconCls: 'bookmarks',
        items: [
          
            xtype: 'searchpage'
          
        ]
      ,
      
        title: 'Settings',
        iconCls: 'settings',
        html: 'Settings screen'
      
    ]
  
)

这会产生一个可爱的渲染选项卡面板，顶部有一个停靠的搜索栏，但没有可见的列表项。如果我在列表面板中添加一些维度：

width: '100%',
height: '200px',

我的数据存储中的列表项出现。但我不能将高度设置为 100%，因为它会消失（我猜是 CSS 错误）。

那么，我需要什么样的布局层次结构或规范才能使列表出现并占据搜索栏和底部选项卡之间的区域？谢谢！

【参考方案1】：

列表和数据视图使用默认布局，因此您无需指定自己的vbox 布局。如果您从列表中删除该配置，它应该可以正常工作。

编辑：

好的，我仔细查看了您的应用。您可以在此处查看：http://www.senchafiddle.com/#zlT62（按运行）。

问题是您没有在选项卡面板（Recipes.js，第 15 行）的食谱项中包含 layout: fit。

它需要一个合适的布局，以便知道您要添加的新项目的大小。

但是您添加的项目的根本问题是过度嵌套。让我们看看你的代码：

    title: 'Recipes',
    iconCls: 'bookmarks',
    layout: 'fit',
    items: [
        
            xtype: 'searchpage'
        
    ]

这里发生的是创建一个新的 Ext.Container（带有 title、iconCls 等），然后在该容器中添加您创建的 searchpage 组件。现在这里的外部容器（带有title）将自动拉伸到其容器（tabpanel）的大小，因为默认情况下tab panel 具有layout: 'card' 配置。这里的问题是您在其中添加 another 组件（您的 searchpage）并且因为您添加的容器（带有 title 的容器）没有布局（只有它的容器，标签面板，确实）然后列表（searchpage）不知道拉伸到项目的大小。

这称为过度嵌套，因为您可以将searchpage 组件作为标签面板的子组件插入并为其指定title 和iconCls。你应该做的是：

    title: 'Recipes',
    iconCls: 'bookmarks',
    xtype: 'searchpage'

如您所见，我只是将 xtype 移动到配置块中，我们可以删除整个项目配置，因为我们添加的项目是实际的 searchpage。

这里是代码的链接，但已修复：http://www.senchafiddle.com/#qXaQm

希望这是有道理的。 Sencha Touch 很难拾取布局。我还建议您阅读 Sencha Touch 2 文档中的 layout guide（如果您还没有），因为它非常有帮助。

【讨论】：

感谢您的提示，但仍然没有爱。当然，如果我指定宽度和高度，它会显示 - 但不是 100%。

抱歉回复缓慢。我再次查看了您的应用并更新了帖子。如果您需要更多详细信息/如果这有帮助，请告诉我。 :)

谢谢，这无疑有助于我理解布局概念。我已经阅读了布局指南，但是您对过度嵌套的识别很棒。现在一切都很顺利。另外，我不知道 senchafiddle - 这将有助于解决未来的问题，我想这不远了！再次感谢。

"它需要一个合适的布局，以便知道您添加的新项目的拉伸到大小。"这是多么的退缩？为什么它不会默认显示该死的项目？为了显示内容的简单概念，我们必须不断地跳过各种障碍。

【参考方案2】：

Ext List 组件不需要布局。此外，列表组件不是容器 - 它只是数据的视图，不能拥有自己的子级。所以，你不能在那里添加项目。

所以，

删除布局 删除项目 在要添加此列表的面板中添加工具栏。 添加布局：“适合”到上方面板

列表：

Ext.define('NC.view.Search', 
  extend: 'Ext.dataview.List',
  xtype: 'searchpage',
  id: 'search-form',
  config: 
    title: 'Search',
    layout:  'vbox',
    itemTpl: '<div class="name">name</div>',
    store: 'Recipes'
  
);

标签面板：

Ext.define('NC.view.Recipes', 
  extend: 'Ext.tab.Panel',
  xtype: 'recipetabpanel',

  config: 
    title: 'Recipes',
    tabBarPosition: 'bottom',
    activeItem: 0,    
    items: [
        title: 'Recipes',
        iconCls: 'bookmarks',
        layout : 'fit',
        items: [
            xtype: 'toolbar',
            docked: 'top',
            items: [ xtype: 'spacer' , 
                xtype: 'searchfield',
                placeHolder: 'Search...'
      ,
       xtype: 'spacer' 
    ]
  ,
          
            xtype: 'searchpage'
          
        ]
      ,
      
        title: 'Settings',
        iconCls: 'settings',
        html: 'Settings screen'
      
    ]
  
)

【讨论】：

其实List就是一个容器，所以可以添加item/停靠item。 :)

@rdougan：感谢您提供的信息。 Sencha Touch 2.0 中的层次结构发生了变化。