Sencha Touch List 组件答案

【问题标题】：Sencha Touch List componentSencha Touch List 组件
【发布时间】：2011-01-17 00:26:29
【问题描述】：

有人知道是否可以在 Sencha Touch 的列表中添加“字幕”（项目名称下方的浅灰色文本）？那么图像呢？对于字幕，例如，在 iPod 音乐菜单上，您会看到歌曲名称和艺术家的下方信息，以及像电影的 Flixster 应用程序这样的图像。

这是我的清单：

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model : 'Contact',
root: 'images',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});

var list = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: false,

store: store
});

【问题讨论】：

标签： list web-applications extjs sencha-touch

【解决方案1】：

你几乎可以使用 itemTpl 将任何你想要的东西放入列表中，使用 HTML/CSS 进行样式化

看看下面的代码，我刚刚在下面放了一些额外的文字和一张图片，你可以用 CSS 为你想要的布局设置样式！

希望有帮助！

Ext.setup({
          // We don't need to these sencha config options as PhoneGap takes care of this for us
          //tabletStartupScreen: '../tablet_startup.png',
          //phoneStartupScreen: '../phone_startup.png',
          //icon: 'icon.png',
          //glossOnIcon: false,

          onReady: function() {

          Ext.regModel('Contact', {
                       fields: ['firstName', 'lastName']
                       });

          var store = new Ext.data.JsonStore({
                                             model : 'Contact',
                                             root: 'images',
                                             sorters: 'firstName',

                                             getGroupString : function(record) {
                                             return record.get('firstName')[0];
                                             },

                                             data: [
                                                    {firstName: 'Tommy', lastName: 'Maintz'},
                                                    {firstName: 'Rob', lastName: 'Dougan'},
                                                    {firstName: 'Ed', lastName: 'Spencer'},
                                                    {firstName: 'Jamie', lastName: 'Avins'},
                                                    {firstName: 'Aaron', lastName: 'Conran'},
                                                    {firstName: 'Dave', lastName: 'Kaneda'},
                                                    {firstName: 'Michael', lastName: 'Mullany'},
                                                    {firstName: 'Abraham', lastName: 'Elias'},
                                                    {firstName: 'Jay', lastName: 'Robinson'}
                                                    ]
                                             });

          var list = new Ext.List({
                                  fullscreen: true,
                                  itemTpl : '<div>{firstName} {lastName}</div><div>{firstName} Or some other info</div><div><img src="http://www.gravatar.com/avatar/092108e1e1c3c7848d678022cc40010e?s=32&d=identicon&r=PG" alt="My image"></div>',
                                  grouped : true,
                                  indexBar: false,

                                  store: store
                                  });

          }



});

【讨论】：

【解决方案2】：

我知道答案

    Ext.application({
          launch: function() {
Ext.regModel('Contact', {
   fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
   model: 'Contact',
   sorters: 'lastName',

   getGroupString: function(record) {
       return record.get('lastName')[0];
   },

   data: [
       {firstName: 'Tommy',   lastName: 'Maintz'},
       {firstName: 'Rob',     lastName: 'Dougan'},
       {firstName: 'Ed',      lastName: 'Spencer'},
       {firstName: 'Jamie',   lastName: 'Avins'},
       {firstName: 'Aaron',   lastName: 'Conran'},
       {firstName: 'Dave',    lastName: 'Kaneda'},
       {firstName: 'Jacky',   lastName: 'Nguyen'},
       {firstName: 'Abraham', lastName: 'Elias'},
       {firstName: 'Jay',     lastName: 'Robinson'},
       {firstName: 'Nigel',   lastName: 'White'},
       {firstName: 'Don',     lastName: 'Griffin'},
       {firstName: 'Nico',    lastName: 'Ferrero'},
       {firstName: 'Nicolas', lastName: 'Belmonte'},
       {firstName: 'Jason',   lastName: 'Johnston'}
   ]
});

var list = new Ext.List({
   fullscreen: true,
   itemTpl: '{firstName} <strong>{lastName}</strong>',
   grouped     : true,
   indexBar    : true,
   store: store,
   hideOnMaskTap: false
});
    Ext.Viewport.add(list);
}
});

【讨论】：