PDA

View Full Version : how can i customize the list's group bar



mr.xprt
23 Jul 2011, 12:14 PM
hi ,

i have Carousel with 2 items each of them is a list
as u can see the code below my lists are grouped

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
//launch :function(){
onReady :function(){
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: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});

var list1 = new Ext.List({
fullscreen: true,

itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,

store: store
});

var list2 = new Ext.List({
fullscreen: true,

itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,

store: store
});


main=new Ext.Carousel({
fullscreen:true,
items:[list1,list2]
});
}

});

the question is how can i customize the group bar -that will show the group letter - dynamically ,

so every list will have a group bar with a specific Cls - all the group bars in the same list will have the same color -


thanks alot

mr.xprt
24 Jul 2011, 3:37 AM
any idea?!