我有以下代码，我想将图像和其他html元素显示为嵌套列表的项目。
这可以实现吗？
我的代码是
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icons/logo4_1.png',
glossOnIcon: false,
title: 'Item List',
fullscree: true,
onReady: function() {
var data = {
title: 'Item List',
text: 'Groceries',
items: [{
text: 'Beverages',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Water',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Sparkling',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Still',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Coffee',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Espresso',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Redbull',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Coke',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Diet Coke',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Fruits',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Bananas',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Watermelon',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Grapes',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Black Grapes',
leaf: true
}, {
text: 'Green Grapes',
leaf: true
}]
}, {
text: 'Pear',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Apple',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Bread and Bakery',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Bread',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'White Bread',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Brown Bread',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Sandwich Bread',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Pretzels',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Cup Cakes',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Personal Care',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Shampoo',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Dove',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Sunsilk',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Garnier',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Soaps',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Dove',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Pears',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Lux',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Hair Oil',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Vatika',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Almond Oil',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Parachute Coconut oil',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Body Lotions',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Dove',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Ponds',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Nivea',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}]
}]
};
Ext.regModel('ListItem', {
fields: ['text', 'imgURL'],
//fields: [{name: 'text', type: 'string'},{name: 'imageURL', type: 'string'}],
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var leftNav = new Ext.NestedList({
fullscreen: true,
dock: 'left',
useTitleAsBackText: true,
title: 'Item List',
icon: 'icons/logo4_1.png',
itemTpl: '<img src="{imgURL}" width="100" heigh="100"></img><span>{text}</span> <span><button>Add to Cart</button>',
width: '350',
image: 'image',
dockedItems: [{
html: '<img src="icons/logo4_1.png" width="100" height="40"/>',
dock: 'top',
}],
store: store,
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems: [leftNav]
});
if (Ext.is.Phone) {
fullscreen: true;
}
}
});
虽然使用imgURl字段但它无效。
Plz帮助..答案赞赏..！
答案 0 :(得分：1)
您需要设置嵌套列表项的模板。您可以通过向嵌套列表配置
添加getItemTextTpl属性来实现
getItemTextTpl: function(node){
return '{imgURL} - {text}';
}
您可以查看我使用getItemTextTpl in this question
答案 1 :(得分：1)
接受的答案对我不起作用 - 在NestedList的listConfig配置项中设置itemTpl是有效的：
Ext.define('project.view.FooList', {
extend: 'Ext.dataview.NestedList',
config: {
fullscreen: true,
title: 'Foo, bro',
listConfig: {
itemTpl: new Ext.XTemplate('{text}, bro')
},
store: 'FooStore'
}
});