[CLOSED] Icon in MultiCombo

[RCM]

Hi,

I got this sample from you guys for version 1.0. Is there a sample that works in version 2.0


http://forums.ext.net/showthread.php...-in-MultiCombo

[Daniil]

Hi @RCM,

Unfortunately, we have no such example for v2.

Please clarify what exactly problems are you facing in porting?

[RCM]

Hi,

I am trying to display an icon next to each item in the combo box similar to the icon combo box. Each item in the combo box may have a different icon.

[RCM]

hi,

I am getting the error:

Object doesn't support property or method 'createDelegate'

See create delegate below.

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)
        });

[geoffrey.mcgill]

Please see http://dev.sencha.com/deploy/ext-4.0...iew/index.html

There are a few noteworthy changes to how the base Function prototype methods have been implemented in Ext 4. Most importantly, the Function.createDelegate andFunction.createCallback methods are now named Ext.Function.bind and Ext.Function.pass respectively. Likewise, Function.defer is now available asExt.Function.defer. Because these three functions are so commonly used, they are also aliased directly onto the Ext object as Ext.bind, Ext.pass and Ext.defer.

[Daniil]

This is also addressed in the #40 CHANGELOG item.
https://examples2.ext.net/#/Getting_...nts/CHANGELOG/

40. Now ExtJS doesn't override/extend standard JavaScript classes.

The createDelegate function has been renamed to bind.

Example 1

//Old
String.format(string, value1, value2);

//New
Ext.String.format(string, value1, value2);

Example 2

//Old
var f = function () { };
f.defer(10);

//New
Ext.Function.defer(f, 10);

Example 3

//Old
var f = function () {
alert(this);
};
f.createDelegate('Hello!')();

//New
Ext.Function.bind(f, 'Hello!')();

[RCM]

Hi,

I updated the function but the dropdown list is not being displayed. The store is loaded and when if I select an item in teh list from code the item gets displayed but i can't see the other items in the dropdown.. see updated code below..

//For showing image in multiCombo
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";

            }, Ext.Function.bind(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";
            }, Ext.Function.bind(this, [], true))
        });
    }

    this.checkedRecords = [];

    Ext.net.MultiCombo.superclass.initComponent.apply(this, arguments);

    if (this.selectionPredefined) {
        this.initSelection(this.selectionPredefined);
    }

    this.on("beforequery", this.onBeforeQuery);
};

[geoffrey.mcgill]

When I try to run the code above, many errors are thrown. Can you post a simplified .aspx demonstrating the whole scenario. Please ensure you remove all code that is not directly related to the problem from the sample.

[RCM]

Hi,

Please see sample below.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
    var getData = function (operation) {
        var data = Array();
        var item = { Key: 1, Value: "Name" }
        data.push(item);
        item = { Key: 1, Value: "Surname" }
        data.push(item);

        App.Combo1.store.loadData(data);
    };

    var show = function (operation) {
    };

    //For showing image in multiCombo
    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";

                }, Ext.Function.bind(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";
                }, Ext.Function.bind(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>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
    <style type="text/css">
        .my-cells .x-grid-cell-inner  {
            white-space: normal;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Window ID="windowExportWorkItems" runat="server" AutoHeight="true" Width="300"
        Title="Load combo" Draggable="true" Resizable="false" Modal="true" IDMode="Static"
        Closable="true">
        <Defaults>
            <ext:Parameter Name="IDMode" Value="Static" />
        </Defaults>
        <Items>
            <ext:MultiCombo ID="Combo1" runat="server" Editable="false" QueryMode="Local" FieldLabel="Users"
                ForceSelection="true" AllowBlank="false" DisplayField="Fullname" ValueField="Id"
                AutoDataBind="true" TabIndex="1" AnchorHorizontal="100%">
                <Store>
                    <ext:Store runat="server" AutoLoad ="false">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Key" />
                                    <ext:ModelField Name="Value" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Listeners>
                </Listeners>
                <CustomConfig>
                        <ext:ConfigItem Name="initComponent" Value="myInitComponent" Mode="Raw" />
                </CustomConfig>
            </ext:MultiCombo>
        </Items>
        <Listeners>
            <AfterRender Handler="getData();" />
            <Show Handler="show();" />
        </Listeners>
    </ext:Window>
</body>
</html>

[Daniil]

Please override the getPicker method instead of the initComponent one.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
 
<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>
<head runat="server">
    <title>Ext.NET Example</title>
 
    <script type="text/javascript">
        var myGetPicker = function () {        
            if (!this.picker) {
                this.listConfig = this.listConfig || {};
                this.listConfig.getInnerTpl = function (displayField) {
                    return  '<div class="x-combo-list-item {[this.getItemClass(values)]}">' +                      
                            '<div class="x-mcombo-text icon-combo-item {iconCls}">{' + displayField + '}</div></div>'; // added " icon-combo-item {iconCls}"
                };

                this.listConfig.selModel = {
                    mode: 'SIMPLE'
                };            

                this.picker = this.createPicker();

                this.mon(this.picker.getSelectionModel(), 'select', this.onListSelect, this);
                this.mon(this.picker.getSelectionModel(), 'deselect', this.onListDeselect, this);

                this.picker.tpl.getItemClass = Ext.Function.bind(function (values) {
                        var record;

                        if (this.selectionMode === "selection") {
                            return "";
                        }

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

                        if (record && this.picker.getSelectionModel().isSelected(record)) {
                            return "x-mcombo-item-checked";
                        }

                        return "x-mcombo-item-unchecked";

                }, this, [], true);
            

                if (this.selectionMode !== "checkbox") {
                    this.picker.on("render", function () {                
                        this.picker.overItemCls = "x-multi-selected";                               
                    }, this);
                }        

                this.picker.on("viewready", this.onViewReady, this, {single:true});
            }
        
            return this.picker;
        };
    </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>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
    <ext:MultiCombo
        ID="MultiCombo1"
        runat="server"
        Width="250"
        DisplayField="name"
        QueryMode="Local"
        EmptyText="Select countries...">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="iconCls" />
                            <ext:ModelField Name="name" />
                        </Fields>
                    </ext:Model>
                </Model>            
            </ext:Store>    
        </Store>
        <CustomConfig>
            <ext:ConfigItem Name="getPicker" Value="myGetPicker" Mode="Raw" />
        </CustomConfig> 
    </ext:MultiCombo>    
</body>
</html>