1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    19
    Vote Rating
    2
    gr0uch0 is on a distinguished road

      1  

    Default Adding components to grid rowBody feature or rowExpander

    Adding components to grid rowBody feature or rowExpander


    Is it possible to add panels etc to a grid's rowBody feature or rowExpander plugin? If so, how do I do it?
    Ideally, I'd like the row expander to open up a sub-panel in the grid that shows a mini-tab panel with edit facilities.

    All help more than welcome

    I'm trying the following.

    Code:
    Ext.define('ARC.view.communicate.ContactList', {
        alias: 'widget.contactlist'
        ,extend: 'Ext.grid.Panel'
        ,requires: [
            'Ext.ux.RowExpander'
        ]
        ,plain: true
        ,loadMask: true
        ,verticalScroller: {xtype: 'paginggridscroller', activePrefetch: false}    
        ,viewConfig: {
            trackOver: false
            ,singleSelect: true
        }
    /*    ,plugins: [{
             ptype: 'rowexpander'
    
            ,rowBodyTpl : [
                '<div id="ANDY"> </div>'
            ]
    
        }]
    */    
        ,features: [{ 
            ftype: 'rowbody'
            , getAdditionalData: function(data, idx, record, orig) { 
                return { rowBody:Ext.panel.Panel({title: 'TITLE', height: 200, width: 200})};
            }
        }, {     
          ftype: 'rowwrap'
           }]
        ......
    I have also tried rendering a panel to the 'ANDY' div, created in the rowexpander template (commented out above), when the expandbody is fired

    Code:
    ,onExpandBody: function(rowNode, record, expandRow) {
            console.log('rowNode',rowNode);
            console.log('record',record);
            console.log('expandRow',expandRow);
            var rowBody = Ext.get('ANDY');
    
            Ext.create({
                xtype: 'panel'
                ,title: 'title'
                ,height: 200
                ,width: 200
                ,renderTo: rowBody
            });
    }

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    19
    Vote Rating
    2
    gr0uch0 is on a distinguished road

      1  

    Default


    And the answer is:

    Code:
    Ext.grid.Panel
    .........
    ,plugins: [{
             ptype: 'rowexpander'
            ,rowBodyTpl : [
                '<div id="contact-row-{contactid}"> </div>'
            ]
    
        }]
    .........
    Code:
    controller
     ,init: function() {
            this.control({
                'contactlist gridview'        :        {expandbody:        this.onExpandBody}
            })
        }
    
    ,onExpandBody: function(rowNode, record, expandRow) {        
            var row = 'contact-row-' + record.get('contactid');
            var andyPanel = Ext.create(Ext.panel.Panel,{
                ,title: 'title'
                ,height: 200
                ,width: 200
            });
    
            andyPanel.render(row);
    }

  3. #3
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    478
    Vote Rating
    5
    mysticav is on a distinguished road

      0  

    Default


    Hi,

    This approach works but is not the best solution using ExtJS MVC.

    Let me explain why:

    When you render the component to a DOM element, the component cannot hierarchically be reached by Ext.ComponentQuery, because it is not a child of any component.

    This means that you cannot find the component using ComponentQuery like this:
    Code:
    Ext.ComponentQuery.query('#mygrid #myAddedComponent');
    You can only find it directly:
    Code:
    Ext.ComponentQuery.query('#myAddedComponent');
    So far I haven't found a solution for this problem.

    Maybe the solution would be to convert the
    Code:
    <div id="contact-row-{contactid}"> </div>
    into a component and register it to the Ext.Component Manager.

    I hope someone can help me with this problematic.

    Thanks.
    Using Ext with cachefly
    Working on LAMPExt

  4. #4
    Sencha User
    Join Date
    Aug 2013
    Posts
    22
    Vote Rating
    0
    asahoo is on a distinguished road

      0  

    Default


    I saw the row expander example, it is able to create a row below the main row. But what if we need to divide the Sub row into same column structure as the main row ?

Thread Participants: 2