Как добавить панель в качестве элемента списка в Sencha touch 2.1?

Я пытаюсь динамически добавить список (с его элементами) в свой контейнер. Вместо простого HTML-шаблона мне нужны элементы списка, содержащие панель с заголовком, изображением и еще несколькими вещами.

Для этого я загружаю данные магазина и в его обратном вызове создаю список и массив элементов. Затем я добавляю элементы в список и список в контейнер, но конечным результатом является только последняя видимая панель, а не скользящий список всех панелей.

Вот мой код:

    var vLists = [];
    this.load({
        callback: function(records, operation, success) {
            var hccontainer = Ext.getCmp('hccontainer');
            this.each(function(record){
                var sid = 'styleStore'+record.get('id');
                var styleTemplate = eval('tpls.styleTemplate_' + record.get('id'));
                vLists.push({
                    xtype: 'panel',
                    scrollable: 'false',
                    layout: 'fit',
                    cid : record.get('id'),
                    ctype : record.get('type'),
                    cname : record.get('name'),
                    stid : sid,
                    tp : styleTemplate,
                    items: [
                        {
                            xtype : 'titlebar',
                            title : record.get('name'),
                            docked : 'top',
                            cls : 'x-toolbar-transparent-top'
                        },
                        {
                            xtype : 'image',
                            src : record.get('image'),
                        }
                    ]
                });
            });
            //hccontainer.remove(Ext.getCmp('hc'), true);
            Ext.getCmp('hc').destroy();
            var hc1 = Ext.create('Ext.dataview.List', {
                layout : 'fit',
                config: {
                    direction: 'horizontal',
                    id : 'hc'
                }
            });
            hc1.setItems(vLists);
            Ext.getCmp('hccontainer').add(hc1);
        },
        scope: this
    });

Это правильный способ добавления элементов или я что-то упускаю.

PS Вместо списка, если я использую карусель, это работает нормально


sencha-touch sencha-touch-2 sencha-touch-2.1
person ThinkFloyd    schedule 06.12.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Карусель — это скорее компонент макета, чем список. Не похоже, что вам нужно использовать список, например, я не вижу обработчика элементов. Если вы хотите избежать использования шаблонов, вам не следует использовать список. Вместо этого просто создайте компонент с макетом в виде списка. Я бы использовал контейнер с макетом vbox, растянутым по горизонтали и статической высотой. Затем вы можете поместить в него любую конфигурацию элемента, которую хотите.

person OhmzTech    schedule 07.12.2012
comment
Спасибо! Я сделал то же самое, создал родительскую панель с макетом vbox, а затем обработал записи, чтобы создать массив панелей, и использовал panel.setItems(массив панелей) для создания списка. - person ThinkFloyd; 07.12.2012