Results 1 to 7 of 7

Thread: RowExpander Addon: expandOnlyOne, to auto collapse the last expanded row

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    1
      1  

    Default RowExpander Addon: expandOnlyOne, to auto collapse the last expanded row

    RowExpander Addon: expandOnlyOne

    It's just a little addon for RowExpander plugin which adds two features: the ability to only have one expanded row and to collapse the last expanded row.

    Code:
    /**
     * @class Ext.ux.RowExpanderPlus
     * @extends Ext.ux.RowExpander
     * Plugin (ptype = 'rowexpanderplus') s just a little addon for 
     * {@link Ext.ux.RowExpander RowExpander} plugin which adds two features: 
     * the ability to only have one expanded row 
     * and to collapse the last expanded row.
     *
     * @ptype rowexpanderplus
     */
    Ext.define('Ext.ux.RowExpanderPlus', {
        extend: 'Ext.ux.RowExpander',
    
        alias: 'plugin.rowexpanderplus',
        
        /**
         * @cfg {Boolean} expandOnlyOne
         * <tt>true</tt> to allow only one expanded row
         * (defaults to <tt>true</tt>).
         */
        expandOnlyOne: true,
        
        lastExpandedRowIdx: null,
        
        // Overwrite RowExpander.toggleRow(rowIdx)
        toggleRow: function(rowIdx) {
            var row = Ext.get(this.view.getNode(rowIdx));
            if (row.hasCls(this.rowCollapsedCls)) {
                if (this.lastExpandedRowIdx != null && this.expandOnlyOne == true) {
                    this.collapseRow(this.lastExpandedRowIdx);
                }
                this.expandRow(rowIdx);
                this.lastExpandedRowIdx = rowIdx;
            } else {
                this.collapseRow(rowIdx);
                this.lastExpandedRowIdx = null;
            }
        },
        
        expandRow: function(rowIdx) {
            var view = this.view,
                rowNode = view.getNode(rowIdx),
                row = Ext.get(rowNode),
                nextBd = Ext.get(row).down(this.rowBodyTrSelector),
                record = view.getRecord(rowNode);
    
                row.removeCls(this.rowCollapsedCls);
                nextBd.removeCls(this.rowBodyHiddenCls);
                this.recordsExpanded[record.internalId] = true;
                view.refreshSize();
                view.fireEvent('expandbody', rowNode, record, nextBd.dom);
        },
        
        collapseRow: function(rowIdx) {
            var view = this.view,
                rowNode = view.getNode(rowIdx),
                row = Ext.get(rowNode),
                nextBd = Ext.get(row).down(this.rowBodyTrSelector),
                record = view.getRecord(rowNode);
    
                row.addCls(this.rowCollapsedCls);
                nextBd.addCls(this.rowBodyHiddenCls);
                this.recordsExpanded[record.internalId] = false;
                view.refreshSize();
                view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
        },
        
        /**
         * @method
         * Collapse the last expanded row.
         */
        collapseLastRow: function() {
            this.collapseRow(this.lastExpandedRowIdx);
        }
        
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,407
    Vote Rating
    503
      0  

    Default

    Thank you for the contribution.

    Scott.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default

    how can i use it?can you give me a demo?

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    1
      0  

    Default Example

    This is a simple example.

    Code:
    Ext.define('Team', {
        extend: 'Ext.grid.Panel',
        requires: [
            'Ext.ux.RowExpanderPlus'
        ],
        store: 'Team',
        plugins: [
            {
                ptype: 'rowexpanderplus',
                pluginId: 'rowexpanderplus',
                selectRowOnExpand: true,
                expandOnlyOne: true,
                rowBodyTpl : [
                    '<tpl for="members">' +
                    '   <div>{name}</div>' +
                    '   <div>{email}</div>' +
                    '</tpl>'
                ]
            }
        ],                    
        columns: [
            {
                header: 'Id', 
                dataIndex: 'id', 
                flex: 1
            },
            { 
                header: 'Name', 
                dataIndex: 'name', 
                flex: 1
            },
            { 
                header: 'City', 
                dataIndex: 'city', 
                flex: 1
            }                        
        ],
    });

  5. #5
    Sencha Premium Member
    Join Date
    Dec 2013
    Posts
    13
    Vote Rating
    1
      0  

    Exclamation RowExpander addon - when applied to grouping grid - behaviour changed

    we applied this RowExpander addon - to grouping grid default behaviour changed.

    This row expander Addon - working fine only for General grids.

    In case of grouping grids, grouping feature is effected with expandOnlyOne, to auto collapse the last expanded row.

    Give solution, how to apply for grouping grids & apply this Add-on condition only to row expander (ptype) but not for grouping feature.

    Check this Fiddle for testing.
    http://jsfiddle.net/prajavk/89Ljt/

  6. #6
    Sencha User
    Join Date
    Oct 2013
    Posts
    21
    Vote Rating
    0
      0  

    Default

    hi javamaniac2, thanks for sharing the addon code

    EDIT: by the way, what version of extjs were you using?

  7. #7
    Sencha User
    Join Date
    May 2013
    Posts
    90
    Vote Rating
    1
      0  

    Default Row Expander

    Quote Originally Posted by gabrikid View Post
    hi javamaniac2, thanks for sharing the addon code

    EDIT: by the way, what version of extjs were you using?

    Hi,
    Thanks for giving the rowexpander.
    When i am using this everything is working fine but
    sometimes when i expanding the row i am getting the error like

    Uncaught TypeError: Cannot read property 'isSynchronized' of undefined
    at constructor.addCls (ext-all-rtl-debug.js?_dc=1485258132865:35301)
    at constructor.addCls (ext-all-rtl-debug.js?_dc=1485258132865:64645)
    at constructor.disable (ext-all-rtl-debug.js?_dc=1485258132865:65347)
    at constructor.setDisabled (ext-all-rtl-debug.js?_dc=1485258132865:67003)
    at constructor.setChildDisabled (ext-all-rtl-debug.js?_dc=1485258132865:171142)
    at constructor.beforeLoad (ext-all-rtl-debug.js?_dc=1485258132865:171239)
    at constructor.fire (ext-all-rtl-debug.js?_dc=1485258132865:20223)
    at constructor.doFireEvent (ext-all-rtl-debug.js?_dc=1485258132865:21130)
    at constructor.prototype.doFireEvent (ext-all-rtl-debug.js?_dc=1485258132865:55224)
    at constructor.fireEventArgs (ext-all-rtl-debug.js?_dc=1485258132865:20983).

    Help me to solve this.


    Thanks
    Kamalakar Reddy Vancha

Tags for this Thread

Posting Permissions

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