1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    UK
    Posts
    13
    Vote Rating
    1
    adambuckley is on a distinguished road

      0  

    Default Unanswered: Rich Grid Panel Cell Content

    Unanswered: Rich Grid Panel Cell Content


    Hi All,

    How do I create 'rich' cell content that is a product of Ext JavaScript constructs?

    What I want to do is something like this:

    Code:
    Ext.define('ProcExt.view.ProductGridPanel',
    {
        extend : 'Ext.grid.Panel',
    
    
        initComponent : function()
        {
            this.columns = [
            {
                text : 'Order Price',
                flex : 1,
    
    
                // Renderers can return text or HTML, so this code is fine
                renderer : function(value, metaData, record, rowIndex, colIndex, store, view)
                {
                    return '$' + record.getProduct().get('price');
                }
            },
            
            {
                text : 'Actions',
                dataIndex : 'product',
                flex : 2,
    
    
                // I'd love to be able to do this, but Ext JS doesn't seem to support it
                renderer : function(value, metaData, record, rowIndex, colIndex, store, view)
                {
                    return new Ext.container.Container(
                    {
                        margin : '2 6 2 2',
                        items : [
                        {
                            xtype : 'button',
                            tooltip : 'Add to favourites',
                            icon : 'img/star_disabled.png',
                            padding : '3 2 2 3',
                            product : record,
                            handler : function(btn, e)
                            {
                                if (btn.icon == 'img/star.png')
                                {
                                    btn.setIcon('img/star_disabled.png');
                                    btn.setTooltip('Add to favourites');
                                }
                                else
                                {
                                    btn.setIcon('img/star.png');
                                    btn.setTooltip('Remove from favourites');
                                }
                            }
                        } ]
                    });
                }
            } ];
    
    
            this.callParent(arguments);
        }
    });
    This is the best discussion I’ve found, but I feel that the solutions are all hacks and will make my code complicated. Why isn’t this functionality provided by Ext?

    Many thanks, Adam.

    scr.png

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,789
    Answers
    356
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    While components in grid columns/cells isn't provided by ExtJS out of the box you might look into this user extension:
    http://skirtlesden.com/ux/component-column

Thread Participants: 1

Tags for this Thread