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

Question

At GridPanel, we all know that we can specify a renderer in the column configuration in order to have a cell configured. Now there is a special case that I need to create a custom visual progress indicator (canvas) in a cell, my question is how to get el cells ?

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

Thank you in advance!

/ Lionel

EDIT

After some additional digging, I realized that my nodes are not really ready by the time the rendering is called, i.e. view.getNode and view.getCell actually work, but are delayed (it returns null all the time)

A workaround is to use setTimeout and display the elements after the nodes are ready. This is definitely not the best way to resolve this. Any suggestions are welcome anyway :)

/ Lionel

Answer 1

It turns out that the answer to this question is to use setTimeout to simulate some delays so that 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 there are no other answers, I will accept it as a valid answer over the next two days.

Greetings

/ Lionel

Answer 2

I have a slightly tidier solution, avoiding the need to call setTimeout .

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

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

An afterrender listener is added to the afterrender , which in turn adds a refresh listener to the gridview. I would like to use viewready or some other event, but this does not work in the ext version that I use, 4.0.2a.

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

In this refresh function, I then go through all the records and display the contents in the cell. Something like the following, which simply adds an ext container to the cell, should work as a base.

 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 }); } } };