Ext.list.Деревянный магазин и шаблоны

Question

В Ext JS 6 списков больше нет по сравнению с Touch 2.4 Ext.List, например. Поэтому я попытался создать хранилище деревьев и связать его с Ext.list.Tree. Кажется, это работает нормально, хотя я не знаю, как установить шаблон для элементов списка. У меня есть следующий код:

Моя модель выглядит так:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'phoneNumber', type: 'string'}
    ]
});

Далее у меня есть некоторые данные:

var data = {
    users: [
        {
            name: 'Ed Spencer',
            phoneNumber: '555 1234'
        },
        {
            name: 'Abe Elias',
            phoneNumber: '666 1234'
        }
    ]
};

Далее идет определение магазина:

var store = Ext.create('Ext.data.TreeStore', {
    autoLoad: true,
    model: 'User',
    data : data,
    expanded: true,
    defaultRootProperty: 'users',
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'users'
        }
    }
});

И последнее, но не менее важное: я связываю магазин со своим списком трех деревьев:

var list = Ext.create('Ext.list.Tree', {
    title: 'simple list',
    store: store,
    width: '200px',
    height: '400px',
    renderTo: Ext.getBody(),
    itemTpl: '{name}'
});

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

Я не знаю, как продолжить сейчас, так как я не знаю, как отобразить мои данные в списке / дереве. Надеюсь, кто-то может помочь. У меня также есть скрипка Сенча, доступная здесь: https://fiddle.sencha.com/

Answer 1

Решение заключается не в использовании Ext.list.Tree, а в Ext.List/Ext.dataview.List. Я искал в классической документации, а я должен смотреть в современной документации.

Теперь у меня есть следующий магазин:

var store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    model: 'User',
    data : data,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'users'
        }
    }
});

И представьте следующий список:

// don't render the list, but add it to the viewport instead
Ext.Viewport.add(Ext.create('Ext.List', {
    title: 'simple list',
        store: store,
        itemTpl: '{name}, {phoneNumber}'
}));

Модель и данные остаются прежними.

Я также обновил скрипку, чтобы она отображалась правильно: https://fiddle.sencha.com/