Sencha touch Sencha touch嵌套列表,带有数字字段和列表项按钮?
我有以下代码,我想将图像和其他html元素显示为嵌套列表的项目 这能实现吗 我的代码是Sencha touch Sencha touch嵌套列表,带有数字字段和列表项按钮?,sencha-touch,extjs,nested-lists,Sencha Touch,Extjs,Nested Lists,我有以下代码,我想将图像和其他html元素显示为嵌套列表的项目 这能实现吗 我的代码是 Ext.setup({ TabletStartup屏幕:“tablet_startup.png”, phoneStartupScreen:'phone_startup.png', 图标:“icons/logo4_1.png”, 格洛松尼康:错, 标题:“项目列表”, 全屏幕:没错, onReady:function(){ 风险值数据={ 标题:“项目列表”, 文字:“杂货店”, 项目:[{ 文字:“饮料”,
Ext.setup({
TabletStartup屏幕:“tablet_startup.png”,
phoneStartupScreen:'phone_startup.png',
图标:“icons/logo4_1.png”,
格洛松尼康:错,
标题:“项目列表”,
全屏幕:没错,
onReady:function(){
风险值数据={
标题:“项目列表”,
文字:“杂货店”,
项目:[{
文字:“饮料”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“水”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“闪闪发光”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:'仍然',
imgURL:'\images\beverage\colas.jpg',
叶:是的
}]
}, {
文字:“咖啡”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:“浓缩咖啡”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文本:“红牛”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:“可口可乐”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:“健怡可乐”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}]
}, {
文本:“水果”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文本:“香蕉”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:“西瓜”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:“葡萄”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“黑葡萄”,
叶:是的
}, {
文字:“绿葡萄”,
叶:是的
}]
}, {
文字:'梨',
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:“苹果”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}]
}, {
文字:“面包和面包店”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“面包”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“白面包”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文字:“黑面包”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文字:“三明治面包”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}]
}, {
文字:“椒盐卷饼”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}, {
文字:“杯形蛋糕”,
imgURL:'\images\beverage\colas.jpg',
叶:是的
}]
}, {
正文:“个人护理”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“洗发水”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“鸽子”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文本:“Sunsilk”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文本:“Garnier”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}]
}, {
文字:“肥皂剧”,
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“鸽子”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文字:“梨”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文本:“勒克斯”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}]
}, {
文字:'发油',
imgURL:'\images\beverage\colas.jpg',
项目:[{
文字:“梵蒂冈”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文字:“杏仁油”,
imgURL:'\images\beverage\colas.jpg',
叶:是的,
}, {
文字:“降落伞椰子油”,
imgURL:'\images\beverage\c
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;
}
}
});
getItemTextTpl: function(node){
return '{imgURL} - {text}';
}
Ext.define('project.view.FooList', {
extend: 'Ext.dataview.NestedList',
config: {
fullscreen: true,
title: 'Foo, bro',
listConfig: {
itemTpl: new Ext.XTemplate('{text}, bro')
},
store: 'FooStore'
}
});