[FIXED] [#1222] [3.3] Changing icon on back-end no longer works

[zfreeman]

In code that worked with 2.X I would check for a specific value and then change the icon from BulletTick to BulletCross if the value I was checking was not at least a certain value. After converting to 3.2, I don't receive an error for this code but it does not work. If I comment out the lines regarding the icons everything else works fine, if I leave them in the window they are part of will not display at all. As a side note, I can still set an icon on the front end, but it seems this backend control is no longer available. How can we change icons for Display Fields on the back end now?

Here is a sample:

Decimal cHours = Convert.ToDecimal(twp.studentCreditHours);
            if (Decimal.Compare(cHours, MiscUtility.MIN_CREDITHOURS) < 0)
            {
                dfStudentCreditHours.AddCls("red-alert");
                dfStudentCreditHours.Icon = Icon.BulletCross;
            }
            else
            {
                dfStudentCreditHours.RemoveCls("red-alert");
                dfStudentCreditHours.Icon = Icon.BulletTick;
            }

[fabricio.murta]

Hello @zfreeman!

I don't see the 'icon' config in both ExtJS 4 (Ext.NET 2) nor ExtJS 5 (Ext.NET 3), so I am really not sure how exactly you are binding icons to this control.

Can you provide a sample code showing how you are writing your DisplayFields with icons?

EDIT: On Ext.NET 2.5 (latest publicly available) DiplayFields also have no [var]Icon[var] property, so the code you provided don't work at all (can't build). Same on Ext.NET 3.x

[zfreeman]

The code I previously posted will build in 3.2, however it will prevent a window from being displayed. I am assuming because the code breaks when it attempts to change the icon from the back-end.

Here is how the icon would be set on the front-end (this works in both 2 and 3):

<ext:FieldContainer ID="FieldContainer1" runat="server" FieldLabel="Credit Hours" >
                                    <Items>
                                        <ext:Label runat="server" ID="dfStudentCreditHours" Icon="BulletTick"
                                            IconAlign="Right" />
                                    </Items>
                                </ext:FieldContainer>

And then this code would check the value and change the icon on the back-end. This is where the issue would arise:

Decimal cHours = Convert.ToDecimal(twp.studentCreditHours);
            if (Decimal.Compare(cHours, MiscUtility.MIN_CREDITHOURS) < 0)
            {
                dfStudentCreditHours.AddCls("red-alert");
                dfStudentCreditHours.Icon = Icon.BulletCross;
            }
            else
            {
                dfStudentCreditHours.RemoveCls("red-alert");
                dfStudentCreditHours.Icon = Icon.BulletTick;
            }

[fabricio.murta]

Hello! Thanks for the additional code! I was trying an ext:DateField instead of an ext:Label.

Check if this fixes the issue for you:

    <script type="text/javascript">
        Ext.define('Ext.net.Label', {
            override: 'Ext.net.Label',
            setIconCls: function (cls) {
                var imgTags = this.el.dom.getElementsByTagName('img');

                if (imgTags.length > 0)
                {
                    this.imgEl = Ext.get(imgTags[0]);
                }

                this.callParent(arguments);
            }
        });
    </script>

We are going to file a bug for this issue. Thanks for reporting!

EDIT: Issue #1222 has been opened to track this bug.

[zfreeman]

Thanks Fabricio - I fixed it by removing the change in the code behind but it's definitely functionality I'd like to use in the future, so if it gets addressed I'd want to reimplement the functionality I had.

[fabricio.murta]

The override code above hopefully allows you to use the code behind approach. If we have a confirmation from you that this fixes the issue it would be a solid reason to implement this fix in the code in a shorter time.

Actually, we are working on the Ext.NET 3.3 version already, and with your confirmation this fix is likely to get into the next update.

[zfreeman]

Confirmation! After adding the above javascript the original code I had works and the icons can be replaced on the backend again. Thanks! Looking forward to version 3.3.

[fabricio.murta]

Thanks for confirming, I've forgotten to mention the link for the issue, this should be part of Ext.NET on next 3.x release.

The issue is #1222.

[Daniil]

Guys, could you, please, help me to reproduce the issue? I am trying with this test case and it appears to be working well.

Example

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

<script runat="server">
    protected void SetIcon(object sender, DirectEventArgs e)
    {
        this.Label1.Icon = Icon.Add;
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Label ID="Label1" runat="server" Text="Some Label" />

        <ext:Button runat="server" Text="Set Icon" OnDirectClick="SetIcon" />
    </form>
</body>
</html>

[Daniil]

Okay, the key point is IconAlign="Right".

Test Case

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

<script runat="server">
    protected void SetIcon(object sender, DirectEventArgs e)
    {
        this.Label1.Icon = Icon.Add;
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Label 
            ID="Label1" 
            runat="server" 
            Text="Some Label" 
            IconAlign="Right" 
            Icon="Accept" />

        <ext:Button runat="server" Text="Set Icon" OnDirectClick="SetIcon" />
    </form>
</body>
</html>