1. #1
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
    Vijayasaharan is on a distinguished road

      0  

    Default Unanswered: RowExpand Height Issue

    Unanswered: RowExpand Height Issue


    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
    Code:
    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
    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
        });
    }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
    Vijayasaharan is on a distinguished road

      0  

    Default


    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 ..
    Code:
     listeners: {
              
                viewready: function (grid) {
                    myEpisodeGrid.doLayout();  // My parent grid 
                }
             
                }
    Now i am a Happy man :-)

Thread Participants: 1

Tags for this Thread