Question

In GridPanel, we all know that we can specify renderer in a column configuration to have customized cell. Now there is this special case which I need to build a customized visual progress bar (canvas) to be drawn into a cell, my question is how to get the el of the cell?

In the renderer callback, available values are value, metadata, record, rowIndex, columnIndex, store, and view. I have tried view.getNode or view.getCell with no luck still.

Thanks you in advance!

/Lionel

EDIT

After some further diggings, I realized my nodes are in fact not ready by the time the renderer is called, that is, the view.getNode and view.getCell is in fact working, but delayed (it returns null all the time)

A workaround is to use setTimeout and renders the elements after the nodes is ready. This is definitely not the best way dealing the case. Any suggestions are welcome anyway 🙂

/Lionel

Answer 1

Turns out that the answer to this question is to use setTimeout to simulate some delays so the nodes can be added correctly after some delay.

This is my renderer

renderer = function (v, meta, rec, r, c, store, view) {

    setTimeout(function() {
        var row = view.getNode(rec);

        //Capturing the el (I need the div to do the trick)
        var el = Ext.fly(Ext.fly(row).query('.x-grid-cell')[c]).down('div');

        //All other codes to build the progress bar
    }, 50);
};

Ugly, but it works. If no other answers, I will accept it as a valid answer in the next two days.

Cheers

/Lionel