如何在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 架构。您必须在控制器中添加事件侦听器等。