Sencha Touch 2 - embed a Component with xtype in items but not work

Question

Lately im trying to learn ST2 myself, and then bug things happend. I create a Ext.Component view, and then i put it to a parent view which extends Ext.Container. Unfortunately, there is nothing but air rendered in my page. Some guys help me ? Much thanx. Here is my CODES below.

---

app.js

Ext.application({
    name: 'myAPP',

    requires: [
        'Ext.MessageBox'
    ],

    models: [
        'Goods'
    ],

    views: [
        'Viewport',
        'GoodsList',
        'GoodsListItem'
    ],

    controllers: [],

    stores: [
        'GoodsList'
    ],
    // some basic codes...
});

Viewport.js - view

Ext.define('myAPP.view.Viewport', {
    extend: 'Ext.tab.Panel',

    xtype: 'viewport',

    config: {
        fullscreen: true,

        tabBarPosition: 'bottom',

        defaults: {
            styleHtmlContent: true
        },

        items: [
            {
                title: 'Series',
                iconCls: 'list',
                xtype: 'goodslist'
            }
        ]
    }
});

GoodsList.js - view

Ext.define('myAPP.view.GoodsList', {
    extend: 'Ext.Container',

    requires: [
        'Ext.TitleBar',
        'myAPP.view.GoodsListItem'
    ],

    xtype: 'goodslist',

    config: {
        layout: {
            type: 'fit'
        },

        items: [
            {
                xtype: 'titlebar',

                title: 'GoodsList',

                docked: 'top',

                items: [
                    {
                        iconCls: 'more',
                        align: 'right'
                    }
                ]
            },
            {
                xtype: 'goodslistitem'
            }
        ]
    }
});

GoodsListItem.js - view

Ext.define('myAPP.view.GoodsListItem', {
    extend: 'Ext.Component',

    xtype: 'goodslistitem',

    config: {
        store: 'goodsliststore',

        tpl: new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="s-row">',
                    '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                        '<img src="{thumb}" />',
                        '<h1>{#}. {pname}</h1>',
                        '{price}',
                    '</div>',
                '</div>',
            '</tpl>'
        )
    }
});

GoodsList.js - store

Ext.define('myAPP.store.GoodsList', {
    extend: 'Ext.data.Store',

    config: {
        model: 'myAPP.model.Goods',

        storeId: 'goodsliststore',

        data: [
            {
                pname: 'Goods',
                price: '5RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '15RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '25RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '35RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            }
        ]
    }
});

Goods.js - model

Ext.define('myAPP.model.Goods', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'pname', type: 'string' },
            { name: 'price', type: 'int' },
            { name: 'thumb', type: 'string' }
        ]
    }
});

---

ST Version - Touch 2.1.1

Answer 1

It seems you are missing some of the basics concepts for working with lists in Sencha Touch.

Your GoodsList view doesn't actually have an Ext.dataview.List, so that's why you don't see anything. Replace the element:

{
    xtype: 'goodslistitem'
}

with a list component, something like:

{
    xtype: 'list'
}

Now let's put it fullscreen and let's use the XTemplate you defined in GoodsListItem.js as the itemTpl for your list:

{
    xtype: 'list',
    fullscreen: true,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="s-row">',
                '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                    '<img src="{thumb}" />',
                    '<h1>{#}. {pname}</h1>',
                    '{price}',
                '</div>',
            '</div>',
        '</tpl>'
    )

}

You can actually delete your GoodsListItem.js view. If you really want to go with a separate list item that can use components layout, you should set the defaultType configuration, but this has worse performance and adds a level of complexity. Check the guide on Using Dataviews if you are interested.

Note: I am assuming your Ext.XTemplate syntax is correct.

[EDIT] My code probably won't work as it is: check this question about using XTemplate as itemTpl

Last we have to say Sencha Touch which Store to bind to the list, this is done through the store configuration:

{
    xtype: 'list',
    fullscreen: true,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="s-row">',
                '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                    '<img src="{thumb}" />',
                    '<h1>{#}. {pname}</h1>',
                    '{price}',
                '</div>',
            '</div>',
        '</tpl>'
    ),
    store: 'GoodsList'
}

This should point you on the right track. If you ask me, you are trying to accomplish something quite complex from scratch, I would suggest you to make your way to this starting with a basic list example:

Ext.create('Ext.List', {
    fullscreen: true,
    itemTpl: '{title}',
    data: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
        { title: 'Item 4' }
    ]
});

Then adding in steps more complex stuff, like binding to an Ext.data.Store, using an Ext.Template as itemTpl, then an Ext.XTemplate