ExtJS 中基于 store 的卡片列表

【问题标题】：List of cards based on store in ExtJSExtJS 中基于 store 的卡片列表
【发布时间】：2018-06-18 10:42:00
【问题描述】：

在我的 ExtJS 项目中，我有一个绑定到商店的网格，但我想取消网格的布局并改用卡片，similar to this angular sample。

Sencha 是否有任何容器组件可以获取存储并将所有记录呈现到自定义模板中？（基于排序/过滤）

从网格派生有点太多工作，覆盖原始模板会破坏各种事情。

【问题讨论】：

是的，您可以通过 dataview 使用 tpl 配置实现

标签： extjs extjs6 extjs6-classic

【解决方案1】：

你可以在 extjs 中使用 dataview 来做到这一点，这里是 Demo

Ext.application({
name: 'Fiddle',

launch: function () {
    var items = Ext.create('Ext.data.Store', {
        autoLoad: true,
        storeId: 'item-store',
        fields: ['name'],
        proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
                type: 'json',
                rootProperty: ''
            }
        }
    });

    Ext.create('Ext.panel.Panel', {
        title: 'DataView',
        height: 620,
        bodyPadding: 10,
        viewModel: [{
            stores: {
                itemStore: {
                    type: 'item-store'
                }
            },
            data: {
                name: '',
                desc: ''
            }
        }],
        items: [{
            xtype: 'dataview',
            tpl: [
                '<tpl for=".">',
                '<div class="dataview-item">',
                '<p>{desc}</p>',
                '</div>',
                '</tpl>'
            ],
            itemSelector: 'div.dataview-item',
            store: items
        }],
        renderTo: Ext.getBody()
    });

}
});

【讨论】：