Datalist item is not appearing in panel

[yogesh2810]

Hi
I am new to Sencha touch trying to add dataview inside panel but dataview is not showing up. Here is code

Except dataview every other control is appearing perfectly

Ext.define('MyApp.view.Number', {
extend: 'Ext.Panel',

xtype: 'CBNumberPanel',
id: 'numberPanel',

requires: ['Ext.field.Text', 'Ext.dataview.DataView'],

config: {
//add 2 panels vertically divided
//name: 'numberentrybox'
//name: 'numberpad', 'scorelisting'
align: 'start',
pack: 'start',
layout: 'hbox',
fullscreen: true,
scrollable: true,

// This is property defined in this class
// property can be accessed using getEnteredNumber() and setEnteredNumber(X)
enteredNumber : '',

items: [
{
xtype: 'panel',
id: 'numberentrybox',
docked: 'top',
layout: 'hbox',
style: { 'border-bottom': '2px solid blue' },
border: 1,
align: 'center',
pack: 'center',
items: [
{ xtype: 'button', text: 'Hint', margin: 4, id: 'hint', action: 'hintclicked', docked:'right' },

{
align: 'center', pack: 'center', id: 'enterednum', xtype: 'textfield', centered: false, readonly: true, maxLength: 4, id: 'enterednumber', margin: 1, align:'center', pack: 'center', style: 'border-color: grey; border-style: solid;'
},


{ xtype: 'button', text: 'Give Up', margin: 4, id: 'giveup', action: 'giveupclicked', docked:'left' }
]
},//numberentrybox
{
xtype: 'panel',
id: 'numberpadpanel',
layout: 'vbox',
flex: 1,
items: [
{
xtype: 'container',
id: 'line1',
layout: 'hbox',
align: 'center',
pack: 'center',
items: [
{ xtype: 'button', text: '1', margin: 4, id: 'one', action: 'numberclicked' },
{ xtype: 'button', text: '2', margin: 4, id: 'two', action: 'numberclicked' }
]
},
{
xtype: 'container',
id: 'line2',
layout: 'hbox',
align: 'center',
pack: 'center',
items: [
{ xtype: 'button', text: '3', margin: 4, id: 'three', action: 'numberclicked' },
{ xtype: 'button', text: '4', margin: 4, id: 'four', action: 'numberclicked' }
]
},
{
xtype: 'container',
id: 'line3',
layout: 'hbox',
align: 'center',
pack: 'center',
items: [
{ xtype: 'button', text: '5', margin: 4, id: 'five', action: 'numberclicked' },
{ xtype: 'button', text: '6', margin: 4, id: 'six', action: 'numberclicked' }
]
},
{
xtype: 'container',
id: 'line4',
layout: 'hbox',
align: 'center',
pack: 'center',
items: [
{ xtype: 'button', text: '7', margin: 4, id: 'seven', action: 'numberclicked' },
{ xtype: 'button', text: '8', margin: 4, id: 'eight', action: 'numberclicked' }
]
},
{
xtype: 'container',
id: 'line5',
layout: 'hbox',
align: 'center',
pack: 'center',
items: [
{ xtype: 'button', text: '9', margin: 4, id: 'nine', action: 'numberclicked' },
{ xtype: 'button', text: '0', margin: 4, id: 'zero', action: 'numberclicked' }
]
},
{ xtype: 'button', text: 'Enter', margin: 4, ui:'confirm', action: 'enterclicked' },
{ xtype: 'button', text: 'delete', margin: 4, action: 'deleteclicked' }
]
}, //numberpad
{
xtype: 'panel',
id: 'scorepanel',
layout: 'vbox',
html: 'score',
flex: 2,
border: 1,
style: { 'border-left': '2px solid blue' },//style: 'border-color: red; border-style: solid;'
title: 'score List',
items: [
//{ xtype: 'button', text: 'AAA', margin: 4, ui:'confirm'},
//{ xtype: 'button', text: 'BBB', margin: 4},
{
xtype: 'dataview',
id: 'scorelistbox',
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie', age: 100},
{name: 'Rob', age: 21},
{name: 'Tommy', age: 24},
{name: 'Jacky', age: 24},
{name: 'Ed', age: 26}
]
},

itemTpl: '<div>{name} is {age} years old</div>'
}
]
} // scorepanel
] // items on viewport or main canvas


} // config

});

[suzuki1100nz]

Try giving your dataview a height

[yogesh2810]

Hi suzuki1100nz,

Thanks for taking time to answer my query

Can't believe it was that simple

After adding height:100 to dataview it showed up

thanks a ton !!!!

[suzuki1100nz]

No problem - could you please mark the thread as answered