Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Hide RowExpander +/- column

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    22

    Default Hide RowExpander +/- column

    Hi:

    I have a check box column that I am using to show/hide the rowexpander section. Therefore, I need to hide the column that contains the +/- icons. I can get the icon to not show via CSS, but the column is still there and can be clicked. How do I get rid of that column completely? Thank you!

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Use at your own risk since this uses some private methods from the RowExpander class, but if you give your rowExpander config a pluginId the following would work

    Code:
    plugins: [{
        ptype: 'rowexpander'
        , pluginId: 'expander'
        , rowBodyTpl: ''
    }]
    Code:
    // .... grid config
    listeners: {
        afterrender: function (grid) {
            var columnId = grid.getPlugin('expander').getHeaderId();
            Ext.getCmp(columnId).hide();
        }
    }

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    8

    Default How to get it for Ext 4.2

    Hi Slemmon,

    The above code for getting the id of the column of RowExpander plugin works fine for Ext 4.1.
    In Ext 4.2, the plugin does not have getHeaderId method. so how to get the id of the column created by the Rowexpander plugin. Thanks in advance.

    Thanks,
    Udaya

  4. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    You might extend the plugin and modify the addExpander method to cache a reference to the inserted header:

    ..
    this.myHeader = expanderGrid.headerCt.insert(0, expanderHeader);
    ..

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    8

    Default I had done this to get the id

    I had overridden the getHeaderConfig method of row expander plugin and explicitly specified an id in the returned object. This helped me getting the id of the +/- column. Thanks slemmon for your help. I can use this method also.

    Thanks,
    Udaya

  6. #6

    Default

    I'm having the exact same problem. Can you please provide the code you made it work with? Thanks.

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    8

    Default Overrided the 'getHeaderConfig' method of row expander class

    Hi danklasson,

    I had overrided the '
    getHeaderConfig' method of rowexpander class and added id to the column as shown.


    Code:
    
    
    Code:
    getHeaderConfig : function() {        var me = this;
            
            return {
                width: 24,
                lockable: false,
                sortable: false,
                resizable: false,
                id: 'some_id',
                draggable: false,
                hideable: false,
                menuDisabled: true,
                tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
                innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',
                renderer: function(value, metadata) {
                    // Only has to span 2 rows if it is not in a lockable grid.
                    if (!me.grid.ownerLockable) {
                        metadata.tdAttr += ' rowspan="2"';
                    }
                    return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander" role="presentation"></div>';
                },
                processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {
                    if (type == "mousedown" && e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-expander')) {
                        me.toggleRow(rowIndex, record);
                        return me.selectRowOnExpand;
                    }
                }
            };
    
        }

    After the grid has rendered you can access the +/- column using this id '
    some_id'. I hope this is what you wanted .

    Thanks,
    Udaya

  8. #8

    Default

    Thank you. Hiding the column caused the subgrid to change column width. Instead I just changed the width. Here is the code if anyone is interested:

    Code:
    Ext.define('Rx.grid.MyRowExpander', function() {    var spec = {
            extend: 'Ext.ux.RowExpander',
            alias: 'plugin.myrowexpander',
    
    
            getHeaderConfig : function() { 
                var me = this;
            
                return {
                    width: 2,
                    lockable: false,
                    sortable: false,
                    resizable: false,
                    draggable: false,
                    hideable: false,
                    menuDisabled: true,
                    tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
                    innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',
                    renderer: function(value, metadata) {
                        // Only has to span 2 rows if it is not in a lockable grid.
                        if (!me.grid.ownerLockable) {
                            metadata.tdAttr += ' rowspan="2"';
                        }
                        return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander"></div>';
                    },
                    processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {
                        if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
                            me.toggleRow(rowIndex, record);
                            return me.selectRowOnExpand;
                        }
                    }
                };
            }
        };
    
    
        return spec;
    });
    Then just use myrowexpander instead of rowexpander

  9. #9

    Default Sharing.

    This worked for me for Ext 4.2

    Code:
    listeners: {
        afterrender: function (grid) {
           grid.getView().getHeaderAtIndex(0).hide();
        }
    }

  10. #10
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default

    Worked for me. Thank you Praetor_blue
    ---A ship in the harbor is safe, but that is not what the ships are made for...

Page 1 of 2 12 LastLast

Posting Permissions

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