Question

有人知道是否可以将“字幕”（项目名称下面的浅灰色文本）添加到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
});

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

          }



});

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

Sencha Touch List组件

2 个答案: