We all love Ext.Net, isn’t it? Well, ExtJs brought the power of Desktop controls to web on the client-side, and Ext.Net (also known as Coolite) extended that power to the server-side with its server-side wrapper controls to the client-side ExtJs controls.

However, one thing that I particularly dislike about Ext.Net controls is the deep nesting of controls and inner properties in markup, which often takes the markup way far towards the right of the editor screen when properly indented, making it unreadable at times.

However, it seems like the Ext.Net team has recognized this issue of their users and they are making up by allowing us to now specify many options on controls directly as properties, which earlier used to be Inner properties of these controls.

A prime example is the Layout property on all Container controls, which avoids unnecessary nesting while placing controls inside containers. And another is the button control, with its OnClientClick & Handler properties.

Well, the Ext.Net team realized that usually the programmer is only interested in the Click Listener of a button while placing an instance of it on the page. And it was an unnecessary typing effort creating the inner <Listeners> property on every button you place on the page, only to put a single <Click> listener inside the listeners collection.

So, they now provide us the OnClientClick & Handler properties for the button. As is obvious, both of them are for placing code which should be executed when the corresponding button is clicked. However, it is important to notice the difference between these 2 properties:

• OnClientClick – This property corresponds to the Handler property of the click listener. What this means is that you can directly place your javascript code here that should be executed when the button is clicked.
  You can also use the convenient TokenIds of the form #{Control} that you are used to, inside this property. Remember, you can also place multiple js lines inside this property separated by semi-colons.
• Handler –  This property corresponds to the Fn property of the click listener. What this means is that this should be the fully-qualified name of the javascript function you want to be called when the button is clicked. This should be the function reference, and therefore, without the round brackets after the function name (as you specify in the Listener Fn property).

You should not specify both these properties together on the button. Also take care about what has been said above (which is counter-intuitive). What has been said about the Handler property above for the Button corresponds to the Fn property when specified as a regular listener. Ext.Net team chose to do it this way to be consistent with the ExtJs config options probably.

Lastly, the full control over these options (like Layout, or Handler etc.) can still only be realized when specified regularly as nested properties. There you are able to specify things like Buffer, Delay etc. for the Click Listener, which cannot be specified this way. So, if you want to specify them, go the traditional Ext.Net way of inner properties.