CODEWITHSUNDEEP
extjs5
Etfrerrr
Etfrerrr

Reputation: 115

Hiding all columns while grid is loading in ExtJS

I am working with ExtJS 5 and am trying to hide the columns of an internally defined grid that extends Ext.Component. I will first explain the motivation behind this.

The thing is, while the grid is loading, the columns show up but then disappear after the loading. This leads to some inconsistency in the UI after the loading is done and the grid is finally rendered (a kind of glitch where columns disappear).

NOTE that by columns, I mean empty columns' titles while the grid is loading (the columns are only filled after the loading). Also, by grid loading, I mean the phase in which the grid data is not rendered, and only a spinner is shown on the grid content space.

The logic to show or hide two of the columns is included in the beforerender of a listeners:

beforerender: async function() {
                        // some async call to determine a global boolean flag for whether the two columns will be hidden or not; by default the two columns are showing
                    },

And for some reason, the rendering of the columns themselves, which depends on the global boolean flag set by the async call within the beforerender, does not fulfill the expected behavior of waiting for the async call to FINISH to have the proper global boolean flag in order to show or not.

Hence the inconsistency: the columns would show up at first while loading (and that's because the rendering of the columns does not wait for the boolean flag obtained asynchronously) but then the columns would be hidden (which is the intended behavior after determining the boolean flag).

After some digging around, I figured that a potential solution would be to hide the grid column titles themselves during the loading, so that the inconsistency is invisible (the user cannot see two columns that initially appear then disappear if they simply do not see the initial columns in the first place while loading).

Any suggestions or clues as to how to hide the columns while the grid is loading? I've looked around and saw that loadMask might be a potential path, but am not too sure as to how to implement this.

Upvotes: 0

Views: 186

Answers (1)

alex.butnar
alex.butnar

Reputation: 284

I believe this can be done pretty easily with through binding.

If the store is defined in your viewmodel, you can bind the loading property of the store to the hidden property of the grid column.

Here a fiddle that shows how to hide one column. The framework version is 6.5 but it shouldn't be too different on 5.X. If{gridStore.loading} bind does not work you can set a custom flag on your VM before and after store load. And bind the hidden property to that.

https://fiddle.sencha.com/#view/editor&fiddle/3f2j

Upvotes: 1

Related Questions