невозможно отобразить значок на основе данных динамической строки

#javascript #sencha-touch #sencha-touch-2

#javascript #сенча-касание #сенча-касание-2

Вопрос:

Я пытаюсь показать значок в сенсорной сетке sencha на основе динамических данных строки

вот мой код внутри столбца. но всякий раз, когда я запускаю приложение, я вижу <img> тег в столбце вместо фактического изображения.

 renderer:function(value, metaData, record){
    //console.log(value);

    if(value == "0"){

        return "";
    }else if(value == "2"){


          return  '<img src="resources/icons/status_paused.png"/>';


    }else if(value == "3"){

        return "<img src='resources/icons/status_paused.png'/>";

    }else if(value == "4"){

        return "<img src='resources/icons/status_completed.png'/>";
    }
}

вот скриншот столбца

введите описание изображения здесь

до сих пор я пробовал следующие вещи, но ничего не получалось

 metaData.tdCls = "status-update" // where status-update is a class 

metaData.css = "status-update"

1. Не могли бы вы проверить, что на самом деле возвращается средством визуализации с помощью console.log() или путем проверки ячейки с помощью инструментов разработчика?

2. я проверил его с помощью инструмента разработчика, который показывает <img src="resources/icons/status_paused.png"/> только его, но черным шрифтом, как будто это просто основное текстовое значение, а не html-тег

3. Затем вам нужно проверить, что это оборачивает, <img src="resources/icons/status_paused.png"/> возможно, это внутри другого свойства, или, может быть, у вас был какой-то плохо отформатированный html раньше?

4. он находится только внутри строки div, и в нем нет плохого HTML-формата, вот содержимое <div class="x-grid-cell x-grid-cell-align-left" id="ext-element-257" style="width: 110px;"><img src="/resources/icons/status_paused.png"></div>

5. что я заметил, так это то, что если я скопирую строку из инструмента разработчика в текстовый редактор, она заменит терку, а затем подпишет, а затем подпишет amp;< и amp;>

Ответ №1:

Как вы можете видеть из Ext.grid.column.Источники столбцов, значение, возвращаемое средством визуализации, помещается в nodeValue элемент:

 updateCell: function(cell, record, content) {
    if (cell amp;amp; (record || content)) {
        cell.firstChild.nodeValue = content || this.getCellContent(record);
    }
}

Следовательно, он обрабатывается как текст. Это происходит потому, что вы используете столбец неправильного типа в определении столбца для вашей сетки. Ext.grid.column.Template Вместо этого используйте an , который применяет ваши значения к an XTemplate и помещает его в innerHtml ячейку, и он должен работать.

1. куда я должен поместить этот код и нужно ли мне все еще сохранять rendere функцию?

2. Вы должны изменить updateCell() Ext.grid.column.Column компонент, заменив nodeValue на innerHtml , вы можете сделать это, непосредственно изменив исходный код Sencha Touch core, или вы можете расширить Ext.grid.Grid , чтобы использовать расширенную версию Ext.grid.column.Column . Да, нехорошо переопределять два файла для такого небольшого изменения 🙂

3. Я посмотрел дальше в Ext.grid. Мы с Grid-кодом выяснили, что решение уже доступно в Sencha, без необходимости переопределения.