View Full Version : Change list index letters to whole value

27 Jan 2011, 7:49 AM

i would like to know if it is possible to group items in a list to a whole value and display this value. I want to group players of a soccerteam by position. By default the postions , like 'keeper', are displayed by only the first letter, like 'k'. I want to display the whole value of the field position, like keeper.

Thank you in advance.

27 Jan 2011, 11:40 AM
Hi pokiekokie.
I post you a simple example that allows you to do what you request.

onReady: function() {

Ext.regModel('Contact', {
fields: ['firstName', 'lastName', 'position']

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

getGroupString : function(record) {
return record.get('position');

data: [
{firstName: 'Tommy', lastName: 'Maintz', position: 'goalkeeper'},
{firstName: 'Rob', lastName: 'Dougan', position: 'Side Back'},
{firstName: 'Ed', lastName: 'Spencer', position: 'Striker'},
{firstName: 'Jamie', lastName: 'Avins', position: 'Side Midfielder'},
{firstName: 'Aaron', lastName: 'Conran', position: 'Side Midfielder'},
{firstName: 'Dave', lastName: 'Kaneda', position: 'Winger'},
{firstName: 'Michael', lastName: 'Mullany', position: 'Winger'},
{firstName: 'Abraham', lastName: 'Elias', position: 'Side Back'},
{firstName: 'Jay', lastName: 'Robinson', position: 'Striker'}

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

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

store: store

As you can see the "getGroupString" function allows you to set the value of your list groups.
In this case I set the "position" of my data model, but you can set everything you want.

Hope this helps.

27 Jan 2011, 1:26 PM
Wow, what a great reply! In my code the 'get groupfunction' was like this:

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

The [0] stands for the first letter of the value. So like in your example, without the [0], it shows the whole value. My problem is solved:) Thank you!

27 Jan 2011, 1:27 PM
You are welcome ;)

1 Feb 2011, 4:10 PM
I have a question relating to the getGroupString property. Is there a way to inject HTML into it? I would like to have text on the left-hand side as well as the right.