PDA

View Full Version : How to create an Ext.List on an Ext.Panel ?



ThiemNguyen
15 Oct 2011, 10:26 PM
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
16 Oct 2011, 2:40 AM
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
18 Oct 2011, 7:54 AM
You should probably post in the Sencha Touch 1x Q&A forums instead ;)

lorandT
15 Nov 2011, 3:13 AM
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
14 Jun 2012, 4:43 AM
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.