adding an Ext.list to an Ext.TabPanel: items in list not selectable

1 Attachment(s)

Hi,
I'm using Sencha Touch 2.0.pr2

I found nothing in Your sencha 2.x forum so I'm asking. I already reduced my problem to the following:
I created an Ext.TabPanel

I created an Ext.data.Store

inside the Ext.TabPanel I defined an item as a list with xtype:'list', everything is working fine

I created an Ext.List outside the Ext.TabPanel with Ext.create (or new Ext.List) using the same parameters and the result is, that the list-items ar not selectable.

Can somebody help me?

Thank You very much,
Frederic

Here is my code (the entire file):
Attachment 29246

Ext.application({
name: 'MonsterApp',

launch: function() {

Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [ test1,
test2,
{ xtype: 'list',
title: 'Test3 works',
itemTpl: "{title}",
store: listdata
}
]
});
}
});

// listdata
var listdata = Ext.create('Ext.data.Store', {
fields: ['title'],
data: [ {title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ]
});

// List definition Test1
var test1 = Ext.create('Ext.List',{
title: 'Test1',
itemTpl: '{title}',
store: listdata
});

// List definition Test1
var test2 = new Ext.List({
title: 'Test2',
itemTpl: '{title}',
store: listdata
});

This is working for me:

Code:

var listdata = Ext.create('Ext.data.Store', { fields : ['title'], data : [ {title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ] }); var test1 = Ext.create('Ext.List', { title: 'Test1', itemTpl: '{title}', store: listdata }); Ext.create('Ext.tab.Panel', { fullscreen : true, items : [test1] });

Hi Mitchell,
thank You for Your answer. I tried ist, but it did not work: I can see the list, but I can not select an item.

So I show You the code You sent me again, but I put the creation of the tab panel into the 'application'.
I also downloaded again the sencha library (just to get sure that everything is ok).

sorry, but it is still not working

can You help me?

Thank You very much,
Frederic Espitalier

Code:

/* this is the calling HTML file: <!DOCTYPE html> <html> <head> <title>Getting Started</title> <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"> <script type="text/javascript" src="touch/sencha-touch-all.js"></script> <script type="text/javascript" src="app_06c.js"></script> </head> <body></body> </html> */ Ext.application({ name: 'myApp', launch: function() { Ext.create('Ext.tab.Panel', { fullscreen : true, items : [test1] }); } }); var listdata = Ext.create('Ext.data.Store', { fields : ['title'], data : [ {title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ] }); var test1 = Ext.create('Ext.List', { title: 'Test1', itemTpl: '{title}', store: listdata });

You shouldn't create things outside your application. This works for me just by moving your list and store within the launch method:

Code:

Ext.application({ name: 'myApp', launch: function() { var listdata = Ext.create('Ext.data.Store', { fields : ['title'], data : [ {title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ] }); var test1 = Ext.create('Ext.List', { title: 'Test1', itemTpl: '{title}', store: listdata }); Ext.create('Ext.tab.Panel', { fullscreen : true, items : [test1] }); } });

Hi Mitchell,
thank's a lot. Now I see my mistake. I was looking for a way to not define/create everything in the Launch method.
Now I took a closer look to the 'Ext.application' API and found the headline 'Telling Application about the rest of the app' and that was the part I should have looked first. Probably that would be worth a link in the getting started guide.

I hope, the "upcoming application architecture guide" will come out quick.

Thank's again and that you answered so quick,

Frederic Espitalier