This mini tutorial will enable you to use the default functionality of ASP.NET TextBox and ASP.NET Button with client side validation using ExtJs.

Lets start with making a ASP.NET page with 2 TextBox and 1 Button.

<div class="Form">
	<fieldset class="Form">
		<asp:Label ID="Label1" AssociatedControlID="TextBox1" runat="server" Text="Text Field 1" CssClass="lblTextField"></asp:Label>
		<asp:TextBox ID="TextBox1" runat="server" CssClass="textField"></asp:TextBox>

		<br />
		<asp:Label ID="Label2" AssociatedControlID="TextBox2" runat="server" Text="Text Field 2" CssClass="lblTextField"></asp:Label>
		<asp:TextBox ID="TextBox2" runat="server" CssClass="textField"></asp:TextBox>

		<br />
		<asp:Button ID="Button1" runat="server" Text="Button" />
	</fieldset>
</div>

We want to use unobtrusive javascript. So we will start with writing our code within Ext.onReady event. This event ensures that all DOM has been loaded and this is faster than window.onload event.

        Ext.onReady(function(){
                // write your code here
        });

Now use the functionality of DomQuery to find all text boxes having a particular class on our page. DomQuery helps you in finding element using CSS3 selectors. ExtJs has optimized this for each browser so this is faster and convenient than regular techniques.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");
        });

Above code returns us an array of all ASP.NET TextBoxes having class textField. We loop through each of these TextBoxes and make an Ext TextField against each ASP.NET TextBox.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");

            // An array to keep track of all ExtJs Text Fields
            var ExtTextFields = Array();

            // Now loop through each element and make it Ext TextField
            Ext.each(textBoxes,function(item,index,allItems){
                ExtTextFields[index] = new Ext.form.TextField();
            });
        });

But we dont want to make a separate TextField. We want to convert ASP.NET field into ExtJs TextField without changing its default behavior. This can be archived by using configuration settings of TextField.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");

            // An array to keep track of all ExtJs Text Fields
            var ExtTextFields = Array();

            // Now loop through each element and make it Ext TextField
            Ext.each(textBoxes,function(item,index,allItems){
                ExtTextFields[index] = new Ext.form.TextField({
                     allowBlank : false,
                     applyTo : item
                });
            });
        });

Now we have perfectly working ASP.NET TextBoxes which have client side validation of required field using ExtJs. Lets add some more functionality to this. Now we want to disable the ASP.NET button if the TextBoxes are left empty and enable it if all the TextBoxes are filled in. This functionality will be archived by writing handlers for ExtJs TextField custom events onValid and onInvalid.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");

            // An array to keep track of all ExtJs Text Fields
            var ExtTextFields = Array();

            // Now loop through each element and make it Ext TextField
            Ext.each(textBoxes,function(item,index,allItems){
                ExtTextFields[index] = new Ext.form.TextField({
                     allowBlank : false,
                     applyTo : item
                });

                // add an event to disable the submit button when there is no text in the field
                ExtTextFields[index].on("invalid",function(evt,target,opts){
                    Ext.get("Button1").set({disabled:true});
                });

                // add an event to enable the submit button when both fields have some value
                ExtTextFields[index].on("valid",function(evt,target,opts){
                    var flagDisableButton = false;
                    Ext.each(ExtTextFields,function(t,i,a){
                        // if any of the field is not valid, set flag to false
                        if(t.isValid() == false) {
                            flagDisableButton = true;
                        }
                    });
                    Ext.get("Button1").dom.disabled = flagDisableButton;
                });

            });
        });