PDA

View Full Version : Make row expanded element ie extjs grid and chart resizable on window resize



WPriyanka
25 Jul 2017, 2:32 AM
have used rowExpander plugin in extjs grid on expand of each row 1 property grid with details of row selected and chart is rendered in the div of rowBodyTpl. I want to resize both the elements on window(browser) resize. ` My parent grid is like this with rowexpander
var grid = Ext.create('Ext.app.CustomizedGridPanelv2', {
width: '100%',
overflowY: 'auto',
flex: 1,
store: this.gridStore,
plugins: [{
pluginId: 'expander',
ptype: 'rowexpander',
expandOnDblClick: false,
expandOnEnter: false,
rowBodyTpl: '<div id="{someId}' + this.id + '"></div>'
}],
viewConfig: {
stripeRows: true,
deferEmptyText: false,
emptyText: " No detailsfound."
},
columns: [{ columns needed}] });On expand i create a panel and render to the div
grid.getView().addListener('expandbody', function(_rowNode, _rec, _expandedHTML) {

var panel = Ext.create('myPanel', {
srcPanel: me,
srcRecord: _rec,
srcDiv: _rec.get('someId') + me.id
});

panel.render(_rec.get('someId') + me.id);


grid.doLayout();
});My panel will contain property grid and chart which are the items of extjs panel ` my parent grid get resized on window resize but the expanded elements get truncated. Is there any way to resize them with browser. Thanks.

Gary Schlosberg
25 Jul 2017, 6:24 AM
Are the expanded elements collapsing or just not getting displayed in entirety? If the latter, is it cutting vertically or horizontally?

WPriyanka
7 Aug 2017, 11:30 PM
Are the expanded elements collapsing or just not getting displayed in entirety? If the latter, is it cutting vertically or horizontally?
They are cutting from both side horizontally and vertically.