Sencha touch Sencha touch嵌套列表,带有数字字段和列表项按钮?

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(){ 风险值数据={ 标题:“项目列表”, 文字:“杂货店”, 项目:[{ 文字:“饮料”,

我有以下代码,我想将图像和其他html元素显示为嵌套列表的项目

这能实现吗

我的代码是

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