Sencha Touch 2 add two list vertically? - sencha-touch

Question

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?

Answer 1

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
}
]
}
});

Answer 2

pass the flex property as 1
flex: 1

Answer 3

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}'
}
]
}});