Sencha Touch Listコンポーネント

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

あなたはかなり下のコードを見てください

をスタイリングのためのHTML/CSSを使用してitemTplを使用して、リストの中にあなたが欲しいものを置くことができ、私は持っていますいくつか余分なテキストを入れたり、イメージを下に置いたりすることができます。

希望に役立ちます！

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

を知っています