Sencha Touch 2 add two list vertically?

0
votes

I want to have a panel with two lists vertically shown. The below code :

Ext.define('CD.abc.Profile', {
extend: 'Ext.Panel',
layout: 'fit',
fullscreen: true,
config: {
   layout:     'vbox',
    items:      [
        {
            xtype: 'mylist1'
        },
        {
            xtype: 'mylist2'
        }
    ]
}

});

But the item dont show, page is appearing blank. I can find the elements in the dom structure but they remain invisible in the view. Can any one help me regarding this?

3
sencha-touchextjssencha-touch-2
Try to add flex: 1 to both the list configs – Titouan de Bailleul
HI @amrit_neo , why can't u add embed these into two panels and add those to the items list. – heyjii

3 Answers

1
votes

Try this. Its working for me.

        Ext.define('CD.abc.Profile', {
        extend: 'Ext.Panel',
        config: {
           layout:'vbox',
            items:      [
                {
                    xtype: 'mylist1', // x-type of your list1 view
                    flex:1
                },
                {
                    xtype: 'mylist2', // x-type of your list2 view
                    flex:1
                }
            ]
        }
        });
0
votes

pass the flex property as 1

flex: 1

0
votes

Try this work's for me:

Ext.define('Sencha.view.Blog', {
extend: 'Ext.Panel',
xtype:'blogpage',

config:{
    layout:'fit',
    width:'100%',
    height:'100%',
    title: 'Blog',
    iconCls: 'star',
    style:'background-color: red;',

    items:[
            { 
                xtype:'list',
                id:'thelist',
                style:'background-color: blue;',
                height:'100%', width:'20%',left:0,
                        store: {
            fields: ['name', 'number'],
            sorters: 'name',
            data: [
                {name: 'Shawshank Redemption', number: 5},
                {name: 'SuperBad', number: 3},
                {name: 'God Father', number: 5},
                {name: 'Forest Gump', number: 4.5},
                {name: 'A Beautiful Mind', number: 5},
            ]
        },

        itemTpl: '{name}'
            },
            { 
                xtype:'list',
                id:'thelist1',
                style:'background-color: blue;',
                height:'100%', width:'20%',right:0,
                        store: {
            fields: ['name', 'number'],
            sorters: 'name',
            data: [
                {name: 'Shawshank Redemption', number: 5},
                {name: 'SuperBad', number: 3},
                {name: 'God Father', number: 5},
                {name: 'Forest Gump', number: 4.5},
                {name: 'A Beautiful Mind', number: 5},
            ]
            },
            itemTpl: '{name}'
            }
        ]
}});