What's New?

[CLOSED] [#491] Populate Icon ComboBox during DirectEvent

  1. #1
    May 15, 2014, 10:48 AM

    [CLOSED] [#491] Populate Icon ComboBox during DirectEvent

    Hi,
    I need to populate a combobox during a DirectEvent (it must also be possible that it is a custom image instead of an Ext.NET icon).

    Following sample does not work:

    <%@ 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)
    {
        
    }


    public void OnPopulateComboButtonClick(object sender, DirectEventArgs e)
    {
        Store store = this.ComboBox1.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();


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


<html>
<head id="Head1" runat="server">
    <title>IconCombo - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
    <style>
        .icon-combo-item {
            background-repeat: no-repeat !important;
            background-position: 3px 50% !important;
            padding-left: 24px !important;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />


        <h1>Render an Icon in ComboBox data items</h1>


        <ext:Button ID="PopulateComboButton" runat="server" Text="Populate combo">
            <DirectEvents>
                <Click OnEvent="OnPopulateComboButtonClick" />
            </DirectEvents>
        </ext:Button>


        <ext:ComboBox
            ID="ComboBox1"
            runat="server"
            Width="250"
            Editable="false"
            DisplayField="name"
            ValueField="name"
            QueryMode="Local"
            TriggerAction="All"
            EmptyText="Select a country...">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="iconCls" />
                                <ext:ModelField Name="name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ListConfig>
                <ItemTpl ID="ItemTpl1" runat="server">
                    <Html>
                        <div class="icon-combo-item {iconCls}">
                            {name}
                        </div>
                    </Html>
                </ItemTpl>
            </ListConfig>
            <Listeners>
                <Change Handler="if(this.valueModels.length>0){this.setIconCls(this.valueModels[0].get('iconCls'));}" />
            </Listeners>
        </ext:ComboBox>
    </form>
</body>
</html>
    When adding a custom image, I use following method to register a style:

    X.ResourceManager.RegisterClientStyleBlock();
    This method also seems not to work in a DirectEvent.

    Hope you can help, thx.
    Last edited by Daniil; May 16, 2014 at 2:07 PM. Reason: [CLOSED]
  2. #2
    May 15, 2014, 3:26 PM
    Hi @prost,

    Thank you for the report. Created an Issue.
    https://github.com/extnet/Ext.NET/issues/491

    It has been fixed in the trunk, revision #5846.

    Now this example works.

    Example
    <%@ Page Language="C#" %>
 
<script runat="server">
    public void OnPopulateComboButtonClick(object sender, DirectEventArgs e)
    {
        Store store = this.ComboBox1.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"},
            new object[] { "testIcon", "TestIcon"}
        };
 
        store.DataBind();

        this.ResourceManager1.RegisterIcon(Icon.FlagFr);
        this.ResourceManager1.RegisterIcon(Icon.FlagCa);
        this.ResourceManager1.RegisterIcon(Icon.FlagDe);
        this.ResourceManager1.RegisterIcon(Icon.FlagUs);
        this.ResourceManager1.RegisterIcon(Icon.FlagIt);
        X.ResourceManager.RegisterClientStyleBlock("testIcon", ".testIcon { background-image: url(resources/images/test.png); }");
    }
</script>
 
<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
    
    <style>
        .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:Button runat="server" Text="Populate ComboBox" OnDirectClick="OnPopulateComboButtonClick" />
 
        <ext:ComboBox
            ID="ComboBox1"
            runat="server"
            Width="250"
            Editable="false"
            DisplayField="name"
            ValueField="name"
            QueryMode="Local"
            TriggerAction="All"
            EmptyText="Select a country...">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="iconCls" />
                                <ext:ModelField Name="name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <ListConfig>
                <ItemTpl runat="server">
                    <Html>
                        <div class="icon-combo-item {iconCls}">
                            {name}
                        </div>
                    </Html>
                </ItemTpl>
            </ListConfig>
            <Listeners>
                <Change Handler="if(this.valueModels.length>0){this.setIconCls(this.valueModels[0].get('iconCls'));}" />
            </Listeners>
        </ext:ComboBox>
    </form>
</body>
</html>
  3. #3
    May 16, 2014, 1:26 PM
    Works, Thanks!

Similar Threads

  1. [CLOSED] DirectEvent does not populate Combobox after DirectEvent Parent Refresh.
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Feb 22, 2014, 5:02 AM
  2. Populate a ComboBox
    By gmrm in forum 2.x Help
    Replies: 1
    Last Post: Feb 15, 2013, 12:47 PM
  3. [CLOSED] Multiselect will not populate from directevent
    By HOWARDJ in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Jun 29, 2011, 1:07 AM
  4. Populate combobox from DirectEvent (without using store)
    By okutlubay in forum 1.x Help
    Replies: 12
    Last Post: Jun 30, 2010, 9:31 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