Question

这里有Sencha Touch新手。也就是说，在最后一天左右，我一直在慢慢探索它。导致我疯狂的一件事是formpanels和列表没有出现一些奇怪的布局原因。我无法理解为什么。例如，我有以下搜索视图：

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猜错）。

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

Answer 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）的大小，因为默认情况下选项卡面板具有layout: 'card'配置。这里的问题是，您正在其中添加另一个组件（您的searchpage），因为您添加的容器（带有title的容器）没有布局（只有它的容器，选项卡面板），然后列表（searchpage）不知道伸展到项目的大小。

这称为过度处理，因为您只需将searchpage组件作为tabpanel的子项插入，并为其指定title和iconCls。您应该做的是：

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

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

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

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

Answer 2

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

所以，

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

列表：

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

的TabPanel：

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

如何在Sencha Touch 2中显示dataview.list？

2 个答案: