在Sencha Touch 2中如何使dataview.list可见？ [英] How do I make a dataview.list visible in Sencha Touch 2?
问题描述
Ext.define（'NC.view.Search'，{
扩展：'Ext.dataview.List'，
xtype：'searchpage'，
id：'search-form'，
config：{
title：'搜索'，
布局：'vbox'，
itemTpl：'< div class =name> {name}< / div>'，
store：'Recipes'
项目：[
{
xtype：'工具栏'，
停靠：'顶部'，
项目：[
{xtype：'spacer'}，
{
xtype：'searchfield'，
placeHolder：'Search ...'
}，
{xtype：' spacer'}
]
}
]
}
}）
这是一个选项卡面板：
Ext.define（'NC.view.Recipes' ，{
extends：'Ext.tab.Panel'，
xtype：'recipetabpanel'，
config： {
title：'Recipes'，
tabBarPosition：'bottom'，
activeItem：0，
items：[
{
title ：'食谱'，
iconCls：'bookmarks'，
items：[
{
xtype：'searchpage'
}
]
}
{
标题：'设置'，
iconCls：'设置'，
html：'设置屏幕'
}
]
}
}）
这是一个可爱的渲染选项卡面板，其中包含停靠在顶部的搜索栏，但没有可见的列表项。如果我在列表面板中添加一些维度：
width：'100％'，
height：'200px' ，
我的数据存储中的列表项显示。但是我不能把高度提高到100％，因为它会消失（CSS错误我的猜测）。
那么我需要做什么布局层次结构或规范出现并占据搜索栏和底部的标签之间的区域？谢谢！
列表和Dataviews使用默认布局，因此您不需要指定自己的 vbox 布局。如果您从列表中删除该配置，它应该正常工作。
编辑
好吧，我仔细看看你的应用程序。您可以在这里查看： http://www.senchafiddle.com/#zlT62 （按运行）
问题是您没有在中添加选项卡面板中的食谱项目（Recipes.js，第15行）。
它需要一个合适的布局，所以它知道要添加的新项目的大小。
但是，您添加的项目的根本问题是超负荷。让我们来看看你的代码：
{
title：'Recipes'，
iconCls：'书签'，
布局：'fit'，
项目：[
{
xtype：'searchpage'
}
]
}
这里发生的是创建一个新的Ext.Container（带有标题， iconCls 等），然后在该容器中添加您创建的 searchpage 组件。现在，这里的外部容器（使用标题）将自动扩展到其容器（tabpanel）的大小，因为选项卡面板具有布局：默认情况下，卡配置。这里的问题是，您正在添加另一个组件（您的 searchpage ），因为您添加的容器（具有 title ）没有布局（只有它的容器，选项卡面板，然后）列表（ searchpage ）doesn不知道要伸展到项目的大小。
这被称为过度使用，因为您只需插入 searchpage 组件作为选项卡的小孩，并给它一个标题和 iconCls 。你应该这样做是这样的：
{
title：'Recipes'
iconCls：'bookmarks'，
xtype：'searchpage'
}
您可以看到，我只是将xtype移动到配置块，我们可以删除整个项目配置，因为我们添加的项目是实际的 searchpage 。
这里是一个代码链接，但修复了： http://www.senchafiddle.com/#qXaQm
希望这是有道理的。使用Sencha Touch可能很难找到布局。我也建议您阅读布局指南（如果你还没有）在Sencha Touch 2文档上，因为它可以非常有用。
A Sencha Touch newbie here. That said, I've been slowly getting my head around it in the last day or so. One thing that has driven me insane is formpanels and lists not showing up for some weird layout reason. I can't work out why. For instance I have the following Search view:
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' }
]
}
]
}
})
This sits in a tab panel:
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'
}
]
}
})
What this results in is a lovely rendered tab panel, with a docked search bar up the top, but no list items visible. If I add to my list panel some dimensions:
width: '100%',
height: '200px',
the list items from my data store appear. But I can't put height to 100% because it'll disappear (CSS fault my guess).
So what layout hierarchy or specifications do I need to make the list appear and take up the area between the search bar and the tabs down the bottom? Thanks!
Lists and Dataviews use the default layout, so you do not need to specify your own vbox layout. If you remove that configuration from the list, it should just work.
Edit:
Ok, I took a closer look at your app. You can view it here: http://www.senchafiddle.com/#zlT62 (press run).
The problem was that you were not including a layout: fit in the recipes item in the tab panel (Recipes.js, line 15).
It needs a fit layout so it knows the stretch to size of the new item you are adding.
But the root issue with the item you are adding is overnesting. Lets take a look at your code:
{
title: 'Recipes',
iconCls: 'bookmarks',
layout: 'fit',
items: [
{
xtype: 'searchpage'
}
]
}
What is happening here is this is creating a new Ext.Container (with a title, iconCls etc.) and then within that container adding the searchpage component you create. Now the outer container here (with the title) will automatically stretch to the size of its container (the tabpanel) because the tab panel has a layout: 'card' configuration by default. The problem here is that you are then adding another component within it (your searchpage) and because the container you added (the one with the title) doesn't have a layout (only its container, the tab panel, does) then the list (searchpage) doesn't know to stretch to the size of the item.
This is called overnesting, because you can just insert the searchpage component as a child of the tabpanel and give it a title and iconCls. What you should be doing is this:
{
title: 'Recipes',
iconCls: 'bookmarks',
xtype: 'searchpage'
}
As you can see, I'm just moving the xtype into the configuration block, and we can remove the whole items configuration, because the item we are adding is the actual searchpage.
And here is a link to the code, but fixed: http://www.senchafiddle.com/#qXaQm
Hopefully this makes sense. Layouts can be difficult to pickup with Sencha Touch. I'd also advise you to read the layout guide (if you haven't already) over on the Sencha Touch 2 Documentation, as it can very helpful.
这篇关于在Sencha Touch 2中如何使dataview.list可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
