javascript - Ext.list.Tree 存储和模板

Question

例如，与 Touch 2.4 Ext.List 相比，Ext JS 6 中不再存在列表。所以我现在尝试做的是创建一个树存储并将其绑定(bind)到 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'
        }
    }
});

最后但并非最不重要的一点是，我将商店绑定(bind)到我的树列表:

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

通过查看文档，我似乎需要指定一个文本属性，然后该属性可能会自动显示在列表中，但我不想仅显示文本，我想在此组合名称和电话号码示例。

我现在不知道如何继续，因为我不知道如何在列表/树中显示我的数据。希望有人可以提供帮助。我这里还有一个 Sencha Fiddle:https://fiddle.sencha.com/#fiddle/1el1

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}'
}));

模型和数据保持不变。

我还更新了 fiddle ，以便它可以正确显示:https://fiddle.sencha.com/#fiddle/1el1