PDA

View Full Version : A list In A tab



djolafrite
21 Jun 2010, 7:09 AM
Hello,

I have a problem, I would like to insert a scrollable list in a tab but I do not find the solution.

I have my tab :

demos.Tabs = new Ext.TabPanel({
sortable: true, // Tap and hold to sort
items: [{
title: 'Tab 1',
html: 'Tab 1',
cls: 'card card5'
},
{
title: 'Tab 2',
html: 'Tab 2',
cls: 'card card4'
},
{
title: 'Tab 3',
html: 'Tab 3',
cls: 'card card3'
}]
});


But instead of having "html : ..." I would put a List like in sensa touch example




Could anybody help me please.

Thx

Stuart-SwarmOnline
21 Jun 2010, 7:48 AM
I think you will have to use the "items" config of the Tab and add the List there, something like...



{
title: 'Tab1',
items: [ new List({...}) ]
}


obviously swap in a valid List definition...

djolafrite
21 Jun 2010, 11:57 PM
thank you for your reply.

I just tested it, but it's not exactly what I would like.

I would like to put (in the previous Tabs Code) a List like that :
-------------------------------------------------------------
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

demos.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
data: [
{firstName: 'Julio', lastName: 'Benesh'},
{firstName: 'Julio', lastName: 'Minich'},
{firstName: 'Tania', lastName: 'Ricco'},
{firstName: 'Odessa', lastName: 'Steuck'},
{firstName: 'Nelson', lastName: 'Raber'},
{firstName: 'Tyrone', lastName: 'Scannell'},
{firstName: 'Allan', lastName: 'Disbrow'},
{firstName: 'Cody', lastName: 'Herrell'},
{firstName: 'Julio', lastName: 'Burgoyne'},
{firstName: 'Jessie', lastName: 'Boedeker'},
{firstName: 'Allan', lastName: 'Leyendecker'},
{firstName: 'Javier', lastName: 'Lockley'},
{firstName: 'Guy', lastName: 'Reasor'},
{firstName: 'Jamie', lastName: 'Brummer'},
{firstName: 'Jessie', lastName: 'Casa'},
{firstName: 'Marcie', lastName: 'Ricca'},
{firstName: 'Gay', lastName: 'Lamoureaux'},
{firstName: 'Althea', lastName: 'Sturtz'},
{firstName: 'Kenya', lastName: 'Morocco'},
{firstName: 'Rae', lastName: 'Pasquariello'},
{firstName: 'Ted', lastName: 'Abundis'},
{firstName: 'Jessie', lastName: 'Schacherer'},
{firstName: 'Jamie', lastName: 'Gleaves'},
{firstName: 'Hillary', lastName: 'Spiva'},
{firstName: 'Elinor', lastName: 'Rockefeller'},
{firstName: 'Dona', lastName: 'Clauss'},
{firstName: 'Ashlee', lastName: 'Kennerly'},
{firstName: 'Alana', lastName: 'Wiersma'},
{firstName: 'Kelly', lastName: 'Holdman'},
{firstName: 'Mathew', lastName: 'Lofthouse'},
{firstName: 'Dona', lastName: 'Tatman'},
{firstName: 'Clayton', lastName: 'Clear'},
{firstName: 'Rosalinda', lastName: 'Urman'},
{firstName: 'Cody', lastName: 'Sayler'},
{firstName: 'Odessa', lastName: 'Averitt'},
{firstName: 'Ted', lastName: 'Poage'},
{firstName: 'Penelope', lastName: 'Gayer'},
{firstName: 'Katy', lastName: 'Bluford'},
{firstName: 'Kelly', lastName: 'Mchargue'},
{firstName: 'Kathrine', lastName: 'Gustavson'},
{firstName: 'Kelly', lastName: 'Hartson'},
{firstName: 'Carlene', lastName: 'Summitt'},
{firstName: 'Kathrine', lastName: 'Vrabel'},
{firstName: 'Roxie', lastName: 'Mcconn'},
{firstName: 'Margery', lastName: 'Pullman'},
{firstName: 'Avis', lastName: 'Bueche'},
{firstName: 'Esmeralda', lastName: 'Katzer'},
{firstName: 'Tania', lastName: 'Belmonte'},
{firstName: 'Malinda', lastName: 'Kwak'},
{firstName: 'Tanisha', lastName: 'Jobin'},
{firstName: 'Kelly', lastName: 'Dziedzic'},
{firstName: 'Darren', lastName: 'Devalle'},
{firstName: 'Julio', lastName: 'Buchannon'},
{firstName: 'Darren', lastName: 'Schreier'},
{firstName: 'Jamie', lastName: 'Pollman'},
{firstName: 'Karina', lastName: 'Pompey'},
{firstName: 'Hugh', lastName: 'Snover'},
{firstName: 'Zebra', lastName: 'Evilias'}
]
});


demos.List = new Ext.Panel({
layout: Ext.platform.isPhone ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center'
},
cls: 'demo-list',
items: [{
width: 500,
height: 500,
xtype: 'list',
store: demos.ListStore,
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true
}]
});
--------------------------------------------------

I tried to put item: [ demo.List ] but it does'nt work

TommyMaintz
22 Jun 2010, 1:48 PM
Could you be a bit more specific what exactly doesn't work? Does it throw an error? It is very hard for us to help you without really knowing what the problem is.

xantus
22 Jun 2010, 4:26 PM
You probably forgot to create the demos namespace before defining them

put this first:

Ext.ns('demos');

djolafrite
23 Jun 2010, 12:24 AM
Thank you again for your replys.

The problem is that I don't know how to do...

When I try something (I made tests) and nothing works because I don't know.

I have 2 sides on my screen (like sencha touch kitchensink example):

the first on the left where I have a menu, and when I click on one item of this menu on the right side 3 tabs appears
and I would like to put a list in one of this tab.

But when I try something to put a List in the tab the application break when I click on the menu item.

I don't know if my explanations are explicit...

And I thank you for your help

xantus
24 Jun 2010, 11:56 AM
You can help me out by posting a url to a test case, or post some code...

tkb1
23 Jul 2010, 6:27 AM
I have the code same as given in the Tabs2 example. I would like that when I click on Tab1 a new page(card) appears that has the list in it. I studied the "Getting Started" guide but not able to figure out how to add a card that contains list and also has top tabs as in example for Tab. I want to add another card - on clicking Tab2 that opens up a form.

Please help.