Sencha touch List

Question

I'm new in sencha touch. I run into some strange behavior. Shortly I want to make one window with toolbar and list below.

Main launch code:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'xxx',

    controllers: ['Main'],
    views: ['Home', 'Header', 'Footer', 'list.MainMenu'],
    stores: ['MainMenu'],
    models: ['MenuItem'],


    launch: function() {
        Ext.create('xxx.view.Viewport');
    }
});

Viewport view:

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

    config: {
        fullscreen: true,

        items: [
            {
                xtype: 'headerpanel',
            },{
                xtype: 'MainMenu'
            }
        ]
    }
});

Header view:

Ext.define('xxx.view.Header', {
    extend: Ext.Panel,
    xtype: 'headerpanel',

    config: {               
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: '<img src="lib/resources/images/x.png" />',  

                items: [
                    {
                        text: 'One',
                        align: 'left'
                    },{
                        text: 'Two',
                        align: 'right'
                    }
                ]
            }
        ]
    }
});

Meniu view:

Ext.define('xxx.view.list.MainMenu', {
    extend: 'Ext.List',
    xtype: 'MainMenu',

    requires: ['xxx.store.MainMenu'],

    config: {
        itemTpl: '{title}',
        store: 'MainMenu'       
    }
});

Menu store:

Ext.define('xxx.store.MainMenu', {
    extend: 'Ext.data.Store',

    config: {
        model: 'xxx.model.MenuItem',
        data: [
            {icon: 'a', title: 'A'},
            {icon: 'b', title: 'B'},
        ]
    }
});

Menu model:

Ext.define('xxx.model.MenuItem', {
    extend: 'Ext.data.Model',   

    config: {
        fields: ['icon', 'title']
    }
});

The result of this piece code is just toolbar without any list.

enter image description here

I set layout to 'fit' value the result is opposite: only list I can see.

enter image description here

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2012-11-21T17:55:34

You forgot to set a layout to your Viewport view. Without a layout, container don't know how to display inner items.

Try the following :

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

    config: {
        fullscreen: true,
        layout:'fit',
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: '<img src="lib/resources/images/x.png" />',  

                items: [{
                    text: 'One',
                    align: 'left'
                },{
                    text: 'Two',
                    align: 'right'
                }]
            },{
                xtype: 'list',
                itemTpl: '{title}',
                store: 'MainMenu' 
            }
        ]
    }
});

You can find more about layout here

Sencha touch List

1 Answers