Sencha grid에 이미지 보여주기

2024. 12. 27. 20:47Javascript/Sencha

Ext.create('Ext.grid.Panel', {
    title: 'Image Grid Example',
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,

    store: {
        fields: ['name', 'imageUrl'],
        data: [
            { name: 'Image 1', imageUrl: '/images/sample1.jpg' },
            { name: 'Image 2', imageUrl: '/images/sample2.jpg' },
            { name: 'Image 3', imageUrl: '/images/sample3.jpg' }
        ]
    },

    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { 
            text: 'Image', 
            dataIndex: 'imageUrl', 
            flex: 2,
            renderer: function(value) {
                return '<img src="' + value + '" width="50" height="50" />';
            }
        }
    ]
});