Пользовательские xtypes как ячейка в ext.listview

Question

Я использую Sencha Touch 2 и не получаю помощь на форуме Sencha, поэтому я надеюсь, что вы, ребята, можете мне помочь.

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

Я думаю, что это простая задача, но прикосновение Сенча делает это проблемой для меня.

Поэтому, пожалуйста, помогите мне и покажите мне, как я могу получить вид, как показано на этой картинке.

Answer 1

Вместо стандартного списка вы захотите использовать компонент DataView. По сути, вам нужно сначала определить Ext.dataview.component.DataItem, который затем внедряется в DataView. Ниже приведен простой пример кнопок в DataView, на которые ссылается руководство по DataView: http://docs.sencha.com/touch/2-0/.

Сначала создайте DataItem:

Ext.define('MyApp.view.DataItemButton', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Button'],
    xtype: 'dataitembutton',    
    config: {
        nameButton: true,    
        dataMap: {
            getNameButton: {
                setText: 'name'
            }
        }
    },    
    applyNameButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getNameButton());
    },    
    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            this.add(newNameButton);
        }
    }
});

• Мы должны расширить Ext.dataview.component.DataItem для каждого элемента. Это абстрактный класс, который обрабатывает обработку записей для каждого элемента.
• Ниже продолжения нам требуется Ext.Button. Это просто потому, что мы собираемся вставить кнопку внутри нашего элемента item.
• Затем мы указываем xtype для этого компонента элемента.
• Внутри нашего блока конфигурации мы определяем nameButton. Это пользовательская конфигурация, которую мы добавляем к этому компоненту, которая будет преобразована в кнопку системой классов. По умолчанию мы устанавливаем значение true, но это также может быть блоком конфигурации. Эта конфигурация будет автоматически генерировать геттеры и сеттеры для нашего nameButton.
• Далее мы определяем dataMap. Карта данных - это карта между данными записи и этим представлением. GetNameButton - это метод получения экземпляра, который вы хотите обновить; поэтому в этом случае мы хотим получить конфигурацию nameButton этого компонента. Затем внутри этого блока мы даем ему установщик для этого экземпляра; в этом случае setText и укажите поле записи, которую мы передаем. Итак, как только этот компонент элемента получает запись, он получает nameButton, а затем вызывает setText со значением name записи.
• Затем мы определяем метод apply для нашего nameButton. Метод apply использует Ext.factory для преобразования конфигурации, переданной в экземпляр Ext.Button. Этот экземпляр затем возвращается, что приведет к вызову updateNameButton. Метод updateNameButton просто удаляет старый экземпляр nameButton, если он существует, и добавляет новый экземпляр nameButton, если он существует.

Теперь создайте DataView:

Ext.create('Ext.DataView', {
    fullscreen: true,

    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },

    useComponents: true,
    defaultType: 'dataitembutton'
});

В вашем случае, вместо использования кнопки для DataItem, вы захотите использовать горизонтальную прокрутку списка. Вот пример, который я нашел из этого ответа: Горизонтальная прокрутка списка

var list = Ext.create('Ext.DataView',{
   store: store,
   itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
   inline: { wrap: false },
   scrollable: {
     direction: 'horizontal',
     directionLock: true
   }
});

Обратите внимание, что вам, вероятно, придется использовать компоненты и во втором просмотре данных, чтобы получить кнопки с изображением.