RowExpand Height Issue

[Vijayasaharan]

Hi I have seen many posts with row expand but could find a solution for this.
I have a grid with rowexpand and i dynamically add rows, the issue is when i expand one row the rows at the bottom gets hidden , is there a way to increase the height of the grid, and reset the position of the pagination bar.

I also get an horiaontal scroll bar for my expanded rows.

Here is the code
Main grid

myEpisodeGrid = Ext.create('Ext.grid.Panel', {
        //cls: 'assetGrid',
        store: dataEpisodeStore,
        layout: {
            type: 'vbox',
            align: 'left'
        },
        disableSelection: true,
        columns: [
        //{ xtype: 'rownumberer', flex: 0.0 },
                        {header: "ID", dataIndex: "ID", sortable: false, hidden: true },
                        { header: "TITLE", flex: 5.2, dataIndex: "Name", tdCls: "episodeColumn", sortable: true },
                        { header: "TYPES", flex: 1, text: "", sortable: false },
                        { header: "DURATION", flex: 1, text: "", sortable: false },
                        { header: "POSTED", flex: 2, text: "", sortable: false },
                        { header: "Asset Name", text: "", sortable: false, hidden: true },
                        { header: "AssetID", text: "", sortable: false, hidden: true },
                        { header: "MustHaveIndividualWM", text: "", sortable: false, hidden: true },
                        { header: "MustHaveOverlay", text: "", sortable: false, hidden: true },
                        { header: "IsGateKeeper", text: "", sortable: false, hidden: true },
                        { header: "ShowName", dataIndex: "ShowName", sortable: false, hidden: true },
                        { header: "ShowID", dataIndex: "ShowID", sortable: false, hidden: true },
                        { header: "", flex: 0.4, text: "", sortable: false }
                        ],
        plugins: [{
            ptype: 'rowexpander',
            pluginId: 'episodeplugin',
            rowBodyTpl: ['<div id=EpisodeGrid{ID}> </div>'],
            toggleRow: function (rowIdx) { toggleRowAssetGrid(rowIdx, projID); }
        }],
        listeners: {
            itemclick: function (dataview, metaData, index, item, e, record, rowIndex) {
                DisplayBreadCrumps(null, metaData.data.Name, null);
                myEpisodeGrid.getView().addRowCls(index, 'episodeSelected');
                toggleRowAssetGrid(index, projID);
            }
        },
        collapsible: false,
        animCollapse: false,
        stripeRows: true,
        // paging bar on the bottom
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: dataEpisodeStore,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: 'EpisodeGrid'
    });
}

My Subgrid Code

function toggleRowAssetGrid(rowIdx, projID) {
    
    var plugin = myEpisodeGrid.getPlugin('episodeplugin');
    var rowNode = plugin.getCmp().view.getNode(rowIdx),
        row = Ext.get(rowNode),
        nextBd = Ext.get(row).down(plugin.rowBodyTrSelector),
        record = plugin.view.getRecord(rowNode),
        grid = plugin.getCmp();

    if (row.hasCls(plugin.rowCollapsedCls)) {
        renderAssetGrid(projID, record.data.ID);

        if (row.hasCls(plugin.rowCollapsedCls)) {
            row.removeCls(plugin.rowCollapsedCls);
            nextBd.removeCls(plugin.rowBodyHiddenCls);
            plugin.recordsExpanded[record.internalId] = true;
            plugin.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
        } else {
            row.addCls(plugin.rowCollapsedCls);
            nextBd.addCls(plugin.rowBodyHiddenCls);
            plugin.recordsExpanded[record.internalId] = false;
            plugin.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
        }
    }
}


function renderAssetGrid(showID, episodeID) {
    
   
    //LOAD GRID
    var myAssetGrid = Ext.create('Ext.grid.Panel', {
        cls: 'innerGrid',
        width: 938,
        store: dataAssetStore,
        disableSelection: true,
        minHeight: 10,
        columns: [
                    { header: "AssetID", dataIndex: "AssetID", sortable: false, hidden: true },
                    { header: "BlankSpace", flex: 0.5, tdCls: 'defaultColumn', dataIndex: "", sortable: false, hidden: false },
                    { header: "DisplayName", flex: 5.5, tdCls: 'assetColumn', dataIndex: "DisplayName", sortable: false },
                    { header: "AssetName", dataIndex: "AssetName", sortable: false, hidden: true },
                    { header: "ContentType", flex: 1, tdCls: 'defaultColumn', dataIndex: "ContentType", sortable: false, hidden: false },
                    { header: "Duration", tdCls: 'defaultColumn', dataIndex: "DateCreated", sortable: true, flex: 1, xtype: 'datecolumn', format: 'Y:m:d' },
                    { header: "Posted", tdCls: 'defaultColumn', dataIndex: "DateCreated", sortable: true, flex: 2, xtype: 'datecolumn', format: 'Y:m:d' },
                    { header: "MustHaveIndividualWM", dataIndex: "MustHaveIndividualWM", sortable: false, hidden: true },
                    { header: "MustHaveOverlay", dataIndex: "MustHaveOverlay", sortable: false, hidden: true },
                    { header: "IsGateKeeper", dataIndex: "IsGateKeeper", sortable: false, hidden: true },
                    //{ header: "PlayPopup", width: 100, dataIndex: "PlayPopup", sortable: false},
                    //{ header: "Share", width: 100, dataIndex: "ShareMedia", sortable: false },
                    {
                    header: "AssetViewedState", flex: 0.5, tdCls: 'defaultColumn',
                    dataIndex: 'MustHaveIndividualWM',
                    renderer: GetAssetViewedTypeImage
                }
                    ],
        collapsible: false,
        animCollapse: false,
        hideHeaders: true,
        stripeRows: true,
        listeners: {
            itemclick: function (dataview, index, item, e, record, rowIndex) {
                //alert(rowIndex);
            },
            cellclick: function (dataview, element, columnIndex, record) {
                if (columnIndex == 2) {
                    buildVideoPopup(record.data.AssetID, record.data.AssetName, record.data.ContentType, record.data.MustHaveIndividualWM);
                }
            }
            //itemmouseenter: function ( record, item, index, e, eOpts ) {
            //var rowNode = record.getNode(rowIdx),
            //row = Ext.get(rowNode),
            //nextBd = Ext.get(row).down(plugin.rowBodyTrSelector),
            //record = plugin.view.getRecord(rowNode),
            //}
        },
        renderTo: 'EpisodeGrid' + episodeID
    });
}

[mitchellsimoens]

I see you are using layout on the grid, you shouldn't do that.

By default as long as the grid does not have a height or within a layout that manages it's height it should change the grid height. Just checke the grid-plugins example and removed the height config on the first grid and expanded rows there and the grid height changed.

[Vijayasaharan]

Hey mitchellsimoens
Thanks for your input actually i wasnt having any layout and then changed to layout: 'auto' and then to the one above but none had any effect. The problem the parent grid isnt increasing its height after rows in child grid are added.

Finally i did this and it solved the issue by using doLayout but the trick is to call after the viewready, else it wasnt working ..

 listeners: {
          
            viewready: function (grid) {
                myEpisodeGrid.doLayout();  // My parent grid 
            }
         
            }

Now i am a Happy man :-)