Отображать изображение в сетке с помощью extjs

Я новичок в extjs. Я хочу отображать изображения значков для каждого элемента сетки. не могли бы вы мне помочь?

Я получаю путь изображения из XML файла.

Мой код ниже. здесь я показываю путь изображения.

Мне нужно заменить его, показывая изображение.

Ext.onReady(function(){

      var store = new Ext.data.Store({
        url: 'new_frm.xml',

               reader: new Ext.data.XmlReader({
               record: 'message',
               fields: [{name: 'first'},{name: 'last'},{name: 'company'},{name: 'email'},{name: 'gender'},{name: 'form-file'},{name: 'state'},{name: 'Live'},{name: 'content'}]
           })
    });

      var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "First Name", width: 120, dataIndex: 'first', sortable: true},
            {header: "Last Name", width: 180, dataIndex: 'last', sortable: true},
            {header: "Company", width: 115, dataIndex: 'company', sortable: true},          
            {header: "Email", width: 100, dataIndex: 'email', sortable: true},
            {header: "Gender", width: 100, dataIndex: 'gender', sortable: true},
            {header: "Photo", width: 100, dataIndex: 'form-file', sortable: true},
            {header: "State", width: 100, dataIndex: 'state', sortable: true},
            {header: "Living with", width: 100, dataIndex: 'Live', sortable: true},
            {header: "Commands", width: 100, dataIndex: 'content', sortable: true}

        ],
        renderTo:'example-grid',
        height:200
    });

    store.load();
});

Ответы

Ответ 1

Вам нужно добавить рендерер в свои столбцы, чтобы вы отображали изображение. Значение рендеринга - это функция вызова для рендеринга тега изображения.

Изменен один из ваших элементов столбца:

{header: "Photo", width: 100, renderer:renderIcon, dataIndex: 'form-file', sortable: true},

Пример функции рендеринга:

function renderIcon(val) {
    return '<img src="' + val + '">';
}

В этом примере значение dataIndex должно быть полным путем для изображения. Если нет, то вы должны добавить дополнительную логику.

Ответ 2

Еще одна альтернатива, которая может быть применена к вашему конкретному вопросу, - это настроить изображения в файле CSS, например:

.icon-red {
    background-image:  url('red.png');
    background-repeat: no-repeat;
}

.icon-green {
    background-image:  url('green.png');
    background-repeat: no-repeat;
}

Затем создайте рендер для добавления в метаданные ячейки, как она отображается:

renderIcon: function(value, metadata, record, rowIndex, colIndex, store) {

    // set the icon for the cells metadata tags
    if (value > 0) {
        metadata.css = metadata.css + ' icon-green ';
    } else {
        metadata.css = metadata.css + ' icon-red ';
    }

    // add an individual qtip/tooltip over the icon with the real value
    metadata.attr = 'ext:qtip="' + (value) + '"';

    return '&nbsp;';
}

Ответ 3

пытается использовать атрибут "render" в объявлении столбца, в котором вы хотите показать изображение. Используя атрибут Render, вы можете вывести HTML по вашему выбору. Проверьте это на форумах ExtJs:) Надеюсь, что вы указываете в правильном направлении

Ответ 4

Это лучший режим, примените столбец виджетов и тип изображения виджетов:

columns:[
      {text:'Image', xtype:'widgetcolumn', widget:{xtype:'image', src: 'http://www.sencha.com/img/20110215-feat-html5.png'}, dataIndex:'image'}]

на extjs 6

Ответ 5

вы можете написать xml файл как htmlspecialchars (""), то вы можете просмотреть его просто.

Ответ 6

для отображения значка для вашего столбца имени введите следующие изменения

{header: "First Name", width: 120, renderer:first, dataIndex: 'first', sortable: true},

сделать функцию как

function first(val)
{
return '<img src="' + val + '">';
}

Ответ 7

Простой

В своем Json передайте строку с < img src = " " />

после dataIndex:

fields:[

{name: 'images', type: 'string'}

]

{

text: 'images',

dataIndex: 'images'

}