1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    7
    da_bar is on a distinguished road

      0  

    Default Ext.ux.RowBodyExtend grid "read more" extension

    Upgraded row body feature for displaying "Read more..." button for text that expands more than 20px in height.

    Example: http://extjs.dariofilkovic.com/

    Features:
    - read more button
    - can be used with checkbox column (remember to put +1 in rowBodyColspan and set checkcolumn: true)

    example:

    PHP Code:
    Ext.create('Ext.grid.Panel',  
            {  
                
    renderTo'readmore1'
                
    storegridStore
                
    features
                [ 
                    { 
                        
    ftype'rowbodyextend'
                        
    getAdditionalData: function(datarowIndexrecordorig
                        { 
                            return {
    rowBodyrecord.get("type"), rowBodyColspan2}; 
                        } 
                    } 
                ], 
                
    columns
                [ 
                    {
    header 'id'dataIndex 'id'}, 
                    {
    header 'name'dataIndex 'name'width500
                ]  
            }); 

    You can use readMoreText and readLessText to set text you want to display in "Read more" button, defaults to "Read more..." and "Less..."

    css:

    PHP Code:
    /* rowbodyexpander */  
        
    .rowbodyexpander-row-body td border-bottom1px solid #EDEDED;; }  
        
    .rowbodyexpander-row-body .rowbody-extend margin-left24pxbackground-color#333; color: #FFF; width: 75px; padding: 2px; cursor: pointer; float: right; }  
        
    .rowbodyexpander-row-body .rowbody-extend.show displayblock; }  
        .
    rowbodyexpander-row-body .rowbody-extend.hide displaynone; }  
        .
    rowbodyexpander-row-body .rowbodyexpander-row-body-text margin-left24pxpadding2px; } 
        .
    rowbodyexpander-row-body .noshow .rowbody-extend displaynone !important; }  
        .
    rowbodyexpander-row-body .rowbodyexpander-row-body-text.collapsed max-height15px; }  
        .
    rowbodyexpander-row-body .rowbodyexpander-row-body-text.expanded { }  
        .
    rowbodyexpander-table table border-collapsecollapse; }  
        .
    rowbodyexpander-table.x-grid-with-row-lines .x-grid-cell border-width!important; }  
        .
    rowbodyexpander-table .x-grid-row-focused + .rowbodyexpander-row-body background-color#DFE8F6 !important; }  
        
    .rowbodyexpander-table .x-grid-row-alt + .rowbodyexpander-row-body background-color#FAFAFA !important; }  
        
    .rowbodyexpander-table .rowbodyexpander-row-prebody width24pxheight500pxdisplayblockfloatleftbackground-color#F6F6F6; background-image: -moz-linear-gradient(left center , #F6F6F6, #E9E9E9); margin-right: 5px; position: absolute; }  
        
    .rowbodyexpander-table .x-grid-rowbody overflowhiddenpositionrelative; } 
    Extension:

    PHP Code:
    Ext.define('Ext.ux.RowBodyExtend',  

        
    extend'Ext.grid.feature.RowBody'
        
    alias'feature.rowbodyextend'
        
    rowBodyHiddenClsExt.baseCSSPrefix 'grid-row-body-hidden'
        
    rowBodyTrClsExt.baseCSSPrefix 'grid-rowbody-tr rowbodyexpander-row-body'
        
    rowBodyTdClsExt.baseCSSPrefix 'grid-cell-rowbody'
        
    rowBodyDivClsExt.baseCSSPrefix 'grid-rowbody'
     
        
    eventPrefix'rowbody'
        
    eventSelector'.' Ext.baseCSSPrefix 'grid-rowbody-tr'
         
        
    checkcolumnfalse
         
        
    readMoreText'Read more...'
        
    readLessText'Less...'
         
        
    getRowBodyCheck: function(values) { 
            return [ 
                
    '<tr class="' this.rowBodyTrCls ' {rowBodyCls}">'
                    
    '<td class="' this.rowBodyTdCls '" colspan="{rowBodyColspan}">'
                        
    '<div class="' this.rowBodyDivCls '"><div class="rowbodyexpander-row-container"><div class="rowbodyexpander-row-prebody"></div></div><div class="rowbodyexpander-row-body-text">{rowBody}</div><div class="rowbody-extend show">'+this.readMoreText+'</div><div class="rowbody-extend hide">'+this.readLessText+'</div></div>'
                    
    '</td>'
                
    '</tr>' 
            
    ].join(''); 
        }, 
         
        
    getRowBody: function(values) { 
            return [ 
                
    '<tr class="' this.rowBodyTrCls ' {rowBodyCls}">'
                    
    '<td class="' this.rowBodyTdCls '" colspan="{rowBodyColspan}">'
                        
    '<div class="' this.rowBodyDivCls '"><div class="rowbodyexpander-row-body-text">{rowBody}</div><div class="rowbody-extend show">'+this.readMoreText+'</div><div class="rowbody-extend hide">'+this.readLessText+'</div></div>'
                    
    '</td>'
                
    '</tr>' 
            
    ].join(''); 
        }, 
         
         
        
    reloadBody: function(cpt
        { 
            var 
    elems cpt.getEl().query('.rowbodyexpander-row-body-text'); 
            for(var 
    i=0,j=elems.length;i<j;i++) 
            { 
                var 
    elem Ext.get(elems[i]); 
                var 
    height elem.getHeight(); 
                 
                if(
    height 20
                { 
                    
    elem.addCls('collapsed'); 
                } 
                else 
                { 
                    
    elem.parent().addCls('noshow'); 
                }                         
            } 
        }, 
        
    init: function(config
        { 
            var 
    me    this
            
    this.callParent(arguments); 
     
            var    
    store me.grid.store
                
    cpt me.grid
     
            
    store.on('beforeload', function() 
            { 
                
    cpt.un('afterlayout'me.afterShow); 
            }); 
     
            
    store.on('load', function() 
            { 
                
    me.reloadBody(cpt); 
            }); 
             
            
    cpt.on('rowbodyclick', function(viewnestoe
            { 
                var 
    el e.getTarget(null10true); 
                if(
    el.hasCls('rowbody-extend')) 
                { 
                    if(
    el.prev('.rowbodyexpander-row-body-text').hasCls('collapsed')) 
                    { 
                        
    el.prev('.rowbodyexpander-row-body-text').removeCls('collapsed'); 
                        
    el.removeCls('show').addCls('hide'); 
                        
    el.next('.rowbody-extend').removeCls('hide').addCls('show'); 
                    } 
                    else 
                    { 
                        
    el.prev('.rowbodyexpander-row-body-text').addCls('collapsed'); 
                        
    el.removeCls('show').addCls('hide'); 
                        
    el.prev('.rowbody-extend').removeCls('hide').addCls('show'); 
                    } 
                } 
            }); 
             
            
    cpt.on('afterlayout'me.afterShowme); 

    cpt.on('boxready', function(cpt)
            {
                
    cpt.getEl().addCls('rowbodyexpander-table');
            });
        }, 
         
        
    afterShow: function(cpt
        { 
            var    
    me this
            
    cpt.getEl().addCls('rowbodyexpander-table'); 
            
    me.reloadBody(cpt); 
        }, 
         
        
    // injects getRowBody into the metaRowTpl. 
        
    getMetaRowTplFragments: function() { 
            return { 
                
    getRowBody: (this.checkcolumn) ? this.getRowBodyCheck this.getRowBody
                
    rowBodyTrClsthis.rowBodyTrCls
                
    rowBodyTdClsthis.rowBodyTdCls
                
    rowBodyDivClsthis.rowBodyDivCls
                
    readMoreTextthis.readMoreText
                
    readLessTextthis.readLessText 
            
    }; 
        }, 
     
        
    mutateMetaRowTpl: function(metaRowTpl) { 
            
    metaRowTpl.push('{[this.getRowBody(values)]}'); 
        }, 
     
        
    /** 
         * Provides additional data to the prepareData call within the grid view. 
         * The rowbody feature adds 3 additional variables into the grid view's template. 
         * These are rowBodyCls, rowBodyColspan, and rowBody. 
         * @param {Object} data The data for this particular record. 
         * @param {Number} idx The row index for this record. 
         * @param {Ext.data.Model} record The record instance 
         * @param {Object} orig The original result from the prepareData call to massage. 
         */ 
        
    getAdditionalData: function(dataidxrecordorig) { 
            var 
    headerCt this.view.headerCt
                
    colspan  headerCt.getColumnCount(); 
     
            return { 
                
    rowBody""
                
    rowBodyClsthis.rowBodyCls
                
    rowBodyColspancolspan 
            
    }; 
        } 
    }); 

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,341
    Vote Rating
    490
    scottmartin has a spectacular aura about scottmartin has a spectacular aura about scottmartin has a spectacular aura about

      0  

    Default

    Thank you for the contribution.

    Scott.

  3. #3
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    558
    Vote Rating
    27
    wemerson.januario has a spectacular aura about wemerson.januario has a spectacular aura about

      0  

    Default

    How about ExtJS 4.2.0 or 4.2.1. Could you provide an update please? Thanks for your work friend! good feature extension!
    Wemerson Januario
    Blog: http://wemersonjanuario.com.br
    Twitter: @januariocoder
    From: Goiânia, GO, Brazil
    Ext JS developer and consulting

  4. #4
    Sencha User
    Join Date
    Jan 2015
    Posts
    14
    Vote Rating
    0
    bindu misra is on a distinguished road

      0  

    Default

    How to use that in EXTJS 6,

    This is not working in extJS 6.0

  5. #5
    Sencha User
    Join Date
    Jan 2015
    Posts
    14
    Vote Rating
    0
    bindu misra is on a distinguished road

      0  

    Default

    What changes are required in EXTJS 6.0