17 May 2012 6:34 AM #1
Grid doesn't render at all when inside a hidden div
I have a Grid that is rendered inside a div that is initially hidden. When the hidden div is set visible, the Grid does not render. Is there a property to set on the Grid that will allow it to render once it's in a visible container?
Note: The hidden div is not controlled by ExtJS code. It is just plain html.
25 May 2012 12:33 PM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
Did you inspect the DOM, did it render and just have a height of zero?Mitchell Simoens @LikelyMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
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 email@example.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.
24 Nov 2012 3:08 AM #3
I know this is an old thread but I am new to ExtJs and I am seeing this same behavior. I inspected it but am not sure which element you are referring to. There are so many extra "div's"
27 Nov 2012 5:43 AM #4
Wish I could help, but we never got a chance to resolve this. We were evaluating ExtJS but couldn't work out licensing issues.
27 Nov 2012 3:51 PM #5
The problem lies in the fact that my application is a combination of MVC, jQuery and ExtJs. I resolved my issue by changing out some of the jQuery code for ExtJs code and the data now displays in the grid.
2 Apr 2015 9:39 AM #6
I had the same problem when rendering a grid panel in an inactive tab. The DOM is rendered, but some div have width and height being 0. Is there any way to solve this problem?
26 Aug 2015 6:23 AM #7
This is a little late, but have you tried grid.getView().refresh()?
I execute this in a handler for the "tabchange" event of the tab panel and it seems to cause the grid to render.