Sencha Touch - список/вложенный список с изображениями

Сегодня утром я начал работать с Sencha Touch, и мне может понадобиться помощь.

Если я создам вложенный список следующим образом:

var data = {
    text: 'Groceries',
    items: [{
        text: 'Ninja',
        items: [{
            text: 'Water',
            items: [{
                text: 'Sparkling',
                leaf: true
            },{
                text: 'Still',
                leaf: true
            }]
        },{
            text: 'Coffee',
            leaf: true
        },{
            text: 'Espresso',
            leaf: true
        },{
            text: 'Redbull',
            leaf: true
        },{
            text: 'Coke',
            leaf: true
        },{
            text: 'Diet Coke',
            leaf: true
        }]
    }],{
        text: 'Fruit',
        items: [{
            text: 'Bananas',
            leaf: true
        },{
            text: 'Lemon',
            leaf: true
        }]
    },{
        text: 'Snacks',
        items: [{
            text: 'Nuts',
            leaf: true
        },{
            text: 'Pretzels',
            leaf: true
        },{
            text: 'Wasabi Peas',
            leaf: true
        }]
    },{
        text: 'Empty Category',
        items: []
    }]
};

Как я могу добавить изображения в список? Например, если бы я хотел, чтобы рядом с диетической колой был логотип Coca Cola. Я попытался установить html с изображением внутри, но это просто дало мне пустой элемент. Я не могу найти ничего о том, как манипулировать элементами списка, несмотря на свойство «текст». Я знаю, что это возможно, потому что я видел пример, содержащий список контактов с фотографиями контактов.

Я надеюсь, что вы можете мне помочь, и спасибо заранее.


image nested-lists extjs sencha-touch
person Matteo    schedule 25.07.2011    source источник
comment
Не могли бы вы опубликовать текущий рабочий пример того, что у вас есть до сих пор   -  person Ballsacian1    schedule 26.07.2011

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете добавить дополнительные поля в свой Ext.regModel, поэтому вы хотите добавить одно для хранения пути к вашему изображению.

Вы можете добавить любой HTML-код в списки itemTpl, чтобы добавить туда свое изображение.

Приведенный ниже пример взят из документации API сенча. Я изменил его, чтобы использовать изображения для дать вам представление о том, как вы можете добавить их.

Надеюсь, это поможет!

ФРАГМЕНТ КОДА

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {

        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName', 'imgURL']
        });

        var store = new Ext.data.JsonStore({
            model: 'Contact',
            sorters: 'lastName',

            getGroupString: function(record) {
                return record.get('lastName')[0];
            },

            data: [{
                firstName: 'Tommy',
                lastName: 'Maintz',
                imgURL: 'myImage.png'
            }, {
                firstName: 'Rob',
                lastName: 'Dougan',
                imgURL: 'myImage.png'
            }, {
                firstName: 'Ed',
                lastName: 'Spencer',
                imgURL: 'myImage.pngg'
            }, {
                firstName: 'Jamie',
                lastName: 'Avins',
                imgURL: 'myImage.png'
            }]
        });

        var list = new Ext.List({
            fullscreen: true,

            itemTpl: '<img src="{imgURL}" width="20" heigh="20"></img><span>{firstName} {lastName}</span>',
            //grouped : true,
            //indexBar: true,

            store: store
        });
        list.show();
    }
});
person carok    schedule 26.07.2011
comment
Это отличный ответ .. Но .. Почему нельзя добиться того же в вложенном списке ??? Знаете ли вы, как добавлять изображения, а также другие компоненты html во вложенные элементы списка??? пожалуйста помогите!!! - person Apoorva; 15.03.2012