[CLOSED] [#206] Setting custom icon on treenode removed loading icon

  1. #1

    [CLOSED] [#206] Setting custom icon on treenode removed loading icon

    If you set a custom icon to async treenode, the loading icon is gone when you expand that node. In the example below, expand Root and notice you get a gray loading icon. Expand one of the new child node and no loading icon. The loading icon is helpful to let user know that something is happening so they don't try to expand the node again while it is loading from the server.

    <script runat="server">
     
        Protected Sub NodeLoad(sender As Object, e As NodeLoadEventArgs)
            Dim nodeId = e.NodeID
            Dim nodes As NodeCollection = New Ext.Net.NodeCollection()
            System.Threading.Thread.Sleep(1000)
            If Not String.IsNullOrEmpty(nodeId) Then
                For i As Integer = 1 To 5
                    Dim asyncNode As New Node()
                    asyncNode.Text = nodeId + i
                    asyncNode.NodeID = nodeId + i
                    asyncNode.Icon = Ext.Net.Icon.FolderBell
                    nodes.Add(asyncNode)
                Next
                
            End If
            e.Nodes.AddRange(nodes)
        End Sub
    </script>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />
        <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Width="200" Height="500"
            Border="false" UseArrows="true">
            <Store>
                <ext:TreeStore ID="TreeStore1" runat="server" OnReadData="NodeLoad">
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                </ext:TreeStore>
            </Store>
            <Root>
                <ext:Node NodeID="0" Text="Root" />
            </Root>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Mar 05, 2014 at 9:43 AM. Reason: [CLOSED]
  2. #2
    Hi @jchau,

    There is a problem with "!important" statement we use to register CSS classes for icons. It overrides a loading icon.

    Honestly, now I don't know for sure we must use that "!important" statement or not. I hope it is not required, because using "!important" is a poor practice. I will investigate and discuss it with the colleagues.

    For now, I can suggest the following fix. It helps remedy the problem, but I am not sure it doesn't affect on something else.

    Fix
    Ext.net.ResourceMgr.registerIcon = function (name, init) {
        if (typeof name === 'string' && !!this.cssIcons[name]) {
            return;
        }
    
        var buffer = [],
            templateEmb = ".{0}{background-image:url(\"/{1}icons/{2}-png/ext.axd\");background-repeat:no-repeat;}",
            templateCdn = ".{0}{background-image:url(\"{1}/icons/{2}.png\");background-repeat:no-repeat;}",
            appName = Ext.isEmpty(this.appName, false) ? "" : (this.appName + "/");
    
        Ext.each(name, function (icon) {
            if (!!this.cssIcons[icon.name || icon]) {
                return;
            }
    
            if (!Ext.isObject(icon)) {
                icon = { name: icon };
            }                
    
            var iconName = this.toCharacterSeparatedFileName(icon.name, "_"),
                iconRule = icon.name.toLowerCase(),
                id = !Ext.net.StringUtils.startsWith(iconRule, "icon-") ? ("icon-" + iconRule) : iconRule,
                path = this.cdnPath || this.resourcePath;
    
            if (!this.hasCssClass(id)) {
                if (icon.url) {
                    buffer.push(Ext.net.StringUtils.format(".{0}{background-image:url(\"{1}\");background-repeat:no-repeat;}", id, icon.url));
                } else {                        
                    if (path) {
                        buffer.push(Ext.net.StringUtils.format(templateCdn, id, path, iconName));
                    } 
                    else {
                        buffer.push(Ext.net.StringUtils.format(templateEmb, id, appName, iconName));
                    }                        
                }
    
                this.cssClasses[id] = true;
                this.cssIcons[icon.name] = true;
            }
        }, this);
    
        if (buffer.length > 0) {
            this.registerCssClass("", buffer.join(" "), false);
        }
    };
    Last edited by Daniil; Mar 05, 2014 at 9:19 AM.
  3. #3
    hmm...we actually use iconCls in our application with our icons defined with !important also. We use a different icon set than Ext.NET. I hope there's a solution with iconCls. I only used icon in my example to quickly show the issue.
  4. #4
    We committed a fix for now. The default ExtJS CSS rule of a loading icon was made stronger with an "!important" statement.


    Though, using "!important" is a poor practice. It might be not required anymore since the ExtJS/Ext.NET CSS were improved.

    We hope to refuse from the "!important" statement for our icons. Sure, if it won't cause another issues.

    Probably, we will make this change after v2.2 release to have enough time for testing. Certainly, after this change we will revert the current temp fix back.

    Could you clarify why do you use "!important" statement for your icons?


    I created an Issue for this defect.
    https://github.com/extnet/Ext.NET/issues/206
  5. #5
    Quote Originally Posted by Daniil View Post
    Could you clarify why do you use "!important" statement for your icons?
    We copied what Ext.NET outputted =P. Does the fix apply to using iconCls or is it only when using icon?
  6. #6
    Also, we have a single file where we store ALL our icons because we can have over 20 icons on the page, and having Ext.NET generate those styles and inject them onto the page seems like an overhead we can avoid with a cached icon.css file.
  7. #7
    Quote Originally Posted by jchau View Post
    We copied what Ext.NET outputted =P.
    Ah. OK:) It was required earlier, but might be not required anymore.

    Quote Originally Posted by jchau View Post
    Does the fix apply to using iconCls or is it only when using icon?
    Yes, it affects on the iconCls config. Generally, the Icon property is rendered as an iconCls config.

    Quote Originally Posted by jchau View Post
    Also, we have a single file where we store ALL our icons because we can have over 20 icons on the page, and having Ext.NET generate those styles and inject them onto the page seems like an overhead we can avoid with a cached icon.css file.
    A nice approach, but I doubt we can leverage it for our set of icons. It is too many.
  8. #8
    I don't think we are going to change anything here in Ext.NET v2.x, because removing "!important" would be a breaking change.

    Maybe, we will review it for next major release.

Similar Threads

  1. about Treenode.Appendchild's icon
    By helpme in forum 1.x Help
    Replies: 0
    Last Post: Mar 09, 2010, 7:57 AM
  2. Replies: 0
    Last Post: Dec 10, 2009, 11:14 AM
  3. [CLOSED] TreeNode Icon
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 25, 2009, 12:22 PM
  4. [CLOSED] TreeNode Icon
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 29, 2009, 7:28 AM
  5. Treenode Icon
    By DasPhansom in forum 1.x Help
    Replies: 1
    Last Post: Jan 28, 2009, 11:57 AM

Posting Permissions