Sencha Touch :How to write different select events for Different li/rows in a list - sencha-touch

Question

I have implemented a list view for different colors in Sencha Touch.
And implemented a item tap method to push the view in container.
And Implemented 4 views for each 4 color RedPage.js, WhitePage.js, yelloPage.js, GreenPage.js.
View:
{
xtype: 'list',
id : 'ColorsList'
width: '20%',
itemTpl: [
'<div><b>{Color}<b></div>'
],
data: [
{Color: 'Red' },
{Color: 'Blue'},
{Color: 'Yellow},
{Color: 'Green}
]
},
Container:
ColorsList: '#ColorsList',
init function(){
..
..
..
..
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
...
...
...
},
ColorsPagesSelected Method:
ColorsPagesSelected: function() {
alert('Color page pushed');
this.getColorrightnavigation().push(Ext.create('ArtGalleryApp.view.RedPage'));
},
Since i used Colorslist id and used to push RedPage for list, it displays RedPage for each item in the list.
I dont know how to get different pages for differnt rows
Can any one help me pls thanks in advance

Answer 1

assuming you defined your colored pages like this:
Ext.define('App.view.RedPage', {
extend: 'Ext.Panel',
xtype: 'RedPage',
...
});
use helpful Ext.widget function
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
var color = record.get('Color'),
pageName = color + 'Page',
page = Ext.widget(pageName);
this.getColorrightnavigation().push(page);
}

Answer 2

My favorite hack for this is to assign functions to records
{
xtype: 'list',
id: 'ColorsList'
width: '20%',
itemTpl: ['<div><b>{Color}<b></div>'],
data: [{
Color: 'Red',
getPage: function() {
return Ext.create('ArtGalleryApp.view.RedPage');
}
}, {
Color: 'Blue'
}, {
Color: 'Yellow},
{Color: '
Green
}]
},
init function(){
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
this.getColorrightnavigation().push(record.getPage());
}