javascript - 在 ExtJS 4 网格面板中动态切换 View

Question

需要在 ExtJS 4 网格面板 中动态更改 View 。

默认情况下，网格显示为表格，但在我的应用程序中，我需要一个功能来将网格从​​表格 View 切换到tiles(或卡片) View 。下面我试着展示它应该是什么样子。

 Normal view:                               Tiles view:
 ======================================     ====================================
 | Name       | Description           |     | Name       | Description         |
 ======================================     ====================================
 | Name 1     | First description   |^|     |  ------     ------     ------  |^|
 |----------------------------------|X|     | | O  O |   | @  @ |   | >  < | |X|
 | Name 2     | Second description  |X|     | | \__/ |   | \__/ |   | \__/ | |X|
 |----------------------------------|X|     |  ------     ------     ------  |X|
 | Name 3     | Third description   | |     |  Name 1     Name 2     Name 3  | |
 |----------------------------------| |     |                                | |
 |            |                     | |     |  ------     ------     ------  | |
 | ...        | ...                 |v|     | | o  O |   | -  - |   | *  * | |v|
 ======================================     ====================================

我找到了我需要的几乎完美的实现，命名为 Ext.ux.grid.ExplorerView .但是，该扩展是为 ExtJS 2.x (3.x) 版本开发的，不能在 ExtJS 4 中重复使用。

我使用的网格创建起来非常简单:

Ext.create("Ext.grid.Panel", {
    store: ...,
    columns: [{
        header: "Name",
        dataIndex: "name",
    }, {
        header: "Description",
        dataIndex: "description"
    }],
    tbar: [ ... ],
    bbar: [ ... ],
    listeners: { ... },
    multiSelect: true,
    viewConfig: {
        stripeRows: true,
        markDirty: false,
        listeners: { ... }
    }
});

我尝试更新内部 View 组件的 tpl 属性，但似乎没有任何效果。

您是否知道如何在单个网格面板的 View 之间进行动态切换？

Answer 1

这个问题很容易通过由 Tileview 开发的名为“Harald Hanek”的网格面板的精彩功能解决。 .该解决方案专为 ExtJS 4 开发。

基本用法示例是:

var grid = Ext.create("Ext.grid.Panel", {
    store: ...,
    columns: [{
        header: "Name",
        dataIndex: "name",
    }, {
        header: "Description",
        dataIndex: "description"
    }],
    tbar: [ ... ],
    bbar: [ ... ],
    listeners: { ... },
    multiSelect: true,
    viewConfig: {
        stripeRows: true,
        markDirty: false,
        listeners: { ... }
    },

    features: [Ext.create("Ext.ux.grid.feature.Tileview", {
        getAdditionalData: function(data, index, record, orig) {
            if (this.viewMode) {
                return {
                    name: record.get("name").toLowerCase(),
                };
            }
            return {};
        },
        viewMode: 'tileIcons',   // default view
        viewTpls: {
            tileIcons: [
                '<td class="{cls} ux-tileview-detailed-icon-row">',
                '<table class="x-grid-row-table">',
                    '<tbody>',
                    '<tr>',
                        '<td class="x-grid-col x-grid-cell ux-tileview-icon" style="background-image: url(&quot;...&quot;);">',
                        '</td>',
                        '<td class="x-grid-col x-grid-cell">',
                            '<div class="x-grid-cell-inner">{name}</div>',
                        '</td>',
                    '</tr>',
                    '</tbody>',
                '</table>',
                '</td>'
            ].join(""),

            mediumIcons: [ ... ].join(""),
            largeIcons: [ ... ].join("")
        }
    })]
});

要改变 View ，我们应该只使用setView() 方法，即

grid.features[0].setView("tileIcons");

---

这就是该功能在现实生活中的样子。

• 磁贴 View 示例:

• ImageView 示例:

---

引用资料:

• https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/feature/Tileview.js -- Tileview 来源
• https://github.com/harrydeluxe/extjs-ux -- 所有带有屏幕截图的 Harald 扩展
• http://www.sencha.com/forum/showthread.php?183023-Thumbnails-in-Grid-with-switching-between-views -- Sencha 论坛上的功能讨论节点
• http://harrydeluxe.github.com/extjs-ux/example/grid/tileview.html -- 演示