Results 1 to 8 of 8

Thread: [Workaround] Image in Combobox options?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
      0  

    Thumbs up [Workaround] Image in Combobox options?

    Is it possible to place an image/icon next to each option within the combobox? I looked through the threads and I didn't find any.

  2. #2
    Ext User Skeleton's Avatar
    Join Date
    Mar 2007
    Location
    İstanbul
    Posts
    68
    Vote Rating
    0
      0  

    Default

    I have done a similar thing at work for a project. I couldn't see any built-in funcionality for this in the Ext library but it is a pretty simple thing and can be done wrting a few CSS rules. I will try to put the code I have used here if I don't forget tomorrow while I was at office (bump this thread or better PM me tomorrow)
    "In Ext, we trust!"
    huseyint.com

  3. #3
    Ext User Skeleton's Avatar
    Join Date
    Mar 2007
    Location
    İstanbul
    Posts
    68
    Vote Rating
    0
      0  

    Default

    This is the rule that I have used for icons in combo:

    Code:
    .x-combo-list-item {
        background: url(/WebtopLite/img/ico-library.gif) no-repeat 1px 2px;
        padding-left: 20px;
    }
    Here how it looks like:

    combo-icon.png
    "In Ext, we trust!"
    huseyint.com

  4. #4
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
      0  

    Default

    Thank you Skeleton. I think this would only allow you to apply one image for all options, correct?

  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    106
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by cluettr View Post
    Thank you Skeleton. I think this would only allow you to apply one image for all options, correct?
    That's true as long as you use this CSS class for all items. Another option is to use (maybe not yet documented) tpl config option. Combobox is a templated control, so you can customize the appearance of items in the list as you like it.
    Code:
        Ext.form.ComboBox({
         ...
         tpl : '<div><img ... /></div>',
         ...
        });

  6. #6
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    52
    Vote Rating
    2
      0  

    Default

    I got here by google on searching the same issue for Extjs 4.
    The solution for ExtJs4 is the listConfig entry:

    PHP Code:
    xtype'combobox',
    anchor'100%',
    listConfig: {
      
    getInnerTpl: function(displayField) {
        return 
    '<img src="/images/icons/{id}.png" class="icon"/> {' displayField '}';
      }
    },
    name'type',
    fieldLabel'Group Type',
    displayField'label',
    hiddenName'type',
    queryMode'local',
    store'group.Types',
    valueField'id' 

Posting Permissions

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