1. #21
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Moldova, Republic of / Shelton, CT, US
    Posts
    154
    Vote Rating
    6
    amsoft is on a distinguished road

      0  

    Question


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

  2. #22
    Sencha User Simonici's Avatar
    Join Date
    Nov 2009
    Posts
    14
    Vote Rating
    0
    Simonici is on a distinguished road

      0  

    Default


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

  3. #23
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default 4.2.0

    4.2.0


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

  4. #24
    Sencha User
    Join Date
    Sep 2011
    Location
    srilanka
    Posts
    18
    Vote Rating
    0
    jeewiya is on a distinguished road

      0  

    Default Update For 4.2

    Update For 4.2


    Is there are any updates for Extjs 4.2 ?

  5. #25
    Sencha User
    Join Date
    Sep 2011
    Location
    srilanka
    Posts
    18
    Vote Rating
    0
    jeewiya is on a distinguished road

      0  

    Default Extjs 4.2

    Extjs 4.2


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

  6. #26
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    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

  7. #27
    Sencha User
    Join Date
    Nov 2007
    Posts
    2
    Vote Rating
    0
    wlady is on a distinguished road

      0  

    Default


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

    Code:
    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:

    Code:
    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:
    Code:
    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();
             }
        }
    });

  8. #28
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    481
    Vote Rating
    4
    Jangla is on a distinguished road

      0  

    Default


    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

    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     : [
    ...

  9. #29
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    481
    Vote Rating
    4
    Jangla is on a distinguished road

      0  

    Default


    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.

  10. #30
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    481
    Vote Rating
    4
    Jangla is on a distinguished road

      0  

    Default


    Quote Originally Posted by temporary View Post
    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?