1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    9
    Vote Rating
    0
    REMIBLOCH is on a distinguished road

      0  

    Default Panels in card llayout not showing up

    Panels in card llayout not showing up


    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
    Code:
    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 :
    Code:
    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
    Code:
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread