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

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

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

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

/ Лайонел

ИЗМЕНИТЬ

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

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

/ Лайонел


view grid cell extjs4
person Lionel Chan    schedule 11.07.2011    source источник
comment
Я считаю, что есть способ справиться с этим случаем. Но на всякий случай, если это не правильный путь, любые предложения также приветствуются.   -  person Lionel Chan    schedule 11.07.2011
comment
попробуйте использовать запрос dom по классу css   -  person atian25    schedule 12.07.2011
comment
Нет более чистого способа? Я думал, что они выставят эл где-то в view   -  person Lionel Chan    schedule 12.07.2011
comment
Я думаю, что это невозможно сделать в рендерере. вы можете использовать этот плагин, sencha.com /форум/   -  person atian25    schedule 12.07.2011
comment
Я сделал свой индикатор выполнения (холст) в ячейке. view.getNode работает, добавляя задержки. Я опубликую свой ответ вместе с индикатором выполнения позже, когда я очистил код. / Лайонел   -  person Lionel Chan    schedule 12.07.2011

Ответы (2)


arrow_upward
8
arrow_downward

Оказывается, ответом на этот вопрос является использование 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);
};

Некрасиво, но работает. Если нет других ответов, я приму его как действительный ответ в ближайшие два дня.

Ваше здоровье

/ Лайонел

person Lionel Chan    schedule 19.07.2011

arrow_upward
1
arrow_downward

У меня есть более аккуратное решение, позволяющее избежать вызова setTimeout.

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

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

В сетке я добавляю прослушиватель afterrender, который, в свою очередь, добавляет прослушиватель refresh в gridview. Я хотел бы использовать 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
            });
        }
    }
};
person Coin_op    schedule 26.02.2013