Сенча сенсорный вложенный список с числовым полем и кнопкой для элементов списка? - PullRequest
Новая
       36

Сенча сенсорный вложенный список с числовым полем и кнопкой для элементов списка?

0 голосов
/ 15 марта 2012

У меня есть следующий код, и я хочу отображать изображения и другие элементы 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, оно не работает.

Пожалуйста, помогите .. Ответы приветствуются ..!

Ответы [ 2 ]

1 голос
/ 12 января 2013

Принятый ответ не работает для меня - то, что работало, устанавливало itemTpl внутри элемента конфигурации listConfig в NestedList: 

Ext.define('project.view.FooList', {
    extend: 'Ext.dataview.NestedList',
    config: {
        fullscreen: true,
        title: 'Foo, bro',
        listConfig: {
            itemTpl: new Ext.XTemplate('{text}, bro')
        },
        store: 'FooStore'
    }
});
1 голос
/ 15 марта 2012

Вам необходимо установить шаблон для ваших вложенных элементов списка. Вы можете сделать это, добавив атрибут getItemTextTpl к конфигурации вложенного списка 

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

Вы можете взглянуть на то, как я использовал getItemTextTpl в этом вопросе

...