1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    javamaniac2 is on a distinguished road

      0  

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

    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
    8,910
    Vote Rating
    443
    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


    Thank you for the contribution.

    Scott.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    zhengeili is on a distinguished road

      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
    0
    javamaniac2 is on a distinguished road

      0  

    Default Example

    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
    12
    Vote Rating
    0
    wellsfargouser is on a distinguished road

      0  

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

    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/

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."