sencha touch 2 dataview breaded between checkboxfield at top and button at bottom - sencha-touch

Question

I've this requirement of giving user provision of subscribing to certain categories. The layout which is to be designed is having -
checkbox => at top toggling automatic subscription setting.
dataview => at middle, having list of subscriptions and checkbox field.
button => allowing user to update the subscription list.
I've setup the dataview correctly. Dataview is added as fallows -
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
When I try to add component no 1 and 3 ( specified above in question ) , dataview is not getting displayed. I'm getting checkbox and button only. When I inspect the rendered html, I realize that dataview is not even populating with data config. The code I used to add these three components is as fallows -
Ext.define("PApp.view.home.Subscription", {
extend:'Ext.Container',
xtype:'subscription',
config: {
layout:'fit',
fullscreen:true,
scrollable:false,
items: [
{
xtype:'container',
fullscreen:true,
items:[
{
xtype:'checkboxfield',
name : 'subscriber-setting',
label: 'Subscriber',
value: 'yes',
checked: true
},
{
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
},
{
xtype:'button',
text:'Update',
ui:'action'
}
}
]
}
});
I can't figure out why dataview is not getting displayed ( not even populated with data ). When dataview is not breaded between the checkbox and button, it gets rendered as expected.
and when dataview is breaded ,it looks like this -

Answer 1

Please try giving some height in css of template or dataview config with hbox layout of container

Answer 2

Tried few things and managed to solve this problem. Mostly, list or dataview are used to display fullscreen content. But in my case, I needed it between two other components.
To make this work, I added following config to parent container -
layout: {
type: 'vbox',
align : 'stretch'
},
This was not sufficient though. Need to add flex config in each component. Without this config, dataview was not being seen. And I was wrong about data not populating indeed it was ( missed it first time since html is deeply nested ). Here's the preview how it looks.