ExtJS 4 GridView - 如何获取单元格的TD或DIV？ [英] ExtJS 4 GridView - How to get cell's td or div?

问题描述

在GridPanel中，我们都知道我们可以在列配置中指定 renderer 来定制单元格。现在有一个特殊情况，我需要建立一个自定义的可视化进度条（画布）来绘制到单元格中，我的问题是如何获取 el / b
$ b

在渲染器回调中，可用值为值，元数据，记录， rowIndex ， columnIndex ， store 和 view 。我试过 view.getNode 或 view.getCell ，但仍然没有运气。

预先感谢您！

/ Lionel

编辑

经过一些进一步的挖掘，我意识到我的节点实际上并没有准备好渲染器被调用的时间，也就是视图。 getNode 和 view.getCell 实际上是有效的，但是延迟了（它一直返回null）

解决方法是使用 setTimeout 并在节点准备就绪后呈现元素。这绝对不是处理案件的最佳方式。欢迎任何建议：）

/ Lionel

解决方案

Turn这个问题的答案是使用 setTimeout 来模拟一些延迟，这样节点可以在延迟后正确添加。

这是我的渲染器

  renderer = function（v ，元，rec，r，c，store，view）{
 
 setTimeout（function（）{
 var row = view.getNode（rec）; 
 
 //捕捉el（我需要div来完成这个技巧）
 var el = Ext.fly（Ext.fly（row）.query（'。x-grid-cell'）[c]）。down （'div'）; 
 
 //建立进度条的所有其他代码
}，50）; 
}; 
  

丑陋，但有效。如果没有其他答案，我会在接下来的两天内接受它作为一个有效答案。

干杯

/ Lionel

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

解决方案

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

这篇关于ExtJS 4 GridView - 如何获取单元格的TD或DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！