1. #1
    Sencha User
    Join Date
    Feb 2009
    Posts
    2
    Vote Rating
    0
    xingcy is on a distinguished road

      0  

    Exclamation Ext.ux.RowExpander does't work

    Ext.ux.RowExpander does't work


    i use Ext.ux.RowExpander in Ext4 ,
    but got an error,
    " var rowNode = this.view.getNode(rowIdx)",
    the rowNode is null,
    so the ux doesn't work.
    can anybody give me some advice! thanks.

  2. #2
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    53
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Please take a look at this example:

    http://dev.sencha.com/deploy/ext-4.0...d-plugins.html
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Vote Rating
    42
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      0  

    Default


    I`m fix errors with 4.0.2a and add ability to load data for rowBodyTpl via AJAX.
    Plugin:
    PHP Code:
    /*

    This file is part of Ext JS 4

    Copyright (c) 2011 Sencha Inc

    Contact:  http://www.sencha.com/contact

    GNU General Public License Usage
    This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

    If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

    */

    // feature idea to enable Ajax loading and then the content
    // cache would actually make sense. Should we dictate that they use
    // data or support raw html as well?

    // Sergei Pochtovyi:
    // fixed error with ExtJS 4.0.2a
    // add AJAX data load

    /**
     * @class Ext.ux.RowExpander
     * @extends Ext.AbstractPlugin
     * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
     * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
     * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
     *
     * @ptype rowexpander
     */
    Ext.define('Ext.ux.grid.RowExpander', {
        
    extend'Ext.AbstractPlugin',
        
    alias'plugin.rowexpander',

        
    rowBodyTplnull,
        
    urlTplnull,

        
    /**
         * @cfg {Boolean} expandOnEnter
         * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
         * key is pressed (defaults to <tt>true</tt>).
         */
        
    expandOnEntertrue,

        
    /**
         * @cfg {Boolean} expandOnDblClick
         * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
         * (defaults to <tt>true</tt>).
         */
        
    expandOnDblClicktrue,

        
    /**
         * @cfg {Boolean} selectRowOnExpand
         * <tt>true</tt> to select a row when clicking on the expander icon
         * (defaults to <tt>false</tt>).
         */
        
    selectRowOnExpandfalse,

        
    rowBodyTrSelector'.x-grid-rowbody-tr',
        
    rowBodyDivSelector'.x-grid-rowbody',
        
    rowBodyHiddenCls'x-grid-row-body-hidden',
        
    rowCollapsedCls'x-grid-row-collapsed',

        
    renderer: function(valuemetadatarecordrowIdxcolIdx) {
            if (
    colIdx === 0) {
                
    metadata.tdCls 'x-grid-td-expander';
            }
            return 
    '<div class="x-grid-row-expander"> </div>';
        },

        
    /**
         * @event expandbody
         * <b<Fired through the grid's View</b>
         * @param {HtmlElement} rowNode The &lt;tr> element which owns the expanded row.
         * @param {Ext.data.Model} record The record providing the data.
         * @param {HtmlElement} expandRow The &lt;tr> element containing the expanded data.
         */
        /**
         * @event collapsebody
         * <b<Fired through the grid's View.</b>
         * @param {HtmlElement} rowNode The &lt;tr> element which owns the expanded row.
         * @param {Ext.data.Model} record The record providing the data.
         * @param {HtmlElement} expandRow The &lt;tr> element containing the expanded data.
         */

        
    constructor: function() {
            var 
    me this,
                
    grid;

            
    me.callParent(arguments);
            
    grid me.grid this.getCmp();
            
    me.recordsExpanded = {};

            if (
    me.urlTpl) {
                
    me.recordsLoaded = {};
            }

            
    // <debug>
            
    if (!me.rowBodyTpl) {
                
    Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
            }
            
    // </debug>
            // TODO: if XTemplate/Template receives a template as an arg, should
            // just return it back!

            
    me.urlXTpl Ext.create('Ext.XTemplate'me.urlTpl);
            var 
    rowBodyTpl me.rowBodyXTpl Ext.create('Ext.XTemplate'me.rowBodyTpl),
                
    features = [
                    {
                        
    ftype'rowbody',
                        
    columnIdme.getHeaderId(),
                        
    recordsExpandedme.recordsExpanded,
                        
    rowBodyHiddenClsme.rowBodyHiddenCls,
                        
    rowCollapsedClsme.rowCollapsedCls,
                        
    getAdditionalDatame.getRowBodyFeatureData,
                        
    getRowBodyContents: function(datarecord) {
                            if (
    me.urlTpl) {
                                return 
    '';
                            } else {
                                return 
    rowBodyTpl.applyTemplate(data);
                            }
                        }
                    },
                    {
                        
    ftype'rowwrap'
                    
    }
                ];

            if (
    grid.features) {
                
    grid.features features.concat(grid.features);
            } else {
                
    grid.features features;
            }

            
    grid.columns.unshift(me.getHeaderConfig());

            
    grid.on('afterrender'me.onGridAfterRenderme, {singletrue});
        },

        
    getHeaderId: function() {
            var 
    me this;

            if (!
    me.headerId) {
                
    me.headerId Ext.id();
            }
            return 
    me.headerId;
        },

        
    getRowBodyFeatureData: function(dataidxrecordorig) {
            var 
    me this,
                
    Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(thisarguments),
                
    id me.columnId;

            
    o.rowBodyColspan o.rowBodyColspan 1;
            
    o.rowBody me.getRowBodyContents(datarecord);
            
    o.rowCls me.recordsExpanded[record.internalId] ? '' me.rowCollapsedCls;
            
    o.rowBodyCls me.recordsExpanded[record.internalId] ? '' me.rowBodyHiddenCls;
            
    o[id '-tdAttr'] = ' valign="top" rowspan="2" ';
            if (
    orig[id+'-tdAttr']) {
                
    o[id+'-tdAttr'] += orig[id+'-tdAttr'];
            }
            
            return 
    o;
        },

        
    onGridAfterRender: function(gridoptions) {
            var 
    me this,
                
    view me.view me.grid.view;

            
    viewEl view.getEl();

            if (
    me.expandOnEnter) {
                
    me.keyNav Ext.create('Ext.KeyNav'viewEl, {
                    
    'enter' me.onEnter,
                    
    scopeme
                
    });
            }
            if (
    me.expandOnDblClick) {
                
    view.on('itemdblclick'me.onDblClickme);
            }
        },

        
    onEnter: function(e) {
            var 
    view this.view,
                
    ds   view.store,
                
    sm   view.getSelectionModel(),
                
    sels sm.getSelection(),
                
    ln   sels.length,
                
    0,
                
    rowIdx;

            for (; 
    lni++) {
                
    rowIdx ds.indexOf(sels[i]);
                
    this.toggleRow(rowIdx);
            }
        },

        
    loadBodyAjax: function(rowNoderecordrowBodyel)
        {
            var 
    me this,
                
    url me.urlXTpl.applyTemplate(record.data);

            
    Ext.Ajax.request({
                
    urlurl,
                
    success: function (response) {
                    var 
    data Ext.JSON.decode(response.responseText);

                    
    rowBody.update(me.rowBodyXTpl.applyTemplate(data));
                    
    me.recordsLoaded[record.internalId] = true;
                    
    me.view.fireEvent('expandbody'rowNoderecordel);
                }
            });
        },
        
        
    toggleRow: function(rowIdx) {
            var 
    me this,
                
    rowNode me.view.getNode(rowIdx),
                
    row Ext.get(rowNode),
                
    nextBd Ext.get(row).down(me.rowBodyTrSelector),
                
    rowBody Ext.get(row).down(me.rowBodyDivSelector),
                
    record me.view.getRecord(rowNode);

            if (
    row.hasCls(this.rowCollapsedCls)) {
                
    row.removeCls(this.rowCollapsedCls);
                
    nextBd.removeCls(this.rowBodyHiddenCls);
                
    me.recordsExpanded[record.internalId] = true;

                if (
    me.urlTpl && !me.recordsLoaded[record.internalId]) {
                    
    me.loadBodyAjax(rowNoderecordrowBodynextBd.dom);
                } else {
                    
    me.view.fireEvent('expandbody'rowNoderecordnextBd.dom);
                }
            } else {
                
    row.addCls(this.rowCollapsedCls);
                
    nextBd.addCls(this.rowBodyHiddenCls);
                
    me.recordsExpanded[record.internalId] = false;
                
    me.view.fireEvent('collapsebody'rowNoderecordnextBd.dom);
            }
            
    me.view.up('gridpanel').invalidateScroller();
        },

        
    onDblClick: function(viewcellrowIdxcellIndexe) {

            
    this.toggleRow(rowIdx);
        },

        
    getHeaderConfig: function() {
            var 
    me                this,
                
    toggleRow         Ext.Function.bind(me.toggleRowme),
                
    selectRowOnExpand me.selectRowOnExpand;

            return {
                
    idthis.getHeaderId(),
                
    width24,
                
    sortablefalse,
                
    fixedtrue,
                
    draggablefalse,
                
    hideablefalse,
                
    menuDisabledtrue,
                
    clsExt.baseCSSPrefix 'grid-header-special',
                
    renderer: function(valuemetadata) {
                    
    metadata.tdCls Ext.baseCSSPrefix 'grid-cell-special';

                    return 
    '<div class="' Ext.baseCSSPrefix 'grid-row-expander"> </div>';
                },
                
    processEvent: function(typeviewcellrecordIndexcellIndexe) {
                    if (
    type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
                        var 
    row e.getTarget('.x-grid-row');
                        
    toggleRow(row);
                        return 
    selectRowOnExpand;
                    }
                }
            };
        }
    }); 
    Example:
    Grid plugins:
    PHP Code:
    plugins: [{
                
    ptype'rowexpander',
                
    urlTpl'info.php?id={company}',
                
    rowBodyTpl : [
                    
    '<p><b>Info:</b> {info}</p><br>',
                    
    '<p><b>Foo:</b> {foo}</p>'
                
    ]
            }], 
    Server:
    PHP Code:
    $id $_GET['id'];
    echo 
    json_encode(array(
            
    'info' => 'Info from server ID:'.$id,
            
    'foo' => 'bar'
    )); 

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Vote Rating
    42
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      0  

    Default


    fixed errors when add plugin in Ext.define(....);
    PS.
    plugin not works if added in initComponent function.
    PHP Code:
    /*

    This file is part of Ext JS 4

    Copyright (c) 2011 Sencha Inc

    Contact:  http://www.sencha.com/contact

    GNU General Public License Usage
    This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

    If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

    */

    // feature idea to enable Ajax loading and then the content
    // cache would actually make sense. Should we dictate that they use
    // data or support raw html as well?

    // Sergei Pochtovyi:
    // fixed error with ExtJS 4.0.2a
    // fixed errors in defined grid
    // add AJAX data load

    /**
     * @class Ext.ux.RowExpander
     * @extends Ext.AbstractPlugin
     * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
     * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
     * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
     *
     * @ptype rowexpander
     */
    Ext.define('Ext.ux.RowExpander', {
        
    extend'Ext.AbstractPlugin',
        
    alias'plugin.rowexpander',

        
    uses: [
            
    'Ext.grid.feature.RowBody',
            
    'Ext.grid.feature.RowWrap'
        
    ],

        
    rowBodyTplnull,
        
    urlTplnull,

        
    /**
         * @cfg {Boolean} expandOnEnter
         * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
         * key is pressed (defaults to <tt>true</tt>).
         */
        
    expandOnEntertrue,

        
    /**
         * @cfg {Boolean} expandOnDblClick
         * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
         * (defaults to <tt>true</tt>).
         */
        
    expandOnDblClicktrue,

        
    /**
         * @cfg {Boolean} selectRowOnExpand
         * <tt>true</tt> to select a row when clicking on the expander icon
         * (defaults to <tt>false</tt>).
         */
        
    selectRowOnExpandfalse,

        
    rowBodyTrSelector'.x-grid-rowbody-tr',
        
    rowBodyDivSelector'.x-grid-rowbody',
        
    rowBodyHiddenCls'x-grid-row-body-hidden',
        
    rowCollapsedCls'x-grid-row-collapsed',

        
    /**
         * @event expandbody
         * <b<Fired through the grid's View</b>
         * @param {HtmlElement} rowNode The &lt;tr> element which owns the expanded row.
         * @param {Ext.data.Model} record The record providing the data.
         * @param {HtmlElement} expandRow The &lt;tr> element containing the expanded data.
         */
        /**
         * @event collapsebody
         * <b<Fired through the grid's View.</b>
         * @param {HtmlElement} rowNode The &lt;tr> element which owns the expanded row.
         * @param {Ext.data.Model} record The record providing the data.
         * @param {HtmlElement} expandRow The &lt;tr> element containing the expanded data.
         */   

        
    renderer: function(valuemetadatarecordrowIdxcolIdx) {
            if (
    colIdx === 0) {
                
    metadata.tdCls 'x-grid-td-expander';
            }
            return 
    '<div class="x-grid-row-expander"> </div>';
        },

        
    init: function(grid) {
            var 
    me this;

            
    // <debug>
            
    if (!me.rowBodyTpl) {
                
    Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
            }
            
    // </debug>

            
    me.callParent(arguments);

            
    me.view grid.view;
            
    me.grid.view.on('render'me.bindEventsme, {singletrue});
        },

        
    constructor: function(config) {
            
    //<debug>
            
    if (!config.cmp && Ext.global.console) {
                
    Ext.global.console.warn("Attempted to attach a plugin ");
            }
            
    //</debug>

            
    Ext.apply(thisconfig);

            
    this.recordsExpanded = {};
            var 
    me this,            
                
    rowBodyTpl me.rowBodyXTpl Ext.create('Ext.XTemplate'me.rowBodyTpl),
                
    features = [
                    {
                        
    ftype'rowbody',
                        
    columnIdme.getHeaderId(),
                        
    recordsExpandedme.recordsExpanded,
                        
    rowBodyHiddenClsme.rowBodyHiddenCls,
                        
    rowCollapsedClsme.rowCollapsedCls,
                        
    getAdditionalDatame.getRowBodyFeatureData,
                        
    getRowBodyContents: function(datarecord) {
                            if (
    me.urlTpl) {
                                return 
    '';
                            } else {
                                return 
    rowBodyTpl.applyTemplate(data);
                            }
                        }
                    },
                    {
                        
    ftype'rowwrap'
                    
    }
                ];

            
    me.grid me.getCmp();
            
    me.urlXTpl Ext.create('Ext.XTemplate'me.urlTpl);
                    
            if (
    me.urlTpl) {
                
    me.recordsLoaded = {};
            }

            if (
    me.grid.features) {
                
    me.grid.features features.concat(me.grid.features);
            } else {
                
    me.grid.features features;
            }
            
            if (
    me.grid.columns) {
                
    me.addExpanderColumn();
            } else {
                
    me.grid.on('render'me.addExpanderColumnme, {singletrue});
            }      
        },

        
    destroy: function() {
            
    delete me.recordsExpanded;
            
    delete me.recordsLoaded;
            
    delete me.rowBodyXTpl;
            
    delete me.urlXTpl;
        },

        
    bindEvents: function() {
            var 
    me this,
                
    view me.view,
                
    viewEl view.getEl();

            if (
    me.expandOnEnter) {
                
    me.keyNav Ext.create('Ext.KeyNav'viewEl, {
                    
    'enter' me.onEnter,
                    
    scopeme
                
    });
            }
            if (
    me.expandOnDblClick) {
                
    view.on('itemdblclick'me.onDblClickme);
            }        
        },

        
    addExpanderColumn: function() {
            
    this.grid.columns.unshift(this.getExpanderColumn());
        },

        
    getHeaderId: function() {
            var 
    me this;

            if (!
    me.headerId) {
                
    me.headerId Ext.id();
            }
            return 
    me.headerId;
        },

        
    getRowBodyFeatureData: function(dataidxrecordorig) {
            var 
    me this,
                
    Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(thisarguments),
                
    id me.columnId;

            
    o.rowBodyColspan o.rowBodyColspan 1;
            
    o.rowBody me.getRowBodyContents(datarecord);
            
    o.rowCls me.recordsExpanded[record.internalId] ? '' me.rowCollapsedCls;
            
    o.rowBodyCls me.recordsExpanded[record.internalId] ? '' me.rowBodyHiddenCls;
            
    o[id '-tdAttr'] = ' valign="top" rowspan="2" ';
            if (
    orig[id+'-tdAttr']) {
                
    o[id+'-tdAttr'] += orig[id+'-tdAttr'];
            }

            return 
    o;
        },

        
    onEnter: function(e) {
            var 
    view this.view,
                
    ds   view.store,
                
    sm   view.getSelectionModel(),
                
    sels sm.getSelection(),
                
    ln   sels.length,
                
    0,
                
    rowIdx;

            for (; 
    lni++) {
                
    rowIdx ds.indexOf(sels[i]);
                
    this.toggleRow(rowIdx);
            }
        },

        
    loadBodyAjax: function(rowNoderecordrowBodyel)
        {
            var 
    me this,
                
    url me.urlXTpl.applyTemplate(record.data);

            
    Ext.Ajax.request({
                
    urlurl,
                
    success: function (response) {
                    var 
    data Ext.JSON.decode(response.responseText);

                    
    rowBody.update(me.rowBodyXTpl.applyTemplate(data));
                    
    me.recordsLoaded[record.internalId] = true;
                    
    me.view.fireEvent('expandbody'rowNoderecordel);
                }
            });
        },

        
    toggleRow: function(rowIdx) {
            var 
    me this,
                
    rowNode me.view.getNode(rowIdx),
                
    row Ext.get(rowNode),
                
    nextBd Ext.get(row).down(me.rowBodyTrSelector),
                
    rowBody Ext.get(row).down(me.rowBodyDivSelector),
                
    record me.view.getRecord(rowNode);

            if (
    row.hasCls(me.rowCollapsedCls)) {
                
    row.removeCls(me.rowCollapsedCls);
                
    nextBd.removeCls(me.rowBodyHiddenCls);
                
    me.recordsExpanded[me.internalId] = true;

                if (
    me.urlTpl && !me.recordsLoaded[record.internalId]) {
                    
    me.loadBodyAjax(rowNoderecordrowBodynextBd.dom);
                } else {
                    
    me.view.fireEvent('expandbody'rowNoderecordnextBd.dom);
                }
            } else {
                
    row.addCls(me.rowCollapsedCls);
                
    nextBd.addCls(me.rowBodyHiddenCls);
                
    me.recordsExpanded[record.internalId] = false;
                
    me.view.fireEvent('collapsebody'rowNoderecordnextBd.dom);
            }
            
    me.view.up('gridpanel').invalidateScroller();
        },

        
    onDblClick: function(viewcellrowIdxcellIndexe) {

            
    this.toggleRow(rowIdx);
        },

        
    getExpanderColumn: function() {
            var 
    me                this,
                
    toggleRow         Ext.Function.bind(me.toggleRowme),
                
    selectRowOnExpand me.selectRowOnExpand,
                
    column Ext.create('Ext.grid.column.Column', {
                    
    idthis.getHeaderId(),
                    
    width24,
                    
    sortablefalse,
                    
    fixedtrue,
                    
    draggablefalse,
                    
    hideablefalse,
                    
    ownerCtme.grid.headerCt,
                    
    menuDisabledtrue,
                    
    clsExt.baseCSSPrefix 'grid-header-special',
                    
    renderer: function(valuemetadata) {
                        
    metadata.tdCls Ext.baseCSSPrefix 'grid-cell-special';

                        return 
    '<div class="' Ext.baseCSSPrefix 'grid-row-expander"> </div>';
                    },
                    
    processEvent: function(typeviewcellrecordIndexcellIndexe) {
                        if (
    type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
                            var 
    row e.getTarget('.x-grid-row');
                            
    toggleRow(row);
                            return 
    selectRowOnExpand;
                        }
                    }
                });
                
            return 
    column;
        }
    }); 

  5. #5
    Sencha User pmachner's Avatar
    Join Date
    Jun 2011
    Location
    Kraków, Poland
    Posts
    54
    Vote Rating
    1
    pmachner is on a distinguished road

      0  

    Default


    It seems to me that this is a duplicate of this thread:

    http://www.sencha.com/forum/showthre...on-(ext-all.js)

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Exclamation Consider using updated RowExpander

    Consider using updated RowExpander


    Also, for anyone starting from the original RowExpander plugin, I'd like to point out this thread:
    http://www.sencha.com/forum/showthre...D-April-5-2010

    Fixes memory leaks and such. If you want to take it from 3.x to 4.x, it would help the community to start from that. Please spread the word in any related RowExpander threads you may find.

    I would update it to 4.x, but apparently 4.0.2a broke RowExpander and I want to wait for the ExtJS fix to be released rather than implementing a workaround.

  7. #7