如何在ExtJS中实现这个自定义网格？

Question

我是ExtJS的新手。目前我已经实现了如下所示的网格。

但我希望以不同的方式显示相同的信息，如在框中显示，如下所示。我该如何实现？

Answer 1

您尚未指定使用的是哪个版本的Ext JS。因此，将为您提供两个版本的解决方案：

在ExtJS 3.x中

您可以使用Ext.DataView课程。以下是dataview的示例。即使该示例使用了图像，您也可以轻松修改视图，但更改模板。现在，你必须在分页栏上工作。您必须使用bbar属性并创建工具栏。此工具栏将包含导航按钮。所以，你会有这样的事情：

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',

    })
});

[显然，上面的代码并不完整。您必须根据用户需要添加商店，模板，其他属性和事件监听器。]

在ExtJS 4.x

中

您必须使用Ext.view.View课程。这是一个骨架代码：

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"

        }];
    }
});

上面的代码使用了新的MVC架构。您必须在控制器中添加事件侦听器等。