基于 ExtJS 中商店的卡片列表

Question

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

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

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

Answer 1

您可以使用 extjs 中的数据视图执行此操作 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()
    });

}
});

基于 ExtJS 中商店的卡片列表

List of cards based on store in ExtJS

extjs

extjs6

extjs6-classic