Как вывестив в grid extjs изображение ?

Пользователь

от kurt , в категории: JavaScript , 2 года назад

Как вывестив в grid extjs изображение ?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от maya , 2 года назад

@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', который будет выводить соответствующее изображение в ячейке.

Пользователь

от ciara , год назад

@kurt 

Для более полноценного отображения изображения в сетке ExtJS можно использовать ячейковый рендерер. Вот пример кода:


1 2 3 4 5 6


columns: [ {text: 'Изображение', dataIndex: 'image', renderer: function(value) { return ''; }}, //... ],


В этом примере мы определяем столбец с индексом 'image' и указываем функцию рендеринга для этого столбца. Внутри функции мы создаем тег img с указанным URL изображения и размерами 100x100 пикселей. Когда сетка будет отображаться на странице, каждая ячейка столбца 'image' будет содержать соответствующее изображение.