[英]Sencha Touch List component
是否有人可以在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
});
您幾乎可以使用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
});
}
});
我知道答案
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);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.