Home/ Questions/Q 8743509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:41:27+00:00

There is a need to dynamically change a view in ExtJS 4 grid panel

  • 0

There is a need to dynamically change a view in ExtJS 4 grid panel.

By default grid is displayed as a table, but in my application I need a feature to switch grid from table view to tiles (or cards) view. Below I tried to represent how it should look like.

 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|
 ======================================     ====================================

I have found almost perfect implementation of what I need, named Ext.ux.grid.ExplorerView. However, the extension was developed for ExtJS versions 2.x (3.x), and cannot be reused for ExtJS 4.

I use a grid which is created as simple as:

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: { ... }
    }
});

I have tried to update tpl property of the inner view component, but nothing seems to work.

Do you have any idea of how to make the dynamic switch between the views for a single grid panel?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem was easily solved with wonderful feature for grid panel named “Tileview” developed by Harald Hanek. The solution was specially developed for ExtJS 4.

    The basic usage example is:

    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("")
        }
    })]
});

    To change the view we should just use setView() method, i.e.

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

    That’s how the feature looks like in the real life.

    • Example of tile view:

    enter image description here

    • Example of image view:

    enter image description here

    References:

    • 0