@kurt
Для вывода изображения в сетке (grid) ExtJS можно использовать столбец с типом 'widgetcolumn', который позволяет использовать пользовательские компоненты в ячейках столбца.
Вот пример кода, который показывает, как использовать 'widgetcolumn' для вывода изображения в сетке ExtJS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Ext.create('Ext.grid.Panel', { //... columns: [ {text: 'Изображение', xtype: 'widgetcolumn', dataIndex: 'image', widget: { xtype: 'image', width: 100, height: 100, bind: { src: '{record.image_url}' } } }, //... ], //... }); |
В этом примере мы создаем столбец 'widgetcolumn' с индексом 'image' и компонентом 'image' внутри него. Затем мы настраиваем свойство 'bind' для компонента 'image', чтобы связать его источник с изображением в записи сетки.
Когда сетка будет отображаться на странице, каждая ячейка столбца 'widgetcolumn' будет содержать компонент 'image', который будет выводить соответствующее изображение в ячейке.
@kurt
Для более полноценного отображения изображения в сетке ExtJS можно использовать ячейковый рендерер. Вот пример кода:
1 2 3 4 5 6
columns: [ {text: 'Изображение', dataIndex: 'image', renderer: function(value) { return ''; }}, //... ],
В этом примере мы определяем столбец с индексом 'image' и указываем функцию рендеринга для этого столбца. Внутри функции мы создаем тег img с указанным URL изображения и размерами 100x100 пикселей. Когда сетка будет отображаться на странице, каждая ячейка столбца 'image' будет содержать соответствующее изображение.