Ext.list.Tree 商店和模板

Question

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

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

我现在不知道如何继续，因为我不知道如何在 list/tree 中显示我的数据。希望有人能提供帮助。我还有一个 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

Ext.list.Tree 商店和模板

Ext.list.Tree store and templates

javascript

extjs

extjs6