What's New?

[CLOSED] Combobox with images

  1. #1
    Oct 21, 2010, 7:58 AM

    [CLOSED] Combobox with images

    I found this old post:
    http://forums.ext.net/showthread.php...ull=1#post2548

    I really like this solution:
    https://examples1.ext.net/#/Form/ComboBox/IconCombo/

    Unfortunately, this solution works with icons

    Instead of icons I can use the images in a folder.
    is it possible?
    Last edited by geoffrey.mcgill; Nov 03, 2010 at 8:38 AM.
  2. #2
    Oct 21, 2010, 11:55 AM
    Quote Originally Posted by 78fede78 View Post

    Instead of icons I can use the images in a folder.
    is it possible?
    Hi,

    Yes, it's possible.

    Applying your requirement to
    https://examples1.ext.net/#/Form/ComboBox/IconCombo/
    it will look like this:

    Example
    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new object[]
        {
            new object[] { "yourIconClass1", "some text 1"},
            new object[] { "yourIconClass2", "some text 2"}
        };
        
        this.Store1.DataBind();
    }
</script>

...

<head runat="server">
    <title>IconCombo</title>
    <style type="text/css">
         .icon-combo-item {
            background-repeat: no-repeat ! important;
            background-position: 3px 50% ! important;
            padding-left: 24px ! important;
        }
        .yourIconClass1 {
            background-image: url(myImage1.png);
        }
        .yourIconClass2 {
             background-image: url(myImage2.png);
         }
    </style>
</head>
  3. #3
    Oct 21, 2010, 1:56 PM

    As you set the height of the combo?

    The div that allows the selection of items has the correct height (Figure 1).
    Instead, you must increase the height of the combo as the selected image is cut off. (Figure 2)
    Attached Thumbnails Click image for larger version.  Name: 1.JPG  Views: 220  Size: 17.8 KB  ID: 1761   Click image for larger version.  Name: 2.JPG  Views: 159  Size: 11.6 KB  ID: 1762  
  4. #4
    Oct 21, 2010, 3:28 PM
    To increase a ComboBox's height please use the StyleSpec property:
    <ext:ComboBox runat="server" StyleSpec="height:25px;">
    But there is an issue under IE. A text within a ComboBox is not centralized.
    As far as I can know there is a bug (or just no support) under IE with the css "vertical-align: middle;" rule.
    At least under FF works fine.

    Please note that you have to worry about height (and width) of trigger's icon.
  5. #5
    Oct 21, 2010, 3:57 PM
    Does not work.
    the image is still cut (Figure 1)
    otherwise you can preview the selected image outside the combobox?
    changing at runtime the src of an external image?

     <ext:ComboBox 
            ID="ComboBox1" 
            runat="server"
            StoreID="Store1" 
            Width="250"
            StyleSpec="height:50px;"
            Editable="false"
            DisplayField="name"            
            ValueField="name"
            Mode="Local"
            TriggerAction="All"
            EmptyText="Select a country...">
            <Template ID="Template1" runat="server">
                <Html>
                    <tpl for=".">
                        <div class="x-combo-list-item icon-combo-item {iconCls}">
                            {name}
                        </div>
                    </tpl>
                </Html>
            </Template>  
            <Listeners>
                <Select Handler="this.setIconCls(record.get('iconCls'));" />
            </Listeners>  
        </ext:ComboBox>
    Attached Thumbnails Click image for larger version.  Name: 1.JPG  Views: 165  Size: 6.2 KB  ID: 1764  
  6. #6
    Oct 21, 2010, 4:17 PM
    Hi,

    Combobox doesn't support big images (only 16x16) because combo doesn't support custom height
    It is required to change standard css rules to support big images
  7. #7
    Oct 22, 2010, 10:43 AM
    I do not know how to change standard css rules to support big images.
    I thought of an alternative solution
    Can I view the selected image in an external image rather than inside the combo?
    do you think is a good idea?
    I added to store the field ImagePath

    I can not put my imageon the same row of the combo (Figure 1).

    Old code:

    <ext:ComboBox
           ID="ComboBox1"
           runat="server"
           StoreID="Store1"
           Width="250"
           StyleSpec="height:50px;"
           Editable="false"
           DisplayField="name"           
           ValueField="name"
           Mode="Local"
           TriggerAction="All"
           EmptyText="Select a country...">
           <Template ID="Template1" runat="server">
               <Html>
                   <tpl for=".">
                       <div class="x-combo-list-item icon-combo-item {iconCls}">
                           {name}
                       </div>
                   </tpl>
               </Html>
           </Template> 
           <Listeners>
               <Select Handler="this.setIconCls(record.get('iconCls'));" />
           </Listeners> 
       </ext:ComboBox>
    New code:

    <ext:ComboBox
           ID="ComboBox1"
           runat="server"
           StoreID="Store1"
           Width="250"
           StyleSpec="height:50px;"
           Editable="false"
           DisplayField="name"           
           ValueField="name"
           Mode="Local"
           TriggerAction="All"
           EmptyText="Select a country...">
           <Template ID="Template1" runat="server">
               <Html>
                   <tpl for=".">
                       <div class="x-combo-list-item icon-combo-item {iconCls}">
                           {name}
                       </div>
                   </tpl>
               </Html>
           </Template> 
              <Listeners>                
              <Select Handler="Image1.setImageUrl(record.get('ImagePath'));" />            
             </Listeners>   
       </ext:ComboBox>
    Attached Thumbnails Click image for larger version.  Name: 1.JPG  Views: 169  Size: 26.2 KB  ID: 1766  
  8. #8
    Oct 22, 2010, 12:14 PM
    Hi,

    I can not put my imageon the same row of the combo (Figure 1).
    Seems the answer on this is here:
    http://forums.ext.net/showthread.php...-the-same-line

    I thought of an alternative solution
    Can I view the selected image in an external image rather than inside the combo?
    do you think is a good idea?
    I think it's good idea.
    At least it's much easier. Also it's stabler because changing standard css rules may cause multiple issues now and in the future.

Similar Threads

  1. htmlEditor and Images
    By fabiomarcos in forum 1.x Help
    Replies: 1
    Last Post: Jun 27, 2011, 8:58 AM
  2. [CLOSED] Set css for the images via an ImageButton
    By majunior in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 24, 2011, 1:47 PM
  3. [CLOSED] Registering Images for UX extensions
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 13, 2011, 2:37 PM
  4. [CLOSED] Size combobox with images changes when selecting an item
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 15, 2010, 6:37 AM
  5. [CLOSED] Images zoom and pan
    By GmServizi in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 23, 2009, 5:50 AM

Posting Permissions