Results 1 to 2 of 2

Thread: How to view a thumbnail in a grid cell

  1. #1
    Sencha User
    Join Date
    Apr 2017
    Posts
    11
    Answers
    1

    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: https://fiddle.sencha.com/#view/editor&fiddle/2jcn

    Mikael

    Adding my fiddle code:
    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': 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
                    'width': 2000,
                    'height': 3000
                }, {
                    'id': '2',
                    'url': 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
                    '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'
            }]
        }]
    })
    
    Ext.application({
        name: 'Fiddle',
    
        mainView: 'Fiddle.view.Main'
    });

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

    Default

    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
    Code:
    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
  •