List of cards based on store in ExtJS

Question

In my ExtJS project, I have a grid bound to a store, but I want to do away with the grid's layout and use cards instead, similar to this angular sample.

Is there any container component by Sencha that takes a store and renders all records into a custom template? (based on sorting/filtering)

Deriving from the grid is a bit too much work, overriding the original templates breaks all kinds of things.

Answer 1

You can do this with dataview in extjs here is 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()
    });

}
});