Компонент Sencha Touch List - PullRequest
Новая
       20

Компонент Sencha Touch List

1 голос
/ 17 января 2011

Кто-нибудь знает, возможно ли добавить «субтитры» (светло-серый текст под названием элемента) в списки в 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
});

Ответы [ 2 ]

3 голосов
/ 17 января 2011

Вы можете в значительной степени поместить все, что хотите, в список, используя 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
                                  });

          }



});
0 голосов
/ 19 января 2012

я знаю ответ 

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