How do I make a dataview.list visible in Sencha Touch 2?

Question

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!

Answer 1

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.

Answer 2

Ext List component doesn't need a layout. Also, a list component is not a Container - it is just a View of the data which cannot have children of its own. So, you cannot add items there.

So,

1. Remove layout
2. Remove items
3. Add the toolbar in the panel where you are adding this list.
4. Add layout: 'fit' to above panel

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

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