PDA

View Full Version : Adding Ext.List to Ext.TabPanel



kru424
29 Jul 2010, 1:04 PM
I am trying to create a small mobile site that has 4 sections. I'm using a TabPanel for navigation. One of the panels needs to be a directory of employees which I'm trying to use a List for... The list has the following code:



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

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{lastName}</strong>, {firstName}</div></tpl>',
itemSelector: 'div.contact',

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

disclosure: {
scope: 'test',
handler: function(record, btn, index) {
makeAjaxRequest(record.get('firstName')+" "+record.get('lastName'));
}
},

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

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

data: [
.. my data here
]
})
};

if (!Ext.platform.isPhone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
}

Is there a way to use this code and place the object within a TabPanel? Hope this makes sense.

evant
29 Jul 2010, 5:39 PM
Just put it as a child item of the tab:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

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

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

kru424
30 Jul 2010, 10:51 AM
Thank you Evan. Works perfectly.

Riaz
31 Jan 2011, 7:40 PM
Hi Evan:

I have run your code today. It is not working. Do I need to add anything?

evant
31 Jan 2011, 7:59 PM
Read the error console in Chrome.