PDA

View Full Version : List Items Striping



mrtedweb
22 Jul 2011, 3:00 PM
Hello everyone,

I've just started playing around with the Sencha Touch 1.0 and the List control when I noticed there was no 'striping' config option. So... here's a quick little snippet of code that I used to accomplish this.

Step 1: Create css tag definitions like below:

.item0 {
background-color: #ddeeff;
}

.item1 {
background-color: #f0f8ff;
}


Step 2: Create Sencha List object within your js code. Note: item selection mode has been disabled:


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

var data = [
{firstName: 'Julio', lastName: 'Benesh'},
{firstName: 'Zebra', lastName: 'Evilias'}
];

itemTemplate = new Ext.XTemplate(
{
'<tpl for=".">',
'{firstName} {lastName}',
'</tpl>'
);

store = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
data: data
});


contentList = new Ext.List({
width: Ext.is.Phone ? undefined : 300,
height: '100%',
store: store,
itemTpl: itemTemplate,
grouped: false,
indexBar: true,
trackOver: false,
selectedItemCls: 'x-plain',
pressedCls: 'x-plain',
singleSelect: false
});


Step 3: Listen for List item's 'afterrender' event. This will trigger the striping:


contentList.on('afterrender', onAfterRender);


Step 4: Define the 'afterrender' event handler which will add the striping:


onAfterRender: function(cmp, index, element, e)
{
for (var i = 0; i < cmp.store.data.length; i++)
{
Ext.get(cmp.getNode(i)).addCls(i % 2 == 0 ? 'item0' : 'item1');
}
}


Hope this helps...

gamebit07
13 Sep 2011, 3:10 PM
hi i did the way you explained, but i get an error:

this.custList = new Ext.ux.BufferedList({
store: this.atmsStore,
grouped: true,
indexBar: true,....
........}
this.items = [this.custList];
MyApp.views.MyListView.superclass.initComponent.call(this);
this.custList('afterrender', onAfterRender);
.. end of ui
onAfterRender: function(cmp, index, element, e)
{
for (var i = 0; i < cmp.store.data.length; i++)
{
Ext.get(cmp.getNode(i)).addCls(i % 2 == 0 ? 'item0' : 'item1');
}
},


and i get an error:




Uncaught ReferenceError: onAfterRender is not defined

AtmsApp.views.MyAppListView.Ext.extend.initComponentMyAppListView.js:102 (http://127.0.0.1:6060/app/views/AtmsListView.js)
Ext.lib.Component.Ext.extend.constructorsencha-touch-debug.js:19188 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
AtmsApp.views.MainView.Ext.extend.initComponentMainView.js:8 (http://127.0.0.1:6060/app/views/MainView.js)
Ext.lib.Component.Ext.extend.constructorsencha-touch-debug.js:19188 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
subclasssencha-touch-debug.js:138 (http://127.0.0.1:6060/sencha-touch-debug.js)
Ext.regController.indexAtmsController.js:5 (http://127.0.0.1:6060/app/controllers/AtmsController.js)
Ext.util.Dispatcher.Ext.extend.dispatchsencha-touch-debug.js:10611 (http://127.0.0.1:6060/sencha-touch-debug.js)
Ext.dispatchsencha-touch-debug.js:10648 (http://127.0.0.1:6060/sencha-touch-debug.js)
App.Ext.Application.launchapp.js:6 (http://127.0.0.1:6060/app.js)
Ext.Application.Ext.extend.onBeforeLaunchsencha-touch-debug.js:10957 (http://127.0.0.1:6060/sencha-touch-debug.js)
(anonymous function)

AndreaCammarata
21 Sep 2011, 11:17 AM
Hi mrtedweb.
It's really good that you tryed to create a custom component to enable list items striping, I think that the best way to learn Sencha Touch is to "play" with the framework.
However, I show you how to do that in just eight lines, editing your application theme with SASS



.x-list {
.x-list-item {
background-color: #ddeeff;
}
.x-list-item:nth-child(2n) {
background-color: #f0f8ff;
}
}


That's all ;)

Hope this helps.

vietanh7
17 Oct 2011, 5:50 AM
Thank you! It helped me well :-)

AndreaCammarata
17 Oct 2011, 5:55 AM
Thank you! I helped me well :-)

You are welcome ;)

gaurav.k
17 Nov 2011, 2:56 AM
I Couldn't make this work or use it.

I have 20 list Items and all are supposed to have different background color. I tried so many things but could get the background color properly.
By all means I was able to have background color(or image) but not covering the complete cell.

Please guide.
Thank you

debabrata
19 Jun 2012, 8:56 PM
Hi AndreaCammarata

Should we change this in
resources\themes\stylesheets\sencha-touch\default\widgets\_list.scss file ?

But it is not working. I am doing something wrong ?