Two lists same container same store - sencha-touch-2

Question

I got this class where I'm trying to show some data from the same store in the same container. I did it this way because I want to have two rows each on a separate line and I was not having
too much control over them. Here's the class:
Ext.define('Clue.view.ListQuestions', {
extend: 'Ext.Container',
requires: ['Ext.dataview.List'],
xtype: 'listquestions',
config: {
id: 'listquestions',
items: [{
xtype: 'list',
id: 'questionLi1',
baseCls: 'questionLi1',
flex: 1,
store: {
xtype: 'levelstore',
filters: [{
filterFn: function(item) {
return item.data.levelId < 2 && item.data.questionId < 6;
}
}]
},
itemTpl: '<div>{questionId}</div>'
},{
xtype: 'list',
id: 'questionLi2',
baseCls: 'questionLi2',
flex: 1,
store: {
xtype: 'levelstore',
filters: [{
filterFn: function(item) {
return item.data.levelId < 2 && item.data.questionId > 5;
}
}]
},
itemTpl: '<div>{questionId}</div>'
}]
}
})
If I remove the second list, first list is showing, otherwise the first list is not showing. What I'm doing wrong ?
here's the store:
Ext.define('Clue.store.LQuestions', {
extend: 'Ext.data.Store',
xtype: 'levelstore',
requires: ['Ext.data.proxy.LocalStorage'],
config: {
model: 'Clue.model.LQuestions',
storeId: 'levelStore',
sorters: [{
property: 'levelId',
direction: 'ASC'
}],
proxy: {
type: 'localstorage',
id: 'levelstorage'
}
}
})
other details
I added some css on the questionLi1 and questionLi2 and their items. 3px red border. the lists are taking space but in the first list elements are not there ( not even in html ) second list is rendered fine. if I put a console.log() in the first filterFn function nothing shows up.. so I was thinking that maybe I overwrite something...
this is what I get
and if I do:
...
flex: 1,
/*store: {
xtype: 'levelstore',
filters: [{
filterFn: function(item) {
return item.data.levelId < 2 && item.data.questionId > 5;
}
}]
},*/
itemTpl: '<div>{questionId}</div>'
...
on the second list I get

Answer 1

Adding a flex config to a component only works if you specify a vbox of hbox layout to its parent like so
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'list',
itemTpl: '{title}',
flex: 1,
data: [
{ title: 'List 1: Item 1' },
{ title: 'List 1: Item 2' },
{ title: 'List 1: Item 3' },
{ title: 'List 1: Item 4' }
]
}, {
xtype: 'list',
itemTpl: '{title}',
flex: 1,
data: [
{ title: 'List 2: Item 1' },
{ title: 'List 2: Item 2' },
{ title: 'List 2: Item 3' },
{ title: 'List 2: Item 4' }
]
}]
});
Sencha Fiddle