基于extjs存储的卡片列表

在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()
    });

}
});