Results 1 to 4 of 4

Thread: iconCls not showing in actioncolumn

  1. #1

    Default iconCls not showing in actioncolumn

    Hi,

    I'm using fontello (fontello.com) for my icons, and as seen from the screenshot below (lower left), the "+" icon appears in the "Add" button just fine.

    iconcls01.png

    Do note however that the icons does not appear in the actioncolumn items.

    This error only happens when I use "iconCls" instead of "icon".

    Is there a known bug for this, or am I just doing it wrong here?

    Below is the code for the actioncolumn items.

    Code:
                    {
                        xtype: 'actioncolumn',
                        header: 'Action',
                        width: 60,
                        altText: '',
                        items: [
                            {
                                handler: function(view, rowIndex, colIndex, item, e) {
                                    //action
                                },
                                iconCls: 'icon-plus',
                                tooltip: 'Edit'
                            },
                            {
                                handler: function(view, rowIndex, colIndex, item, e) {
                                    //action
                                },
                                iconCls: 'icon-minus',
                                tooltip: 'Delete'
                            },
                            {
                                handler: function(view, rowIndex, colIndex, item, e) {
                                    //action
                                },
                                iconCls: 'icon-list',
                                tooltip: 'List'
                            }
                        ]
                    }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    What does your css look like? is the image/url valid and are you setting the size?

    Code:
    .x-action-col-cell img.icon-plus {
        height: 16px;
        width: 16px;
        background-image: url(http://famfamfam.com/lab/icons/silk/icons/date.png);
    }

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    13

    Default

    i'm having the exact same problem with FontAwesome icons. I'm setting my action buttons like this:
    Code:
    {              
       iconCls: 'fa fa-edit',
       tooltip: I18n.t('tooltips.show'),
       handler: function(grid, rowIndex, colIndex) { 
          var rec = store.getAt(rowIndex); 
          TabController.updateTab(config.tabId, baseUrl+'/'+rec.get('id'), 'Show details'); 
       }   
    }
    This works with any other buttons (Form buttons, for example).

  4. #4

    Default

    Hey
    To anyone that sees this - i solved icons not showing by setting
    x-fa fa-cog
    instead of
    fa fa-cog

    Good luck

Posting Permissions

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