Appcelerator Titanium JS: Table Alphabetical Index not working - titanium

Question

I'm trying to get my head around using a the TableView index property to create native right hand alphabetical navigation - similar to that in the Apple iOS Contacts app - shown in the picture below:
I created a really simple example, with a set of rows, with row headers, but it doesn't work - whenever I tap on an index item, it just jumps to the top of the TableView again.
Here is my example code:
// Create the first TableViewSection
var section1 = Ti.UI.createTableViewSection({
headerTitle:'A'
});
// use a loop to add some rows
for (var i=0; i < 20; i++) {
section1.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// do it all again...
var section2 = Ti.UI.createTableViewSection({
headerTitle: 'B'
});
for (var i=4; i < 10; i++) {
section2.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// Now, here's our table, and we're setting the data to hold the sections
var tv = Ti.UI.createTableView({
data:[section1,section2]
});
// Create a table view index
var index = [
{ title: "A", index: 0 },
{ title: "B", index: 1 }
];
// Set the index on the table view
tv.setIndex(index);
$.index.open();
$.index.add(tv);

Answer 1

Here is an example for you dear
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView({});
var contacts = ["Adam", "Andrew", "Boris", "Claus", "Debby", 'Saba', 'Sana', 'Wahhab', 'Zohaib', 'Zzaid', 'Zzxad'];
var curheader = 'A';
var sectionArr = [];
var index = [];
for (var i = 0, lastL, l, currSection, ilen = contacts.length; i < ilen; i++) {
l = contacts[i].substr(0, 1);
if (lastL != l) {
index.push({
title : l,
index : i
});
currSection = Ti.UI.createTableViewSection({
headerTitle : l
});
sectionArr.push(currSection);
}
currSection.add(Ti.UI.createTableViewRow({
title : contacts[i],
}));
lastL = l;
}
table.setData(sectionArr);
table.index = index;
win.add(table);
win.open();
Thanks