Ext.Net – Register Icons embedded into the Toolkit Assembly on client-side

As I am using more of Ext.Net/Coolite toolkits, I find myself delegating some of the UI creation from server-side markup to client-side javascript. This allows me to reuse the code better across different projects, plus enables me to introduce more dynamicity in the User Interface without needing to send unnecessary code generated from the server-side markup to the client.

In one of such scenarios recently, I needed to show Icons from the toolkit (that are actually embedded into the assembly and extracted through ASP.NET Resource Handlers). As the UI  was generated from client-side, I could not use the familiar Icon=”IconName” attribute in UI components for registering the Icon classes on the Page. You might also be aware here that you can register Icons in code-behind also using ResourceManager.RegisterIcon(Icon.IconName). However, as my UI generation code was completely client-side javascript, I did not wanted it to have any dependency on server-side code what-so-ever.

Fortunately, I was able to figure out a solution after some playing around. Ext.Net/Coolite support clean urls for embedded resources, and I was able to create re-usable methods to be able to easily register icons on the client side. Here are those methods:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }registerExtEmbeddedIcons = function(baseUrl, icons) {
var s = ”;
for (i = 0; i < icons.length; i++) {
s += ‘.icon-‘ + icons[i].replace(‘_’, ”) + ‘{background-image:url(‘ + baseUrl + ‘icons/’ + icons[i] + ‘-png/ext.axd) !important;}\n’;
}
Ext.util.CSS.createStyleSheet(s);
}

registerExtTriggerEmbeddedIcons = function(baseUrl, icons) {
var s = ”;
for (i = 0; i < icons.length; i++) {
s += ‘.x-form-field-wrap .x-form-‘ + icons[i].replace(‘-‘, ”) + ‘-trigger’ + ‘{background-image:url(‘ + baseUrl + ‘ux/extensions/triggerfield/images/’ + icons[i] + ‘-gif/ext.axd);cursor:pointer;}\n’;
}
Ext.util.CSS.createStyleSheet(s);
}{/syntaxhighlighter}

Here the first of the methods register the Regular Icons from the FamFamFam silk set. You might be able to recall that you can specify Icons for Triggers of Trigger Controls (ComboBox, TriggerField etc.).

The second of the methods above allow you to register icons for those Triggers. baseUrl in these methods is the Url of your ASP.NET application. Here’s how you can invoke these methods:

 

registerExtEmbeddedIcons('http://localhost/app/', ['printer', 'door_in',
    'resultset_first', 'resultset_previous', 'resultset_next', 'resultset_last',
    'page_go', 'find',
    'add', 'delete']);
registerExtTriggerEmbeddedIcons('/app/', ['simple-go']);

 

Notice that the icons arguement is an array. The icon names should be completely in small-case. Also, for multi-word Fam Fam Icons (e.g. DoorIn), the words should be separated by an underscore (e.g. ‘door_in’). The pattern is icon_name. However, for multi-word Trigger Icons, the words should be separated by a hyphen (e.g. ‘simple-go’). The pattern here is icon-name.

You should now be able to specify iconCls for the registered icons on UI components. See the example below:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }new Ext.Button({ iconCls: “icon-resultsetfirst”, tooltip: “First” });

Ext.ComponentMgr.create({ xtype: “nettrigger”, emptyText: “Email address”, triggersConfig: [{ iconCls: “x-form-simplego-trigger”, qtip: “Email Report”}]});{/syntaxhighlighter}

Again, it is important to note the iconCls name patters above. For regular icons, it is icon-iconname, in completely small-case and nothing in between the words for multi-word icon names.

For trigger icons, the pattern is x-form-iconname-trigger – Completelty in small case, and nothing in between words for multi-word icon names.

I could have simplified the naming convention, but I chose to stick with how Ext.Net chooses names for icon classes to be consistent.

Finally, for the above code to work, you must have clean urls enabled for Ext resources in your web.config. Here’s the markup for that:

 

	<system.web>
		<httpHandlers>
			<add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
</httpHandlers>
		<httpModules>
			<add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
		</httpModules>
	</system.web>


	<system.webServer>
		<modules>
			<add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net"/>
		</modules>
		<handlers>
			<add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler, Ext.Net"/>
		</handlers>
	</system.webServer>

 

The above markup is for Ext.Net 1.0 & later. Let me know if you are interested in the corresponding web.config markup for previous (Coolite) versions. <system.web> entries are for IIS 6 & earlier, whereas <system.webServer> entries are required for IIS 7.

The attached file demonstrates the usage of above methods to register icons on the client-side.