Thumbnails in Grid with switching between views.

[amsoft]

i'm pretty interested in this extension for extjs 4.2 too. Any news?

[Simonici]

Great Feature. On which extjs version can this be used ? 4.07?

[temporary]

Has anyone made any progress on getting this to work with 4.2.*?

[jeewiya]

Is there are any updates for Extjs 4.2 ?

[jeewiya]

Is there are any update for Extjs 4.2. We are still working with 4.1 without any updates.

[temporary]

Hey folks,

I managed to port this to ExtJS 4.2+

Its still work in progress, and I would love to see others contribute, since I am in desperate need of this component for 4.2 ;-)

The basic functionality works, haven't checked if it still works with other features like grouping.
And I only tested it with current stable Chrome on MacOS.

Will create a github repo for this soon.

Right now, you can find the changed code here:
https://fiddle.sencha.com/#fiddle/2u6

[wlady]

You shouldn't remove template items like it was in Tileview.js line 21:

grid.view.tableTpl.html = grid.view.tableTpl.html.replace(/\{\[view.renderColumnSizer\(out\)\]\}/, '');

In this way all other grids will be created without colgroups (ie with wrong size).
The simplest solution is to add your own table template into initConfig:

Ext.create('Ext.ux.grid.feature.Tileview', {
    viewMode: 'default',
    tableTpl: [
        '{%',
            // Add the row/column line classes to the table element.
            'var view=values.view,tableCls=["' + Ext.baseCSSPrefix + '" + view.id + "-table ' + Ext.baseCSSPrefix + 'grid-table"];',
            'if (view.columnLines) tableCls[tableCls.length]=view.ownerCt.colLinesCls;',
            'if (view.rowLines) tableCls[tableCls.length]=view.ownerCt.rowLinesCls;',
        '%}',
        '<table role="presentation" id="{view.id}-table" class="{[tableCls.join(" ")]}" border="0" cellspacing="0" cellpadding="0" style="{tableStyle}" tabIndex="-1">',
            '{[view.renderTHead(values, out)]}',
            '{[view.renderTFoot(values, out)]}',
            '<tbody id="{view.id}-body">',
            '{%',
                'view.renderRows(values.rows, values.viewStartIndex, out);',
            '%}',
            '</tbody>',
        '</table>',
        {
            priority: 0
        }
    ],
    viewTpls:
    {
        // custom row tpls
    }
})

and add tableTpl switching in setView method. Please remember you have to save original tableTpl and use it when necessary:

Ext.define('Ext.ux.grid.feature.Tileview', {
    extend: 'Ext.grid.feature.Feature',
    alias: 'feature.tileview',
    metaTableTplOrig: null, // stores the original template
    viewMode: null,
    viewTpls: {},
    tableTpls: {},


    init: function(grid) {


        var me = this,
            view = me.view;


        me.metaTableTplOrig = me.view.tableTpl;
        view.tileViewFeature = me;


        Ext.Object.each(this.viewTpls, function(key, rowTpl) {
            view.addRowTpl(new Ext.XTemplate(rowTpl));
        })




        me.callParent(arguments);
    },


    getColumnValues: function(columns, record) {
        var columnValues = {};
        Ext.each(columns, function(column) {
            var key = column.dataIndex,
                value = record.data[column.dataIndex];


            columnValues[key] = value;
        });
        return columnValues;
    },


    getRowBody: function(values, viewMode)
    {
        if(this.viewTpls[viewMode])
        {
            return this.viewTpls[viewMode];
        }
    },


    setView: function(mode)
    {
        var me = this;


        if(me.viewMode != mode)
        {
            me.viewMode = mode;
            if (mode!='default') {
                me.view.addTableTpl(new Ext.XTemplate(me.tableTpl))
            } else {
                me.view.addTableTpl(me.metaTableTplOrig)
            }
            me.view.refresh();
         }
    }
});

[Jangla]

I'm trying to implement this for a pretty complex grid we have and I've been getting an issue:

http://puu.sh/ehIft/ea8c90fd68.png

Notice in the screenshot how the rows are *outside* the x-grid-table-resizer table.

I will post some of my code as soon as I can but if anyone has come across this issue in the meantime, please chime in


Edit: Code

/**
 * Small override
 * @see http://www.sencha.com/forum/showthread.php?183860-Feature-Request-for-Ext.view.TableChunker
 * This will be used with the tile view feature in Grid.js
 */




Ext.grid.feature.Feature.override({
    mutateMetaTableTpl: function (metaTableTplArray) {
    }
});


Ext.view.TableChunker.getTableTpl = function (cfg, textOnly) {
    var tpl,
        tableTplMemberFns = {
            openRows      : this.openRows,
            closeRows     : this.closeRows,
            embedFeature  : this.embedFeature,
            embedFullWidth: this.embedFullWidth,
            openTableWrap : this.openTableWrap,
            closeTableWrap: this.closeTableWrap
        },
        tplMemberFns = {},
        features = cfg.features || [],
        ln = features.length,
        i = 0,
        memberFns = {
            embedRowCls   : this.embedRowCls,
            embedRowAttr  : this.embedRowAttr,
            firstOrLastCls: this.firstOrLastCls
        },
        metaRowTpl = Array.prototype.slice.call(this.metaRowTpl, 0),
        metaTableTpl = Array.prototype.slice.call(this.metaTableTpl, 0);




    for (; i < ln; i++) {
        if (!features[i].disabled) {
            features[i].mutateMetaTableTpl(metaTableTpl); // new
            features[i].mutateMetaRowTpl(metaRowTpl);
            Ext.apply(memberFns, features[i].getMetaRowTplFragments());
            Ext.apply(tplMemberFns, features[i].getFragmentTpl());
            Ext.apply(tableTplMemberFns, features[i].getTableFragments());
        }
    }


    metaRowTpl = new Ext.XTemplate(metaRowTpl.join(''), memberFns);
    cfg.row = metaRowTpl.applyTemplate(cfg);


    metaTableTpl = new Ext.XTemplate(metaTableTpl.join(''), tableTplMemberFns);	// new


    tpl = metaTableTpl.applyTemplate(cfg);


    // TODO: Investigate eliminating.
    if (!textOnly) {
        tpl = new Ext.XTemplate(tpl, tplMemberFns);
    }
    return tpl;


};


/**
 * Grid
 * All the grid components should go in here
 * Ideally this should be the place only the base classes go and fully fledged grids should be created as views.
 * Legacy grids will be moved into here for safe keeping in the hope we someday have the time to convert them to views
 */




/**
 * @class Ext.ux.grid.feature.Tileview
 * @extends Ext.grid.feature.Feature
 *
 * @author Harald Hanek (c) 2011-2012
 * @license http://harrydeluxe.mit-license.org
 */


Ext.define('Ext.ux.grid.feature.Tileview', {
    extend          : 'Ext.grid.feature.Feature',
    alias           : 'feature.tileview',
    metaTableTplOrig: null, // stores the original template
    viewMode        : null,
    viewTpls        : {},
    metaTableTpl    : ['{[this.openTableWrap()]}',
        '<table class="' + Ext.baseCSSPrefix + 'grid-table tileview" border="0" cellspacing="0" cellpadding="0" style="width: auto;">',
        '<tbody class="dragselect">',
        '{[this.openRows()]}',
        '{row}',
        '<tpl for="features">',
        '{[this.embedFeature(values, parent, xindex, xcount)]}',
        '</tpl>',
        '{[this.closeRows()]}',
        '</tbody>',
        '</table>',
        '{[this.closeTableWrap()]}'
    ],


    getRowBody: function (values, viewMode) {
        if (this.viewTpls[viewMode]) {
            return this.viewTpls[viewMode];
        }
    },


    mutateMetaTableTpl: function (metaTableTpl) {
        var me = this;


        if (me.viewMode && me.viewMode != 'default') {
            metaTableTpl[1] = '<table class="' + Ext.baseCSSPrefix + 'grid-table tileview" border="0" cellspacing="0" cellpadding="0" style="width: auto;">';
            metaTableTpl[2] = '<tbody class="dragselect">';
            metaTableTpl[3] = null;
            metaTableTpl[4] = null;
            metaTableTpl[5] = null;
            metaTableTpl[6] = null;
            metaTableTpl[7] = null;
        }
    },


    mutateMetaRowTpl: function (metaRowTpl) {
        var me = this;


        if (me.viewMode && me.viewMode != 'default') {
            metaRowTpl[0] = '<tr class="' + Ext.baseCSSPrefix + 'grid-row tileview {[this.embedRowCls()]}" {[this.embedRowAttr()]}>';
            metaRowTpl[1] = null;
            metaRowTpl[2] = '{[this.getRowBody(values, this.viewMode)]}';
            metaRowTpl[3] = null;
            metaRowTpl[4] = null;
            metaRowTpl[5] = null;
            metaRowTpl[6] = "</tr>";
        }
    },


    getMetaRowTplFragments: function () {
        return {
            getRowBody: this.getRowBody,
            viewMode  : this.viewMode,
            viewTpls  : this.viewTpls
        };
    },


    setView: function (mode) {
        var me = this;


        if (me.viewMode != mode) {
            me.viewMode = mode;
            me.view.refresh();
        }
    }
});



// the grid itself has this in it's build function

        me.TileViewFeature = Ext.create('Ext.ux.grid.feature.Tileview', {
            viewMode         : 'default',          // default will be rows
            getAdditionalData: function(data, index, record, orig)
            {
                return Ext.apply({}, {
                    contentType : (data.thumbnailAssetRef || data.mainAssetRef) ? 'image' : 'text',
                    backgroundAsset :  data.thumbnailAssetRef ? data.thumbnailAssetRef : (data.mainAssetRef ? data.mainAssetRef : '')
                }, data);
            },
            viewTpls: {
                tileView: '\
                    <div class="ngx-grid-tile-item ngx-grid-content-{contentType} ngx-grid-network-twitter">\
                        <div class="ngx-grid-tile-item-inner" style="background-image: url(\'{backgroundAsset:assetRefToPath}\')">\
                            <div class="ngx-item-actions">\
                                <div class="ngx-item-actions-inner">\
                                    <div data-tooltip="Review &amp; edit" class="item-action-icon"><i data-icon="e"></i></div>\
                                    <div data-tooltip="Link to advocacy" class="item-action-icon"><i data-icon="&"></i></div>\
                                    <div data-tooltip="Go to campaign" class="item-action-icon"><i data-icon="9"></i></div>\
                                    <div data-tooltip="Request content rights" class="item-action-icon"><i data-icon="©"></i></div>\
                                    <div data-tooltip="Mark as favourite" class="item-action-icon"><i data-icon="*"></i></div>\
                                </div>\
                            </div>\
                            <div class="ngx-user-profile">\
                                <div class="ngx-user-profile-inner">\
                                    <div class="ngx-network-icon">\
                                        <i data-icon="{externalService:dataIcon}"></i>\
                                    </div>\
                                    <div class="ngx-user-avatar">{[NGXUtils.createAvatar(values.avatar, values.userName, "entry-avatar")]}</div>\
                                    <div class="user-details">\
                                        <tpl if="profile">\
                                            <div class="name">{profile:sanitize}</div>\
                                            <div class="handle">{userName:userHandle(values.externalService)}</div>\
                                        <tpl else>\
                                            <div class="name">{userName:sanitize}</div>\
                                        </tpl>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="ngx-grid-content">\
                                <p class="grid-content">{content:shorten(140)}</p>\
                            </div>\
                        </div>\
                    </div>'
            }
        });

// and then this in the initComponent:

        Ext.apply(me, {
            id          : me.id || Ext.id(),
            selModel    : {
                pruneRemoved: true
            },
            features    : [me.TileViewFeature],
            viewConfig  : Ext.apply({}, {
                chunker                : Ext.view.TableChunker,
                deferEmptyText         : false,
                emptyText              : '<div class="grid-data-empty"><div class="empty-grid-icon"><i data-icon="/"></i></div><div class="empty-grid-headline">Nothing to see here</div><div class="empty-grid-byline">There are no records to show you right now. There may be no content or your filters may be too tightly defined.</div></div>',
                preserveScrollOnRefresh: true,
                getRowClass            : function (record, rowIndex, rowParams, store) {
                    return 'ngx-grid-fixed-height-row row-height-medium'
                }
            }, me.viewDefaultViewConfig),
            columns     : [
...

[Jangla]

Minor bug spotted (with the drag select rather than the view switching): Drag to select some rows in icon view. Then switch to regular table row view and perform another row selection. Now change back to an icon view and drag select once more. Note that the drag box no longer appears to indicate where your selection is.

[Jangla]

Hey folks,

I managed to port this to ExtJS 4.2+

Its still work in progress, and I would love to see others contribute, since I am in desperate need of this component for 4.2 ;-)

The basic functionality works, haven't checked if it still works with other features like grouping.
And I only tested it with current stable Chrome on MacOS.

Will create a github repo for this soon.

Right now, you can find the changed code here:
https://fiddle.sencha.com/#fiddle/2u6

The link to tileview.js is broken so although the fiddle works, we can't check out the code

Edit: Also, I was previously using getAdditionalData on the tileview feature to manipulate and inject more data for my tileview. This doesn't get called in Ext 4.2. Anyone know of a solution for this?