ExtJS 4 GridView - How to get cell's td or div?

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

Answer 2

I have a slightly neater solution, avoiding the need for a setTimeout call.

Basically my renderer adds a class to the cell that I want custom content in, then I use a combination of listeners to render custom content to that cell after the grid is present on the page.

renderer: function (value, metaData, record) {
  metaData.tdCls = metaData.tdCls + ' customContentCell';
  return '';
}

On the grid I add an afterrender listener that in turn adds a refresh listener to the gridview. I would have liked to use viewready or some other event but that doesn't appear to work in the version of ext I am using, 4.0.2a.

listeners: {
    afterrender: function (grid) {
        var view = this.getView();
        if (view)
          view.on('refresh', gridRenderCustomContent, this);
    }
}

In that refresh function I then loop through all the records and render the content out into the cell. Something like the following, which simply adds a ext container to the cell, should work as a basis.

var gridRenderCustomContent = function () {

    var recordIdx, colEl, chart, record, ganttHolder;

    for (recordIdx = 0; recordIdx < grid.store.getCount(); recordIdx++) {
        record = grid.store.getAt(recordIdx);
        holder = Ext.DomQuery.select('.customContentCell', grid.view.getNode(recordIdx));
        if (holder.length) {
            colEl = holder[0];
            colEl.innerHTML = '';
            var customContentContainer = new Ext.create('Ext.container.Container', {
                style: 'height: 30px',
                items:[ ... ],
                renderTo: holder
            });
        }
    }
};