List Sencha触摸列表组件

有人知道是否可以在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
});

---

您几乎可以使用使用HTML/CSS进行样式设置的itemTpl将任何您想要的内容放入列表中

看一看下面的代码，我刚刚在里面放了一些额外的文本，在下面放了一个图片，你可以用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
                                  });

          }



});

Ext.setup({
//我们不需要修改这些sencha配置选项，因为PhoneGap会为我们处理这些
//tabletStartupScreen:“../tablet_startup.png”，
//phoneStartupScreen:“../phone_startup.png”，
//图标：“icon.png”，
//格洛松尼康：错，
onReady:function（）{
Ext.regModel（'Contact'{
字段：['firstName'，'lastName']
});
var store=new Ext.data.JsonStore({
型号：“联系人”，
根：'图像'，
分拣员：“名字”，
getGroupString:函数（记录）{
返回记录。get（'firstName'）[0]；
},
数据：[
{姓：“汤米”，姓“美因茨”}，
{姓氏：“Rob”，姓氏“Dougan”}，
{firstName:'Ed'，lastName:'Spencer'}，
{姓：“杰米”，姓“阿文斯”}，
{姓：“亚伦”，姓“康兰”}，
{姓：“戴夫”，姓“金田”}，
{姓：“迈克尔”，姓“穆拉尼”}，
{姓：“亚伯拉罕”，姓“以利亚”}，
{姓：杰，姓：罗宾逊}
]
});
变量列表=新的外部列表({
全屏：对，
itemTpl:“{firstName}{lastName}{firstName}或其他一些信息”，
对,，
indexBar:false，
商店：商店
});
}
});

我知道答案

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

Ext.application({
启动：函数（）{
Ext.regModel（'Contact'{
字段：['firstName'，'lastName']
});
var store=new Ext.data.JsonStore({
型号：“联系人”，
分拣员：“姓氏”，
getGroupString:函数（记录）{
返回记录。get（'lastName'）[0]；
},
数据：[
{姓：“汤米”，姓“美因茨”}，
{姓氏：“Rob”，姓氏“Dougan”}，
{firstName:'Ed'，lastName:'Spencer'}，
{姓：“杰米”，姓“阿文斯”}，
{姓：“亚伦”，姓“康兰”}，
{姓：“戴夫”，姓“金田”}，
{姓：“杰基”，姓“阮”}，
{姓：“亚伯拉罕”，姓“以利亚”}，
{姓：杰，姓：罗宾逊}，
{姓：“奈杰尔”，姓：“怀特”}，
{firstName:'Don'，lastName:'Griffin'}，
{名字：'尼科'，姓氏：'费雷罗'}，
{姓：“尼古拉斯”，姓“贝尔蒙特”}，
{姓：“杰森”，姓：“约翰斯顿”}
]
});
变量列表=新的外部列表({
全屏：对，
itemTpl:“{firstName}{lastName}”，
对,，
indexBar：是的，
店:店,，
hideOnMaskTap:错误
});
Ext.Viewport.add（列表）；
}
});