Using list in container or panel in sencha touch

Question

I am learning sencha touch. I am facing an issue while using xtype:'list', in a container. ie it does not show anything to me . My code is:

{
    xtype:'container',
    items:[
        {
            xtype: 'list',
            id: 'lists',
            fields: [{name:'name'}],
            store: {
                data: [
                    {name: 'Cowper'},
                    {name: 'Everett'},
                    {name: 'University'},
                    {name: 'Forest'}
                ]
            },
            itemTpl: '<div>{name}</div>'
        }
    ],
}

Kindly point out where i am wrong ?? Any help would be great :) Thanks in advance.

Answer 1

I think it is solved when you add:

layout: 'fit'

to your container. This config sizes its child components.

ST2 Layout Guide

Note that list is actually a container. Try to minimize your nesting.
Take a look at the fullscreen config too.

Answer 2

The issue is in your code. Try this -

Ext.create('Ext.List', {
    fullscreen: true,
    id:'lists',
    itemTpl: '<div>{name}</div>',
    data: [
        {name: 'Cowper'},
        {name: 'Everett'},
        {name: 'University'},
        {name: 'Forest'}
    ]
});

OR

Ext.define('TestModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name']
    }
});

var store = Ext.create('Ext.data.Store', {
   model: 'TestModel',
   data: [
        {name: 'Cowper'},
        {name: 'Everett'},
        {name: 'University'},
        {name: 'Forest'}
   ]
});

Ext.create('Ext.List', {
   fullscreen: true,
   id:'lists',
   itemTpl: '<div>{name}</div>',
   store: store   
});