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

这里是 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 错误）。

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

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

Edit:

好的，我仔细查看了您的应用程序。您可以在这里查看：http://www.senchafiddle.com/#zlT62 http://www.senchafiddle.com/#zlT62（按run).

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

它需要一个合适的布局，以便它知道您要添加的新项目的尺寸拉伸。

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

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

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

这称为过度嵌套，因为您只需插入searchpage组件作为 tabpanel 的子级并给它一个title and iconCls。你什么should正在做的是这样的：

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

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

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

希望这是有道理的。使用 Sencha Touch 可能很难拾取布局。我还建议您阅读布局指南 http://docs.sencha.com/touch/2-0/#!/guide/layouts（如果您还没有）查看 Sencha Touch 2 文档，因为它非常有帮助。