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

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());
  }