Problem to add Ext.List into Ext.TabPanel.

[Riaz]

I want to add Ext.List into Ext.TabPanel. I will be glad, if anybody post a sample example.

[Riaz]

I have written flowing code. but it is not working. What I did wrong on the below code-


Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});


var btnContact = new Ext.Tab({
title: 'Contact',
iconCls: 'bookmarks',
items: new Ext.List({
title: 'My Tab',
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString: function (record) {
return record.get('firstName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz'
}]
})
})

});

[Riaz]

Is there anybody who can help me? Wasting whole day but there is no solution.

[rharri]

Needs to be cleaned up, but hopefully this can get you started.



Ext.setup({
onReady: function() {

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var btnContact = new Ext.TabPanel({
fullscreen: true,
items: [ new Ext.List({
title: 'My Tab',
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString: function (record) {
return record.get('firstName');
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Hello', lastName: 'World'}
]
})
}), { title: 'Tab 2' } ]
});
}
});

[Riaz]

Hi rharri:

Thanks for your help.
Could you please inform me why I am getting flowing error:

"Uncaught Error: Ext.List: itemTpl is a required configuration."

[evant]

Exactly what it says: http://dev.sencha.com/deploy/touch/docs/?class=Ext.List&member=itemTpl

[Riaz]

Thanks Evant again.

Now it is working. Thanks 'rharri' again