Results 1 to 4 of 4

Thread: Display an image in grid column

  1. #1
    Sencha User coshmos's Avatar
    Join Date
    Apr 2012
    Posts
    19
    Answers
    2
    Vote Rating
    1
      0  

    Default Answered: Display an image in grid column

    Hi, everyone.

    I made a grid and need to display an image for every record in one of the column.
    A grid are made this way:
    Code:
            var grid = Ext.create('Ext.grid.Panel', {
                id: 'GridDataFromCreateForm',
                store: store,
                columns: [{
                    header: 'Name',
                    dataIndex: 'name',
                    flex: 3
                }, {
                    header: 'Category',
                    dataIndex: 'category',
                    flex: 5
                }, {
                    header: 'Shelf',
                    dataIndex: 'shelf',
                    flex: 2
                }, {
                    header: 'Amount',
                    dataIndex: 'amount',
                    flex: 2,
                    editor: {
                        xtype: 'numberfield',
                        allowBlank: false,
                        minValue: 0,
                        maxValue: 100000
                    }
                }, {
                    header: 'Photo',
                    dataIndex: 'photo',
                    flex: 2 {
                        xtype: 'actioncolumn',
                        flex: 0.5,
                        items: [{
                            icon: this.initialConfig.baseAppUrl + 'Themes/Default/Images/Dictionary_Action_Remove_16x16.png',
                            tooltip: 'Sell stock',
                            handler: function (grid, rowIndex, colIndex) {
                                var rec = store.getAt(rowIndex);
                                me._beginRemove(rec, store);
                            }
                        }]
                    }], selModel: {
                    selType: 'cellmodel'
                },
                title: 'Your fruits',
    
    
                tbar: [
                productSelect,
                {
                    xtype: 'button',
                    text: 'Add fruit',
                    handler: addSelectedFruit
                }],
                plugins: [cellEditing]
                });
             this.on('beforesubmit', function () {
                me.params = {};
    
    
                var i = 0;
                store.each(function (x) {
                    me.params['createdto.entries[' + i + '].product.id'] = x.get('productId');
                    me.params['createdto.entries[' + i + '].amount'] = x.get('amount');
                    i++;
                });
            });
             cellEditing.on('edit', function (x, y, z) {
                me.recount(store);
            });
    
    
            return grid;
            }
    And at the Photo header I need to place a photo, which addreess is represented in dataIndex: 'photo'. Could I make it dynamically? Or before I don't return the grid, I don't have anything in dataIndex: 'photo'?
    *I tried render, but nothing was happened.

  2. Try this:
    Code:
    ...
    },{
        header: 'Photo',
        dataIndex: 'photo',
        renderer: function(value){
            return '<img src="' + value + '" />';
        },
        ...
    },{
    ....

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    116
      0  

    Default

    Try this:
    Code:
    ...
    },{
        header: 'Photo',
        dataIndex: 'photo',
        renderer: function(value){
            return '<img src="' + value + '" />';
        },
        ...
    },{
    ....

  4. #3
    Sencha User coshmos's Avatar
    Join Date
    Apr 2012
    Posts
    19
    Answers
    2
    Vote Rating
    1
      0  

    Default

    Nothing happened and Chrome's JS console shows this error:
    Uncaught TypeError: Cannot read property 'dom' of undefined

    UPDATE: Done, I've got wrong url. Thanks.

  5. #4
    Sencha User
    Join Date
    Sep 2015
    Posts
    1
    Vote Rating
    0
      0  

    Default

    add renderer:

    return '<img src="' + value + '" width="150" height="150" borer="0" />';

  6. #5
    Sencha User
    Join Date
    Oct 2016
    Posts
    0
    Vote Rating
    0
      0  

    Default

    Hello,

    How to get all the modified records of grid in controller which are not submitted?

    I am submitting record at row level and also have to submit at Page Level 'Submit All'.

    var grid = Ext.define('MyApp.view.MyGrid' ,{
    extend : 'Ext.grid.Panel',


    requires: [
    'Ext.selection.CellModel',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.form.*',
    'Ext.util.*',
    'Ext.grid.column.Action'
    ],


    frame: true,


    plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1,
    listeners: {
    beforeedit: function(editor, event) {
    var val = event.record.get('status');
    if (val == 'Open') {
    return true;
    } else {
    return false;
    }
    }
    }
    })],

    selModel: {
    selType: 'cellmodel'
    },


    tbar: [{xtype: 'tbfill' }, {
    text: 'Accept',
    scope: this,
    itemId: 'Accept'
    },
    {
    text: 'Reject',
    scope: this,
    itemId: 'Reject'
    }],

    initComponent: function() {
    // paging bar on the Bottom
    bbar: Ext.create('Ext.PagingToolbar', {
    store: 'MyStore',
    inputItemWidth: 35
    }),




    Ext.apply(this, {

    store: 'MyStore',
    columns: [{
    header: 'Title',
    dataIndex: 'title',
    width: 50
    }, {
    header: 'Pages',
    dataIndex: 'pages',
    width: 130
    },{
    header: 'Topic',
    dataIndex: 'topic',
    width: 70,
    align: 'right'
    }, {
    header: 'Status',
    dataIndex: 'status',
    width: 70,
    align: 'right'
    },{
    header: 'Price',
    dataIndex: 'price',
    width: 70,
    align: 'right',
    //renderer : change,
    editor: {
    xtype: 'numberfield',
    allowBlank: false,
    minValue: 0,
    maxValue: 100000
    }
    }, {
    header: 'Available',
    dataIndex: 'availDate',
    xtype: 'datecolumn',
    width: 130,
    format: 'M d, Y',
    editor: {
    xtype: 'datefield',
    allowBlank: false,
    format: 'm/d/y',
    minValue: '01/01/06',
    disabledDays: [0, 6],
    disabledDaysText: 'Plants are not available on the weekends'
    }
    }, {
    xtype: 'actioncolumn',
    text: 'C R',
    width: 50,
    items: [{
    icon: 'images/drop-yes.gif',
    tooltip: 'Confirm',
    scope: this,
    getClass : function(value, meta, record, rowIx, ColIx, store) {
    // Determines at runtime whether to render the icon/link
    if (record.get('status') == 'Pending Me' || record.get('status') == 'Open') {
    return 'x-grid-center-icon'; //Show the action icon
    } else {
    return 'x-hidden-display'; //Hide the action icon
    }
    }
    }, {
    icon: 'images/drop-no.gif',
    tooltip: 'Reject',
    scope: this,
    getClass : function(value, meta, record, rowIx, ColIx, store) {
    // Determines at runtime whether to render the icon/link
    if (record.get('status') == 'Pending Me') {
    return 'x-grid-center-icon'; //Show the action icon
    } else {
    return 'x-hidden-display'; //Hide the action icon
    }
    }
    }]
    }]
    });


    this.callParent();
    }
    });

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
  •