ExtJS 4 GridView - Как получить td или div ячейки? - PullRequest
Новая
       56

ExtJS 4 GridView - Как получить td или div ячейки?

6 голосов
/ 11 июля 2011

В GridPanel мы все знаем, что мы можем указать renderer в конфигурации столбца, чтобы иметь настраиваемую ячейку. Теперь есть этот особый случай, который мне нужен, чтобы построить настраиваемый визуальный индикатор выполнения (холст) для рисования в ячейке, мой вопрос как получить el ячейки ?

В функции обратного вызова рендерера доступны следующие значения: value, metadata, record, rowIndex, columnIndex, store и view. Я пытался view.getNode или view.getCell, но безуспешно.

Заранее спасибо!

/ Lionel

EDIT

После некоторых дальнейших раскопок я понял, что мои узлы фактически не готовы к тому времени, когда вызывается рендерер, то есть view.getNode и view.getCell фактически работают, но с задержкой (он возвращает ноль все время )

Обходной путь должен использовать setTimeout и визуализировать элементы после того, как узлы будут готовы. Это определенно не лучший способ разобраться в этом деле. Любые предложения приветствуются в любом случае:)

/ Lionel

Ответы [ 2 ]

8 голосов
/ 19 июля 2011

Оказывается, что ответом на этот вопрос является использование setTimeout для имитации некоторых задержек, чтобы можно было правильно добавить узлы после некоторой задержки.

Это мое 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);
};

Ужасно, но это работает.Если других ответов нет, я приму их как действительный ответ в течение следующих двух дней.

Приветствия

/ Лайонел

1 голос
/ 26 февраля 2013

У меня есть немного более аккуратное решение, избегая необходимости вызова setTimeout.

По сути, мой renderer добавляет class к ячейке, в которую я хочу пользовательский контент, затем я используюкомбинация listeners для отображения пользовательского содержимого в эту ячейку после того, как сетка присутствует на странице. 

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

В сетке я добавляю слушателя afterrender, который, в свою очередь, добавляет слушателя refresh квид сетки.Мне бы хотелось использовать viewready или другое событие, но оно не работает в используемой версии ext, 4.0.2a. 

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

В этой функции refresh, которую я затем зацикливаючерез все записи и вывести содержимое в ячейку.Нечто подобное следующему, которое просто добавляет контейнер ext в ячейку, должно работать как основание. 

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