Results 1 to 2 of 2

Thread: How to view a thumbnail in a grid cell

  1. #1
    Sencha User
    Join Date
    Apr 2017

    Default How to view a thumbnail in a grid cell

    I'm trying to view image data together with a thumbnail in a grid (Extjs modern 6.6) but can't get it working.

    My approach has been to create a column renderer showing an Ext.Img object but instead of an image I only see the text [object,Object]
    Can anyone please tell me if I should do it differently (by not using a renderer) or what's missing to get the renderer working.

    My fiddle example:


    Adding my fiddle code:
    Ext.define('Fiddle.view.Main', {
        extend: 'Ext.Container',
        layout: 'vbox',
        scrollable: 'y',
        items: [{
            id: 'myGrid',
            xtype: 'grid',
            title: 'Test',
            minHeight: 1500,
            store: {
                storeId: 'myStore',
                fields: ['id', 'description'],
                data: [{
                    'id': '1',
                    'url': '',
                    'width': 2000,
                    'height': 3000
                }, {
                    'id': '2',
                    'url': '',
                    'width': 2000,
                    'height': 3000
            columns: [{
                text: 'Id',
                dataIndex: 'id'
            }, {
                text: 'Thumbnail',
                flex: 1,
                dataIndex: 'url',
                renderer: function (value, record) {
                    var img = Ext.create('Ext.Img', {
                        src: '{url}}',
                        height: 32,
                        width: 32
                    return img;
                text: 'Width',
                dataIndex: 'width'
                text: 'Height',
                dataIndex: 'height'
        name: 'Fiddle',
        mainView: 'Fiddle.view.Main'

  2. #2
    Sencha Premium User d.zucconi's Avatar
    Join Date
    Jun 2008
    Piacenza (Italy)


    The renderer function can only produce the content of cell as text. You cannot simply return a component or widget.
    To achieve this goal you can use Ext.grid.cell.Widget and rows ViewModel.
    I've modified your fiddle to give you a working example. Please note also the
    itemConfig: {viewModel: true}
    on grid config to enable rows ViewModel.

Similar Threads

  1. Replies: 3
    Last Post: 26 Feb 2013, 5:07 AM
  2. sortable thumbnail grid
    By Chromatik in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 14 Sep 2010, 9:03 AM
  3. List/Detail/Thumbnail view
    By d95sld95 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Dec 2008, 1:27 PM
  4. Thumbnail view feature
    By mihaip007 in forum Community Discussion
    Replies: 13
    Last Post: 29 Apr 2008, 1:10 PM
  5. Grid thumbnail view flowing left to right (custom view) ?
    By marvinhorst in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 20 Apr 2007, 7:00 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts