Hybrid View

  1. #1
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    Nürnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      3  

    Default Thumbnails in Grid with switching between views.

    Thumbnails in Grid with switching between views.


    Ext.ux.grid.feature.Tileview



    Source on Github:
    https://github.com/harrydeluxe/extjs-ux/

    Demo:
    http://harrydeluxe.github.com/extjs-.../tileview.html
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Looks pretty good! I like this!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Nice ...

    Are the dual scrollbars so we can scroll twice as fast? <bg>

    Regards,
    Scot.

  4. #4
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    GREAT
    +1

    TINY BUG : DOUBLE SCROLL BAR IN GOOGLE CHROME.

    screen00.jpg
    Vador

  5. #5
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    Nürnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      0  

    Default


    Thanks for the note. Fixed.
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,945
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Cool extension, very nice.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    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

  8. #8
    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();
             }
        }
    });