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
    5,468
    Answers
    441
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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