Sencha Touch List 구성 요소

Question

Sencha Touch의 목록에 "자막"(항목 이름 아래의 밝은 회색 텍스트)을 추가 할 수 있는지 알고있는 사람이 있습니까? 이미지는? 자막의 경우 예를 들어 iPod 음악 메뉴에서 노래 이름과 아티스트에 대한 정보 및 영화 용 Flixster 앱과 같은 이미지를 얻을 수 있습니다. 여기

내 목록 : 당신은 아래의 코드에서보세요

스타일링을 위해 HTML/CSS를 사용하여 itemTpl를 사용하여 목록에 원하는 당신은 거의 아무것도 넣을 수 있습니다

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

, 난 그냥이 여분의 텍스트를 넣고 밑에 이미지를 넣으면 원하는 레이아웃으로 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); 
} 
});