Question

I have this following code and i want to display images and other html elements as items of the nested list.

Can this be achieved?

My code is

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

Though am using the imgURl field its not working.

Plz help.. Answers appreciated..!

Answer 1

You need to set the template of your nested list items. You can do it by adding a getItemTextTpl attribute to you nested list config

getItemTextTpl: function(node){
    return '{imgURL} - {text}';
} 

You can take a look at how I used getItemTextTpl in this question