PDA

View Full Version : [CLOSED] [#206] Setting custom icon on treenode removed loading icon



jchau
Apr 14, 2013, 9:25 PM
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>

Daniil
Apr 15, 2013, 5:38 AM
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);
}
};

jchau
Apr 15, 2013, 12:27 PM
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.

Daniil
Apr 15, 2013, 2:50 PM
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

jchau
Apr 15, 2013, 2:56 PM
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?

jchau
Apr 15, 2013, 2:57 PM
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.

Daniil
Apr 16, 2013, 4:35 AM
We copied what Ext.NET outputted =P.

Ah. OK:) It was required earlier, but might be not required anymore.


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.


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.

Daniil
Mar 05, 2014, 9:42 AM
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.