What's New?

[CLOSED] Icon in MultiCombo

  1. #1
    May 01, 2012, 11:25 PM

    [CLOSED] Icon in MultiCombo

    Hi guys,

    How do I add an icon to a MultiCombo similar to the IconCombo. I tried following the example for the icon combo box but the check boxes does not show up. Please can you point me in the right direction.



                                <ext:MultiCombo ID="cbNewAutoTransitionFromPrincipals"
                                    runat="server" 
                                    IDMode="Explicit"
                                    Editable="false"                                   
                                    Mode="Local"
                                    FieldLabel ="<%#Model.FromUserFieldLabel %>"
                                    ForceSelection="true"                                                  
                                    AllowBlank="false"
                                    AutoDataBind="true"
                                    SelectOnFocus="false" LabelAlign="Top" 
                                    TabIndex="1" AutoFocus="False"
                                    Width ="372">                                   
                                        <Store>                                                    
                                            <ext:Store IDMode="Explicit"  runat="server">
                                                <Reader>
                                                    <ext:JsonReader Root="data" IDProperty="Id">
                                                        <Fields>
                                                            <ext:RecordField Name="Id" />
                                                            <ext:RecordField Name="Name" />
                                                            <ext:RecordField Name="IconCls" />
                                                        </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>                   
                                        </Store>
                                        <Template runat="server">
                                            <Html>
                                                <tpl for=".">
                                                    <div class="x-combo-list-item icon-combo-item {IconCls}">
                                                        {Name}
                                                    </div>
                                                </tpl>
                                            </Html>
                                        </Template>
                            </ext:MultiCombo>
    Last edited by Daniil; May 08, 2012 at 11:27 AM. Reason: [CLOSED]
  2. #2
    May 02, 2012, 9:34 AM
    Hi,

    Internally, MultiCombo uses the following template:

    MultiCombo Template
    if (!this.tpl) {
    this.tpl = '<tpl for="."><div class="x-combo-list-item {[this.getItemClass()]}">' +
        '<img src="' + Ext.BLANK_IMAGE_URL + '" class="{[this.getImgClass(values)]}" />' +
        '<div class="x-mcombo-text">{' + this.displayField + '}</div></div></tpl>';

    this.tpl = new Ext.XTemplate(this.tpl, {
        getItemClass : (function () {
            if (this.selectionMode === "selection") {
                return "x-mcombo-nimg-item";
            }

            return "x-mcombo-img-item";

        }).createDelegate(this),

        getImgClass : (function (values) {
            if (this.selectionMode === "selection") {
                return "";
            }

            var found = false;

            Ext.each(this.checkedRecords, function (record) {
                // do not replace == by ===
                if (values[this.valueField] == record.get(this.valueField)) {
                    found = true;
                    return false;
                }
            }, this);

            return found ? "x-grid3-check-col-on" : "x-grid3-check-col";
        }).createDelegate(this, [], true)
    });
}
    So, to don't break the existing functionality you should not break this template.

    Hope this helps.
  3. #3
    May 02, 2012, 2:27 PM
    Hi,

    I have been trying to play around with the CSS for a little while but with no luck. Is it possible for you to create a sample that gives a starting point that I can build on.
  4. #4
    May 02, 2012, 6:04 PM
    Here you are.

    One restriction - I can't see any way to add multiple icons in the field.

    I mean implementing this
    <Select Handler="this.setIconCls(record.get('iconCls'));" />
    for MultiCombo.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Store store = this.MultiCombo1.GetStore();
        store.DataSource = new object[]
        {
            new object[] { ResourceManager.GetIconClassName(Icon.FlagFr), "France"},
            new object[] { ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"},
            new object[] { ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"},
            new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "United States"},
            new object[] { ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"}
        };

        store.DataBind();

        ResourceManager1.RegisterIcon(Icon.FlagFr);
        ResourceManager1.RegisterIcon(Icon.FlagCa);
        ResourceManager1.RegisterIcon(Icon.FlagDe);
        ResourceManager1.RegisterIcon(Icon.FlagUs);
        ResourceManager1.RegisterIcon(Icon.FlagIt);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript">
        var myInitComponent = function () {
            this.editable = false;

            if (!this.tpl) {
                this.tpl = '<tpl for="."><div class="x-combo-list-item {[this.getItemClass()]} icon-combo-item {iconCls}">' +
                    '<img src="' + Ext.BLANK_IMAGE_URL + '" class="{[this.getImgClass(values)]}" />' +
                    '<div class="x-mcombo-text">{' + this.displayField + '}</div></div></tpl>';

                this.tpl = new Ext.XTemplate(this.tpl, {
                    getItemClass : (function () {
                        if (this.selectionMode === "selection") {
                            return "x-mcombo-nimg-item";
                        }

                        return "x-mcombo-img-item";

                    }).createDelegate(this),

                    getImgClass : (function (values) {
                        if (this.selectionMode === "selection") {
                            return "";
                        }

                        var found = false;

                        Ext.each(this.checkedRecords, function (record) {
                            // do not replace == by ===
                            if (values[this.valueField] == record.get(this.valueField)) {
                                found = true;
                                return false;
                            }
                        }, this);

                        return found ? "x-grid3-check-col-on" : "x-grid3-check-col";
                    }).createDelegate(this, [], true)
                });
            } 

            this.checkedRecords = [];

            Ext.net.MultiCombo.superclass.initComponent.apply(this, arguments);
        
            if (this.selectionPredefined) {
                this.initSelection(this.selectionPredefined);
            }

            this.on("beforequery", this.onBeforeQuery);
        };
    </script>

    <style type="text/css">
         .icon-combo-item {
            background-repeat: no-repeat ! important;
            background-position: 3px 50% ! important;
            padding-left: 24px ! important;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:MultiCombo 
            ID="MultiCombo1" 
            runat="server" 
            Width="250"
            DisplayField="name"
            ValueField="name"
            Mode="Local"
            EmptyText="Select countries...">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="iconCls" />
                                <ext:RecordField Name="name" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>            
                </ext:Store>    
            </Store>
            <CustomConfig>
                <ext:ConfigItem Name="initComponent" Value="myInitComponent" Mode="Raw" />
            </CustomConfig> 
        </ext:MultiCombo>    
    </form>
</body>
</html>
  5. #5
    May 02, 2012, 10:10 PM
    Thanks Daniil,

    Works perfecttly except for the one restriction. I will continue trying to see if I can get the Icons to display in the Textfield as well. Let me know if you find a way to make the icon display for each selected item in the textfield. I will continue trying to build on hat you have given to me.
  6. #6
    May 03, 2012, 10:56 AM
    I'm afraid there is no any solution in the MultiCombo context to place icons directly into field for each selected items.
  7. #7
    Oct 08, 2012, 8:07 AM
    Here is a v2 discussion on this topic.
    http://forums.ext.net/showthread.php?21350

Similar Threads

  1. [CLOSED] FireFox 13.0 and ext:TextField icon: icon untidy.
    By supera in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Jun 18, 2012, 5:21 PM
  2. [CLOSED] MultiCombo: Place Indicator Icon next to FieldLabel rather than Drop down
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Oct 21, 2011, 1:56 PM
  3. [CLOSED] [1.0] Ellipsis FieldTrigger Icon displays as the normal combo icon
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 02, 2010, 8:44 AM
  4. [CLOSED] [1.0] MultiCombo Field Trigger Icon=Ellipsis is showing Icon = Combo
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 20, 2010, 7:48 PM
  5. [CLOSED] Icon ComboBox does not show the icon when the item slected value is setted by code?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 05, 2010, 3:15 PM

Tags for this Thread

Posting Permissions