1

我在 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'，

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

...
...
...
},

ColorsPagesSelected方法：

 ColorsPagesSelected: function() {

           alert('Color page pushed');

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


           },

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

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

任何人都可以帮助我，请提前感谢

4

2 回答 2

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

}
于 2012-08-03T06:58:45.887 回答
-1

我最喜欢的技巧是为记录分配功能

{
  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());
  }
于 2012-08-03T15:37:33.627 回答