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

Posted 2023-02-22

【中文标题】如何在 ExtJS 中实现这个自定义网格？

【英文标题】：How to implement this custom grid in ExtJS?

【发布时间】：2011-12-04 17:49:40

【问题描述】：

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

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

【参考方案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 架构。您必须在控制器中添加事件侦听器等。