PDA

View Full Version : RowExpand Height Issue



Vijayasaharan
23 Oct 2012, 2:26 PM
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
25 Oct 2012, 6:34 AM
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
25 Oct 2012, 8:36 AM
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 :-)