Results 1 to 6 of 6

Thread: Group Tab Panel

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-16191 in 5.1.5.
  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    2

    Default Group Tab Panel

    Hi,

    i don't find into any version of Ext Js 5.* a working example of a Group Tab Panel.
    The one in the example directory give me a blank page on IE, firefox and crhome.

    Any help would be appreciated.

    Thanks in advance.

  2. #2
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

    Brian

  3. #3
    Sencha Premium Member
    Join Date
    May 2009
    Posts
    3

    Default

    I'm having the same problem. I tried to use the GroupTabPanel.js ux and I just get a blank panel. I narrowed down some of the issues.


    In GroupTabRenderer.js
    -in the tableTpl config - renderRows is being passed the wrong type of parameters. It takes rows, columns, viewStartIndex. But the existing GroupTabRenderer.js was not passing in columns as the second parameter.
    http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.view.Table-method-renderRows

    f
    rom existing file:
    HTML Code:
    tableTpl: new Ext.XTemplate(       
     '<div id="{view.id}-body" class="' + Ext.baseCSSPrefix + '{view.id}-table ' + Ext.baseCSSPrefix + 'grid-table-resizer" style="{tableStyle}">',           
     '{%',         
     'values.view.renderRows(values.rows, values.viewStartIndex, out);',          
     '%}', 
     '</div>',
    {priority: 5}
    ),
    I changed that to.
    HTML Code:
    'values.view.renderRows(values.rows, values.columns, values.viewStartIndex, out);',
    Once I fixed those I get the grouptabpanel to render but there the sizing is off and the when I click on each item in the treegrid there are javascript errors.

  4. #4
    Sencha User
    Join Date
    Sep 2008
    Posts
    3

    Default

    I've got it mostly working and got rid of the js errors after changing the templates to be similar to the new templates in the Table.js of ExtJS 5 and increasing their priority over the priority of the ExtJS templates.

    My GroupTabRenderer is now:

    Code:
    /*** Allows GroupTab to render a table structure.
    */
    Ext.define('Ext.ux.GroupTabRenderer', {
        extend: 'Ext.plugin.Abstract',
        alias: 'plugin.grouptabrenderer',
    
    
        tableTpl: new Ext.XTemplate(
            '<div id="{view.id}-body" class="' + Ext.baseCSSPrefix + '{view.id}-table ' + Ext.baseCSSPrefix + 'grid-table-resizer" style="{tableStyle}">',
                '{%',
                    'values.view.renderRows(values.rows, values.columns, values.viewStartIndex, out);',
                '%}',
            '</div>',
            {
                priority: 99999999
            }
        ),
    
    
        rowTpl: new Ext.XTemplate(
            '{%',
                'Ext.Array.remove(values.itemClasses, "', Ext.baseCSSPrefix + 'grid-row");',
                'var dataRowCls = values.recordIndex === -1 ? "" : " ' + Ext.baseCSSPrefix + 'grid-data-row";',
            '%}',
            '<table {[values.rowId ? ("id=\\"" + values.rowId + "\\"") : ""]} ',
                'data-boundView="{view.id}" ',
                'data-recordId="{record.internalId}" ',
                'data-recordIndex="{recordIndex}" ',
                'class="' + Ext.baseCSSPrefix + 'grouptab-item {[values.itemClasses.join(" ")]} {[values.rowClasses.join(" ")]}{[dataRowCls]}" ',
                '{%',
                    'var dataRowCls = values.recordIndex === -1 ? "" : " ' + Ext.baseCSSPrefix + 'grid-row";',
                '%}>',
                '<tr class="' + Ext.baseCSSPrefix + 'grouptab-row {[values.rowClasses.join(" ")]} {[dataRowCls]}" {rowAttr:attributes} {ariaRowAttr}>',
                '<tpl for="columns">' +
                    '{%',
                        'parent.view.renderCell(values, parent.record, parent.recordIndex, parent.rowIndex, xindex - 1, out, parent)',
                     '%}',
                '</tpl>',
                '</tr>',
                '</table>',
            {
                priority: 99999999
            }
        ),
    
    
        cellTpl: new Ext.XTemplate(
            '<td class="{tdCls}" {tdAttr} {[Ext.aria ? "id=\\"" + Ext.id() + "\\"" : ""]} style="width:{column.cellWidth}px;<tpl if="tdStyle">{tdStyle}</tpl>" tabindex="-1" {ariaCellAttr} data-columnid="{[values.column.getItemId()]}">',
                '<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'grid-cell-inner {innerCls}" style="text-align: {align}; {style};">{value}</div>',
                '<div class="x-grouptabs-corner x-grouptabs-corner-top-left"></div>',
                '<div class="x-grouptabs-corner x-grouptabs-corner-bottom-left"></div>',
            '</td>',
            {
                priority: 99999999
            }
        ),
    
    
        selectors: {
            // Outer table
            bodySelector: 'div.' + Ext.baseCSSPrefix + 'grid-table-resizer',
    
    
            // Element which contains rows
            nodeContainerSelector: 'div.' + Ext.baseCSSPrefix + 'grid-table-resizer',
    
    
            // row
            itemSelector: 'table.' + Ext.baseCSSPrefix + 'grouptab-item',
    
    
            // row which contains cells as opposed to wrapping rows
            rowSelector: 'tr.' + Ext.baseCSSPrefix + 'grouptab-row',
    
    
            // cell
            cellSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab-cell', 
    
    
            getCellSelector: function(header) {
                return header ? header.getCellSelector() : this.cellSelector; 
            }
    
    
        },
    
    
        init: function(grid) {
            var view = grid.getView(), 
            me = this;
            view.addTpl(me.tableTpl);
            view.addRowTpl(me.rowTpl);
            view.addCellTpl(me.cellTpl);
            Ext.apply(view, me.selectors);
        }
    });
    The only thing left are some styling issues which I don't know whether they come from my code or not.

  5. #5
    Sencha User
    Join Date
    Aug 2014
    Posts
    2

    Default

    Hi all,after nearly nine months from first post, no one fixed this bug?

  6. #6
    Ext JS Premium Member nickadel's Avatar
    Join Date
    Dec 2010
    Posts
    2

    Default

    How was this fixed in ExtJS 5? Version 5.1.5 isn't even available for download.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •