Question

我在Sencha Touch中实现了不同颜色的列表视图。

并实现了一个项目点击方法来推送容器中的视图。

为每种4色RedPage.js，WhitePage.js，yelloPage.js，GreenPage.js实现了4个视图。

查看：

{
           xtype: 'list',
           id : 'ColorsList'
           width: '20%',

           itemTpl: [
                 '<div><b>{Color}<b></div>'
                 ],


       data: [
              {Color: 'Red' },
              {Color: 'Blue'},
              {Color: 'Yellow},
              {Color: 'Green}
              ]
       },

容器：

ColorsList：'＃ColosList'，

init function(){
..
..
..
..
  'ColorsList' : {
                     itemtap : 'ColorsPagesSelected'
                     },

...
...
...
},

ColorsPagesSelected 方法：

 ColorsPagesSelected: function() {

           alert('Color page pushed');

           this.getColorrightnavigation().push(Ext.create('ArtGalleryApp.view.RedPage'));


           },

由于我使用 Colorslist ID并用于将RedPage推送到列表，因此它会为列表中的每个项目显示 RedPage 。

我不知道如何为不同的行获取不同的页面

任何人都可以帮我提前谢谢

Answer 1

假设您定义了这样的彩色页面：

Ext.define('App.view.RedPage', {
    extend: 'Ext.Panel',
    xtype: 'RedPage',
...
});

使用有用的Ext.widget功能

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

我最喜欢的黑客是将功能分配给记录

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

Sencha Touch：如何为列表中的不同li /行编写不同的选择事件

2 个答案: