Panels in card llayout not showing up

[REMIBLOCH]

Hi, I've been trying for hours to include show a panel into a card layout container without any success. The main problem is that, when i use a panel with my items it works, but when i use a panel with card layout that should display the items panel in a card, it doesn't. Here is my code.

First of all the working part that gives the following :
panel.png

Ext.define("SAIMobile.view.OpenedTasks", {
    extend: 'Ext.Container',
    xtype:'openedtaskpage',
    config: {
        title: 'Opened',
        iconCls: 'add',
        cls: 'agenda',
        layout: 'vbox',
        items:[
            {
                xtype: 'titlebar',
                id: 'navTitlebar',
                docked: 'top',
                title: 'Nav',
                items: [
                    {
                        xtype:'button',
                        iconCls: 'arrow_left',
                        action: 'back',
                        align: 'left'
                    },{
                        xtype:'button',
                        iconCls: 'refresh',
                        action: 'refresh',
                        align: 'left'
                    },{
                        xtype:'button',
                        iconCls: 'settings',
                        action: 'filter',
                        align: 'right'
                    },{
                        xtype:'button',
                        iconCls: 'arrow_right',
                        action: 'next',
                        align: 'right'
                    }
                ],
                flex: 1
            },{
                xtype: 'list',
                store: {
                    fields: ['name'],
                    data: [
                        {name: 'Cowper'},
                        {name: 'Everett'},
                        {name: 'University'},
                        {name: 'Forest'}
                    ]
                },


                itemTpl: '{name}',
                flex:10
            } 
        ]
    }
});

Now i want to put this into a card so i create another item containing this :

Ext.define('SAIMobile.view.EntriesNavigator',{
    extend: 'Ext.Panel',
    xtype:'entriesnavigator',
    itemId: '#nav',
    layout: 'vbox',
    scrollbar: 'vertical',
    items: [
        {
            xtype: 'titlebar',
            id: 'navTitlebar',
            docked: 'top',
            title: 'Nav',
            items: [
                {
                    xtype:'button',
                    iconCls: 'arrow_left',
                    action: 'back',
                    align: 'left'
                },{
                    xtype:'button',
                    iconCls: 'refresh',
                    action: 'refresh',
                    align: 'left'
                },{
                    xtype:'button',
                    iconCls: 'settings',
                    action: 'filter',
                    align: 'right'
                },{
                    xtype:'button',
                    iconCls: 'arrow_right',
                    action: 'next',
                    align: 'right'
                }
            ],
            flex: 1
        },{
            xtype: 'list',
            store: {
                fields: ['name'],
                data: [
                    {name: 'Cowper'},
                    {name: 'Everett'},
                    {name: 'University'},
                    {name: 'Forest'}
                ]
            },


            itemTpl: '{name}',
            flex:10
        }    
    ]
})

and i create on the fly the element in the previous panel and add it to the items

Ext.define("SAIMobile.view.OpenedTasks", {
   extend: 'Ext.Container',
    xtype:'openedtaskpage',
    config: {
        title: 'Opened',
        iconCls: 'add',
        cls: 'agenda',
        layout: 'card',
        items:[
            
        ]
    },
    initComponent: function(){
        var nav = Ext.create('SAIMobile.view.EntriesNavigator');
        this.add(nav)
    }
});

The code executes without any error but i've a blank panel like if nothing were created, i also tried with this.setActiveItem, it doesn't work better.

Another try i did was to put inside the items[] array an element of type 'entriesnavigator'...but i still have a blank panel.

I'm having this problem all the time so there is obviously something that i didn't get.

Any help would be greatly appreciated

Thank in advance

[mitchellsimoens]

Sencha Touch 2 doesn't use the initComponent method, it's initialize now and don't forget to execute callParent within it so not to break inheritance.