How to implement this custom grid in ExtJS?

I am new to ExtJS. Currently I hav开发者_开发百科e grid implemented as shown below.

But I want to show the same information in a different way like showing in boxes, as shown below. How do I implement this?

You haven't specified which version of Ext JS you are using. So, will give you solution for both versions:

In ExtJS 3.x

You can make use of the Ext.DataView class. Here is an example of dataview. Even though the example makes use of the images, you can easily modify the view, but changing the template. Now, you have to work on the pagination bar. You will have to make use of the bbar property and create a toolbar. This toolbar will have your navigation buttons. So, you will have something like this:

var panel = new Ext.Panel({
    id:'person-view',
    frame:true, 
    title:'User Grid',
    bbar: [{
        text: Prev,
        iconCls: 'prev-icon'
    },{
        text: Next,
        iconCls: 'next-icon'
    }],
    items: new Ext.DataView({
        store: yourStore,
        tpl: yourTemplate,
        autoHeight:true,
        multiSelect: false,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No users to display',

    })
});

[Obviously, the above code is not complete. You will have to add your store, template, other properties and event listeners according to user needs.]

In ExtJS 4.x

You will have to make use of Ext.view.View class. Here is a skeleton code:

Ext.define('MyApp.view.members.Display',{
    extend: 'Ext.panel.Panel',
    alias : 'widget.memberslist',       
    initComponent: function() {

        this.template = Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '<div class="member">',
                    'Name : {name} <br/>',
                    'Title : {title}',              
                '</div>',
            '</tpl>'
        );

        this.store = Ext.create('MyApp.store.Members');
        this.bbar = this.buildToolbar();        
        this.items = this.buildItems();

        this.callParent(arguments); 
    },
    buildItems: function() {

        return [{
            xtype: 'dataview',
            store: this.store,
            id: 'members',
            tpl: this.template,
            itemSelector: 'div.member',
            overItemCls : 'member-hover',
            emptyText: 'No data available!'         
        }]
    },
    buildToolbar : function() {

        return [{
            text: 'Previous',
            action: 'prev'
        },{
            text: 'Next',
            action: "next"

        }];
    }
});

The above code makes use of the new MVC architecture. You will have to add the event listeners etc in your controller.