How to create an Ext.List on an Ext.Panel ?

[ThiemNguyen]

It seems so easy. Actually I got it on ST 1 but haven't got it on ST2 yet. :(

This is the example code snippet for Ext.List component from the ST2 Docs:

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


var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',


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


data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Jacky', lastName: 'Nguyen'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Nigel', lastName: 'White'},
{firstName: 'Don', lastName: 'Griffin'},
{firstName: 'Nico', lastName: 'Ferrero'},
{firstName: 'Nicolas', lastName: 'Belmonte'},
{firstName: 'Jason', lastName: 'Johnston'}
]
});


var list = new Ext.List({
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store
});


I want to create a Ext.Panel component containing that list and other components (I simplified from my app by creating a dummy toolbar named "something").
Here's what I wrote:


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


var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',


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


data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Jacky', lastName: 'Nguyen'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Nigel', lastName: 'White'},
{firstName: 'Don', lastName: 'Griffin'},
{firstName: 'Nico', lastName: 'Ferrero'},
{firstName: 'Nicolas', lastName: 'Belmonte'},
{firstName: 'Jason', lastName: 'Johnston'}
]
});


var list = new Ext.List({
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store
});


var home = Ext.create('Ext.Panel',{
fullscreen: true,
scrollable: 'vertical',
items: [{xtype:'toolbar',docked:'top',title:'something'},list]
});

Then the panel with docked toolbar displays normally but the list does not.
Using Chrome element inspector, I see that the list is wrapped in a div with classnames "x-container x-list" with height set to 0. :(
I tried some other ways, like fullscreen: true, layout: 'fit' or wrapping that Ext.List in a container then use home.add(ListContainer) but nothing works.
I'm very new to ST2.
Greatly appreciate any helps! :) Thank you beforehand.

[DrunkenBeard]

There are 2 problems with your code :

1) The list not appearing is a layout problem : just add a vbox layout to your panel and add a "flex: 1" to your list and it should work.

2) Even if it will indeed work what you wrote is not the way it's supposed to be done in ST2. You might want to read these 2 links :

The Data Package (http://docs.sencha.com/touch/2-0/#!/guide/data)
Using Lists (http://docs.sencha.com/touch/2-0/#!/guide/list)

Hope it helped :)

PS : Another thing to note is that you used getGroupString in your store but forgot to set the grouped property of your list to true.

[jay@moduscreate.com]

You should probably post in the Sencha Touch 1x Q&A forums instead ;)

[lorandT]

Hi,

I have a similar problem, I use an MVC approach and if I defined and add a panels into a carousel is working not the way I want to work, but I see something/:). Now if I try this with a Ext.List is not working, only a blank page, I also copied the example from documentation and added to carousel not working, created and added to a panel and added this panel to carousel still not working, can you help me, what I missed.

thx, Lorand

[alexandr_ch]

There is another, more appropriate decision to fix this problem.
Adding a 'vbox' layout to panel and a 'flex: 1' to your list works well, but makes some scrolling problems when your list's and panel's content doesn't fit to screen viewport.

Just only set 'scrollable: false' property for your List and it's content will appear.