ExtJS grid not render correctly

Question

I have a grid that when I load the page sometimes it doesn't render correctly. It's annoying and i'm trying a solution to force it to render correctly.
Everything it's fine with the data on it, but sometimes it doesn't render correctly.
This is just when I load the grid for the first time, because after that it renders correctly. Here is the grid with the render correct: and here is the render error that it gives me sometimes when I first load the grid. I have tried all this fixes but none work:

grid.getView().refresh();
---
grid.columns[2].setVisible(false);
grid.columns[2].setVisible(true);
---
grid.getStore().filterBy(function() { return true; });

After I click on the left grid, it applies a filter to the right grid and if the render was not ok, it becomes correct. So I believe it's a render problem. I'm asking this question as a last resort. Does anyone have any suggestions?
I'm using ExtJS 4.

@serg I never cacthed a console error. It's difficult because the error appears only a few times on the first load and I don't usually have the Firebug opened at that time. When I know for sure I will answer that question — alexandre1985
@aviram83 I can't reproduce it with a fiddle because I believe the error its because I set the field that its not rendering on the database to be 'Index' and I believe since then it start occuring this error. It may be something else that I have done too. And in the fiddle I can't make the app load records from a database (at least the way that I know how to) — alexandre1985

Michael Michael · Accepted Answer · 2016-04-19T15:19:47

Try to add an afterrender on your component. This will force the container layout to be recalculated.

Something like

grid.on("afterrender", function() {
            this.doLayout();
 });

Or with a listeners:

listeners: {
             afterrender: function(e) {
                this.doLayout();       
             }

ExtJS grid not render correctly

1 Answers