View Full Version : Basic List Question

9 Jul 2010, 9:44 AM
I have looked at some examples and I am trying to figure out how to create a basic list. Every example i have looked at is a complex list having to pull data from outside. I have a card layout and on card 2 I want to display a pick list of about 5 options but they will be static. So is there an easy way to do this? Whats in blue does not work.

icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {

var titleBar = new Ext.Toolbar({

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
dockedItems: [titleBar],
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
defaults: {
scroll: 'vertical'
listeners: {
afterlayout : function() {
cardswitch: function(card) {
items: [{
title: 'Card 1',
iconCls: 'time',
cls: 'card1',
contentEl: 'card1'
}, {
title: 'Card 2',
iconCls: 'team',
cls: 'card2',
items: [
new Ext.List({
{title: 'Option1'},
{title: 'Option2'}
}, {
title: 'Card 3',
cls: 'card3',
iconCls: 'download',
contentEl: 'card3'
}, {
title: 'Card 4',
cls: 'card4',
iconCls: 'settings',
contentEl: 'card4'
}, {
title: 'Card 5',
cls: 'card5',
iconCls: 'user',
contentEl: 'card5'


function handleError(e){

9 Jul 2010, 10:13 AM
Just to be a bit more specific. I have a card that will have a list with some options

By Name
By Category

When you select one of these items we will go to a new card to a list of items by (name/category)

Hope that makes sense

9 Jul 2010, 11:27 AM
this is quite a lot code^^

maybe you should give your code a better structure, and create the items step by step.
first u can create your list, add it to a panel and then add this panel to your toolbar.
for creating a static list, you should take a look at the example in the sencha folder in examples/list.

finally in some ext pseude code it could be something like this^^

var list = new Ext.List({
// add your config here, watch examples for details

var panel = new Ext.Panel({

var toooooolbar = new Ext.Toolbar({

somehow in this way i should work....

9 Jul 2010, 11:32 AM
Ok so your code is great nice and basic.. once you have the list how do add items to it? I am looking to display items to the user to pick from.

I know this doesn't work but maybe it will give you an idea.

list.add("Option 1");
list.add("Option 2");

Or am I going about this the wrong way. Do i just build some html on the display side.

<li>Option 1</li>
<li>Option 2</li>

That probably won't work though because I want these to look like native list items

Am I making any sense ;0

9 Jul 2010, 11:47 AM
i think that ul/li elemts will not work......looks like some jquery workaround^^

when for creating a list u need to create a store, that holds the data for your list. you add the data to your store not to your list. finally combine the store with your list.

finally it is important, that you download sencha 0.91 extract it and goto EXTRACTFOLDER/examples/list/src/index.js.

here you find an example with a local store, without using ajax or something like that.

or use e.g. chrome and check out these exmaples


then goto UserInterface and List.....

otherwiese i can spend some time in a few hours after having some cold mochito^^

9 Jul 2010, 11:50 AM
Just seems like a bit overkill to display a couple of options to a user ;)

9 Jul 2010, 11:57 AM
Maybe there is a better way to do this.. From a user experience stand point how would you (anyone reading this) go about this. I have a productions tab and when the user selects products I want to present them with some options

By Category
By Brand

These will go to new screens that give the user a different way of finding products.

Is this a good place for a list?
Should I create some buttons?
What would you do here.

I get confused when I have screens in screens on what the best approach would be.

9 Jul 2010, 2:32 PM
maybe u can use a bottomtoolbar from http://www.sencha.com/deploy/touch/examples/kitchensink/
from UI->Icons and add 2 panels. first panel contains your list, second panel contains your search form to filter your list. after click on listitems u can open an overlay for detailles information to the product
(see http://www.sencha.com/deploy/touch/examples/kitchensink/ ->UI->overlay......

9 Jul 2010, 4:37 PM
I am clearly not explaining myself...I will put together some mockups

10 Jul 2010, 1:15 AM
yes, do that and maybe write some pm, that we do not bore the rest of the sencha forum^^

10 Jul 2010, 5:23 AM
I want other people to see it just case they have similar problems. If you look at the attachments the user will be show the products screen (products.png) and from there they can choose to find products by a number of options. If the user selects by category they will be taken to the next screen (bycategory.png) where they can choose a category. When they choose a category they can see a list of products for that category.

Does this make sense now? Is this the best way about providing a smooth user experience for the user?