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

问题描述

在GridPanel中，我们都知道可以在列配置中指定renderer来自定义单元格.现在有这种特殊情况，我需要构建一个自定义的视觉进度条(画布)来绘制到单元格中，我的问题是如何获取单元格的el?

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?

在渲染器回调中，可用的值为 value、metadata、record、rowIndex、columnIndex、store 和 view.我试过 view.getNode 或 view.getCell 还是没有运气.

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.

提前谢谢你！

/莱昂内尔

编辑

经过进一步挖掘，我意识到我的节点实际上在调用渲染器时还没有准备好，即 view.getNode 和 view.getCell实际上正在工作，但延迟了(它一直返回 null)

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)

一种解决方法是使用 setTimeout 并在节点准备好后渲染元素.这绝对不是处理案件的最佳方式.无论如何欢迎任何建议:)

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 :)

/莱昂内尔

推荐答案

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

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.

这是我的渲染器

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.

干杯

/莱昂内尔

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