Questions related to our Sencha Touch based grid component

Post by LarssaAndin »

I have the need to run some code after the grid has been fully rendered (I'm changing width of each column based on the size of the largest cell in that column so I need the real offsetWidth from that cells content).

I was hoping that viewready would be the perfect place to do this. The problem I have is that it comes before all the cells are rendered. At least do I get calls to the column.renderer after the viewready event has fired.

Is this a problem in UberGrid or is it by design? If it is by design, would it be possible to add an event that fires after all cells have rendered? Right now I solve the problem by adding a delay but that won't work well on a slow device (and is wasteful on a quick device).

Post by nickolay »

"viewready" is the correct event for this purpose. Its fired only once after initial rendering (and after all content is rendered). Can you double check and confirm if its not the case?

Post by LarssaAndin »

Sorry, it seems you are correct. I think I was fooled by an error I made myself that behaved like the cell wasn't rendered and then I had multiple ubergrids in my app so it was not the current grid that I saw the debug print from (that happened after the view ready I care about).

Now I have a working "fixcolumnwidth" that runs after the cells I need (the ones the server have figured out will take most space) have been rendered. This makes the process of auto adapting column widths pretty fast.

Post by LarssaAndin »

I was right (and then wrong), there is a case when the cell render is called after viewready. It is when the content store is slow at loading. I'm not totally sure what triggers it, but if I use a store that is set to autoload and it isn't very quick to load I get a viewready before the cells are rendered. I guess that is why I thought it worked fine before, because then the load was faster. It could of course be some other case that triggers this behavior, but you should look into it.

For now I changed to manual load and I create the grid inside the callback function for the store load.

Post by mats »

Try using the 'refresh' event perhaps? It'll be fired after a panel refresh...

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause

Post by nickolay »

Right, grid renders itself as soon as it appears in the DOM. If store is not yet loaded then grid will render empty content. But the "viewready" event will be fired anyway, since grid will finish all its initializations. Seems for your case a new event should be added "viewhascontent" or something similar. I've created a feature request for it: ... ilar-event (but not promise this feature yet).

How exactly do you calculate the column widths? Are your calculations based on a single row or several rows?
I'm thinking about something like - grid renders one hidden row (visibility : false) and fires this event. Then user can do some math based on the content of the row and change the column widths. Then the full content is rendered.

Post by LarssaAndin »

I should use refresh as I will have to handle refreshes of the content later on, but it seems to have the same problem as viewready. Refresh doesn't seem to run again after the cell rendering is done, but it does fire when the grid is first created.

Post by nickolay »

LarssaAndin wrote:Refresh doesn't seem to run again after the cell rendering is done, but it does fire when the grid is first created.
How do you mean?

Post by LarssaAndin »

Sorry, here comes a more clear explanation with some pseudo code.

What I've noticed is that viewready and refresh is both called when the grid panel is rendered, not when the cells who get their data from the store is loaded. To make this very obvious I test with manual load of store and added a delay before it happens. This is a cleaned up version of what my code does. Sorry for being lazy and not using one of your examples for this :(.
var columns = [{
   renderer: function() {
       console.log("Rendering cell");
var gridItemsStore = new{
         autoLoad: false,
         fields: fields,
         proxy: {
              type: 'ajax',
              url: '/GetGridItems',

new UberGrid.Panel({
          id: 'gridpanel' + taskId.replace('/', '_'),
          title: 'Grid',
          buffered: false,
          stripeRows: false,
          flex: 1,
          columns: columns,
          listeners: {
                viewready: function (grid) {
                     console.log("View Ready Grid");
                refresh: function (grid) {
            store: gridItemsStore

var delayedLoad = new Ext.util.DelayedTask(function () {
               callback: function () {
                    console.log("Loaded grid content");

console.log("Delaying load");
Console will now look like this:
Delaying load
View Ready
.... 2 sec pause ...
'Rendering cell' * number of cells
Loaded grid content

No call to refresh happens after the cells are finished rendering.
It feels correct that viewready fires when the grid is created, it's visible on the screen so it's obviously ready, but I think refresh (or some other similar event) should be fired when the cells are updated (in this case, rendered for the first time).

In this case, the store is loaded very late so it's obvious that the order is wrong. I wonder if refresh is called correctly in the case that the store is already loaded when the grid is created. If the rendering of the cells are slow, will refresh fire before it is done so I risk not having all cells available when the code triggered by refresh is running?

I hope this makes the problem more clear!? :)

Post by nickolay »

Ah, I see now. 1st "refresh" is correct - since refresh with empty store is still refresh, but we are missing one more refresh event after cells with content will be rendered. Thanks for the report, will be fixed soon!

Post Reply