1. #1
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Thumbs up [Workaround] Image in Combobox options?

    [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
    Skeleton is on a distinguished road

      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
    Skeleton is on a distinguished road

      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
    cluettr is on a distinguished road

      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
    liggett78 is on a distinguished road

      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
    46
    Vote Rating
    2
    quixit is on a distinguished road

      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' 

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Location
    Hyderabad,India
    Posts
    30
    Vote Rating
    3
    riku351 is on a distinguished road

      0  

    Default How to handle click events of that image added

    How to handle click events of that image added


    Hello All,
    I came up with a situation where I have to handle the click events of the image added to the list items through tpl.

    Can anyone guide me in this direction


    Thanks

  8. #8
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    46
    Vote Rating
    2
    quixit is on a distinguished road

      0  

    Default


    You mean a click does something on the image only, but not on the rest of the combo item?
    Hm, this would be my approach:
    PHP Code:
    comboBox.getEl().on('click', function(eventtarget) {
      if(
    target == 'img') {
         
    //do something
      
    }
    })