• On-Demand Paging using ExtJS Grid with Client-Centric ASP.NET AJAX (WebMethods)
• Adding server side sorting to ExtJS Grid using WebMethods in ASP.NET

Today, we are going to deal with other Data types like DateTime, Boolean, Currency et cetera. For this purpose, ExtJs ColumnModel provides and excellent config option renderer

Lets start with builtin format options of ExtJs.

// create the grid
        var grid = new Ext.grid.EditorGridPanel({
            el:'grid-employees',
            width:650,
            height:300,
            title:'Sample Employees',
            store: store,
            stripeRows: true,
            loadMask: true,
            enableHdMenu: false,

            // grid columns
            columns:[{
                id: 'EmployeeID',
                dataIndex: 'EmployeeID',
                hidden:true
            },{
                header: "Login ID",
                dataIndex: 'LoginID',
                width: 150,
                sortable:true

            },{
                header: "Title",
                dataIndex: 'Title',
                width: 200,
                sortable:true
            },{
                header: "Birth Date",
                dataIndex: 'BirthDate',
                width: 100,
                sortable:true
            },{
                header: "Gender",
                dataIndex: 'Gender',
                width: 70,
                sortable:true
            },{
                header: "Salary",
                dataIndex: 'Salary',
                width: 70,
                renderer: 'usMoney',
                sortable:true
            },{
                header: "Salaried",
                dataIndex: 'SalariedFlag',
                width: 50,
                sortable:true
            }],
            // put paging bar on the bottom
            bbar: pagingBar
        });

Notice that for the dataIndex Salary, we have renderer option equal to usMony. This will render all values in this column as usMoney.

Now lets play with some custom renderers. I have written two custom rederers. One is for DateTime object of .NET and the other is for Boolean object.

        // Our own date renderer function
        function formatDate(value){
            return value ? value.dateFormat('F d, Y') : '';
        };

        // Our own boolean renderer
        function formatTrueFalse(value) {
            return value ? '✓': '☓';
        }

These functions are quite simple. They just return the formatted strings to be used in ColumnModel. Now we will use these renderers in our ColumnModel.

        // create the grid
        var grid = new Ext.grid.EditorGridPanel({
            el:'grid-employees',
            width:650,
            height:300,
            title:'Sample Employees',
            store: store,
            stripeRows: true,
            loadMask: true,
            enableHdMenu: false,

            // grid columns
            columns:[{
        	    id: 'EmployeeID',
                dataIndex: 'EmployeeID',
                hidden:true
            },{
                header: "Login ID",
                dataIndex: 'LoginID',
                width: 150,
                sortable:true

            },{
                header: "Title",
                dataIndex: 'Title',
                width: 200,
                sortable:true
            },{
                header: "Birth Date",
                dataIndex: 'BirthDate',
                width: 100,
                renderer: formatDate,
                sortable:true
            },{
                header: "Gender",
                dataIndex: 'Gender',
                width: 70,
                sortable:true
            },{
                header: "Salary",
                dataIndex: 'Salary',
                width: 70,
                renderer: 'usMoney',
                sortable:true
            },{
                header: "Salaried",
                dataIndex: 'SalariedFlag',
                width: 50,
                renderer: formatTrueFalse,
                sortable:true
            }],
            // put paging bar on the bottom
            bbar: pagingBar
        });

And that’s all

Now you will have a beautifully rendered grid.

You can also add images in grid in this way. Try replacing Gender in this example with appropriate icons. I leave this as an exercise for you.

Download the example code

On-Demand Paging using ExtJS Grid with Client-Centric ASP.NET AJAX (WebMethods)

First of all we will add config option sortable:true to all columns we want to be sortable

So, the grid code will look like this:

        // create the grid
        var grid = new Ext.grid.GridPanel({
            el:'grid-products',
            width:405,
            height:300,
            title:'Adventure Works Products',
            store: store,
            stripeRows: true,
            loadMask: true,
            enableHdMenu: false,

            // grid columns
            columns:[{
        	    header: "id",
        	    id: 'ProductID',
                dataIndex: 'ProductID',
                hidden:true
            },{
                header: "Product Name",
                dataIndex: 'Name',
                width: 200,
                sortable:true
            },{
                header: "Product Number",
                dataIndex: 'ProductNumber',
                width: 100,
                sortable:true
            },{
                header: "Safety Stock Level",
                dataIndex: 'SafetyStockLevel',
                width: 100
            }],
            // put paging bar on the bottom
            bbar: pagingBar
        });

Now, you can sort the grid on client side. But this is sorting within a page only. We want to sort the grid for all products which can be achieved by server side sorting only.

Lets make it request the server for sorting. We have to add remoteSort:true to our JsonStore. So the JsonStore code will look like this:

// create the Data Store
        var store = new Ext.data.JsonStore({
            root: 'lstProducts',
            totalProperty: 'RowCount',
            idProperty: 'ProductID',
		    fields: [
                'Name','ProductID', 'ProductNumber', 'ReorderPoint','SafetyStockLevel'
            ],
            remoteSort:true,
            proxy:pmProxy
        });

Now, all of sorting information will go with params to PageMethodProxy as:

• sort having the id of the column
• dir for direction of sorting (it can have values ASC or DESC)

We have to change the PageMethodProxy a little bit to forward this sorting information to WebMethod. After this our PageMethodProxy code will look like this:

Ext.data.PageMethodProxy = function(config){
	Ext.data.PageMethodProxy.superclass.constructor.call(this);
	Ext.apply(this, config);
};

Ext.data.PageMethodProxy.TRANS_ID = 1000;
Ext.data.PageMethodProxy.arr_trans = Array();

Ext.extend(Ext.data.PageMethodProxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg) {
        if(this.fireEvent("beforeload", this, params) !== false){
            var p = Ext.apply(params, this.extraParams);
            var transId = ++Ext.data.PageMethodProxy.TRANS_ID;
            var trans = {
                id : transId,
                params : params,
                arg : arg,
                callback : callback,
                scope : scope,
                reader : reader
            };
            if(typeof p.sort == "undefined")
                p.sort = "";
            if(typeof p.dir == "undefined")
                p.dir = "";

            eval("PageMethods." + this.pageMethod + "(p.start,p.limit,p.sort,p.dir,this.handleResponse)");

            Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID] = trans;
        }
        else{
            callback.call(scope||this, null, arg, false);
        }

    },	

    isLoading : function(){
        return this.trans ? true : false;
    },

    abort : function(){
        if(this.isLoading()){
            this.destroyTrans(this.trans);
        }
    },

    handleResponse : function(o){
        var trans = Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID];
        var result;
        try {
            result = trans.reader.readRecords(o);
        }catch(e){
            this.fireEvent("loadexception", this, o, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        this.trans = false;
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    }
});

Notice that we have added check for undefined sorting parameters. This is the case when no sorting is applied. We have to handle this on client side.

Now finally add the sorting code to the WebMethod which will handle the sorting parameters. The Web Method code will look like this now

    [System.Web.Services.WebMethod]
    public static ProductList GetProducts(int PageNumber,int MaximumRows,string SortColumnName, string SortDirection)
    {
        //calculating the start row index
        int Start = PageNumber + 1;
        //calculating the end row index
        int End = PageNumber + MaximumRows;

        ProductList productList = new ProductList();
        //setting up sql connection to execute the query
        SqlConnection sqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
        sqlConnection.Open();
        //setting up the command object with a parameterized query and sql connection
        using (SqlCommand command = new SqlCommand(GetQuery(SortColumnName,SortDirection), sqlConnection))
        {
            //Creating Sql Start Paramter
            SqlParameter StartParameter = new SqlParameter();
            StartParameter.DbType = DbType.Int32;
            StartParameter.ParameterName = "startRowIndex";
            StartParameter.Value = Start;
            //Creating Sql End Parameter
            SqlParameter EndParameter = new SqlParameter();
            EndParameter.DbType = DbType.Int32;
            EndParameter.ParameterName = "endRowIndex";
            EndParameter.Value = End;
            //Adding Start Parameter to the command object
            command.Parameters.Add(StartParameter);
            //Adding End Parameter to the command object
            command.Parameters.Add(EndParameter);
            //Executing Reader
            using (IDataReader reader = command.ExecuteReader())
            {
                //Creating a list of objects from the fetched rows
                while (reader.Read())
                {
                    productList.lstProducts.Add(ConstructProduct(reader));
                }
            }
        }
        //closing the connection
        sqlConnection.Close();
        //Assigning total row count for the given query so that it can
        //be used by the grid to set up total number of pages
        productList.RowCount = GetRowCount();
        return productList;
    }

    private static String GetQuery(String ColumnName,String SortDirection)
    {

        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append(" SELECT * FROM ( ");
        if(!ColumnName.Trim().Equals(String.Empty) && !SortDirection.Trim().Equals(String.Empty))
            stringBuilder.Append(" SELECT	ROW_NUMBER() OVER (ORDER BY "+ColumnName.Trim().ToUpper()+" "+ SortDirection.Trim().ToUpper()+") AS row_num,ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
        else
            stringBuilder.Append(" SELECT	ROW_NUMBER() OVER (ORDER BY (SELECT 0)) AS row_num,ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
        stringBuilder.Append(" FROM	Product ");
        stringBuilder.Append(" ) AS TempTable WHERE row_num>=@startRowIndex AND row_num<=@endRowIndex ");
        return stringBuilder.ToString();
    }

And thats all. We have successfully added Server side sorting to our existing code. This will work with paging too.

You can download the complete project here:.toString() - ExtJS Serverside Grid Sorting

We start with adding a textbox and a button (We will be converting this textbox to calendar control):

Notice that we are using rel="calendar" here. We do not want to use name or id attribute here because using a master page, we cannot predict client side id or name of the control. Using rel we can safely select multiple controls on client side.

Now we write our javascript. First of all, select all TextBoxes having rel="calendar" using DomQuery:

        Ext.onReady(function(){
            var textBoxes = Ext.DomQuery.select("input[rel=calendar]");
        });

Now loop through each TextBox and convert them to extjs DateField

        Ext.onReady(function(){
            var textBoxes = Ext.DomQuery.select("input[rel=calendar]");
            Ext.each(textBoxes, function(item, id, all){
                var cl = new Ext.form.DateField({
                    allowBlank : false,
                    applyTo: item
                });
            });
        });

And thats all

Now you can get the value of selected date on server side like this:

DateTime.Parse(txtCalendar.Text);

An Illustration of On-Demand Paging Using EXTJS Grid and ASP.NET

Lets start by creating a PageMethod which takes page index and number of required results on a page as parameter and returns an object of ProductList type.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Text;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    /// <summary>
    /// This method will be called from the client side using PageMethods
    /// and its primary responsibility is to fetch records from the database
    /// using that startRowIndex and MaximumRows allowed
    /// </summary>
    /// <param name="PageNumber">Page Number of the grid</param>
    /// <param name="MaximumRows">Page Size</param>
    /// <returns>Rows in the form of a list</returns>
    [System.Web.Services.WebMethod]
    public static ProductList GetProducts(int PageNumber,int MaximumRows)
    {
        //calculating the start row index
        int Start = PageNumber + 1;
        //calculating the end row index
        int End = PageNumber + MaximumRows;
        ProductList productList = new ProductList();
        //setting up sql connection to execute the query
        SqlConnection sqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
        sqlConnection.Open();
        //setting up the command object with a parameterized query and sql connection
        using (SqlCommand command = new SqlCommand(GetQuery(), sqlConnection))
        {
            //Creating Sql Start Paramter
            SqlParameter StartParameter = new SqlParameter();
            StartParameter.DbType = DbType.Int32;
            StartParameter.ParameterName = "startRowIndex";
            StartParameter.Value = Start;
            //Creating Sql End Parameter
            SqlParameter EndParameter = new SqlParameter();
            EndParameter.DbType = DbType.Int32;
            EndParameter.ParameterName = "endRowIndex";
            EndParameter.Value = End;
            //Adding Start Parameter to the command object
            command.Parameters.Add(StartParameter);
            //Adding End Parameter to the command object
            command.Parameters.Add(EndParameter);
            //Executing Reader
            using (IDataReader reader = command.ExecuteReader())
            {
                //Creating a list of objects from the fetched rows
                while (reader.Read())
                {
                    productList.lstProducts.Add(ConstructProduct(reader));
                }
            }
        }
        //closing the connection
        sqlConnection.Close();
        //Assigning total row count for the given query so that it can
        //be used by the grid to set up total number of pages
        productList.RowCount = GetRowCount();
        return productList;
    }
    /// <summary>
    /// Builds the Actual Parameterized Query which handles On-Demand Paging using
    /// ROW_NUMBER() feature given by SQL Server 2005
    /// </summary>
    /// <returns>Parameterized Query</returns>
    private static String GetQuery()
    {

        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append(" SELECT * FROM ( ");
        stringBuilder.Append(" SELECT	ROW_NUMBER() OVER (ORDER BY (SELECT 0)) AS row_num,ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
        stringBuilder.Append(" FROM	Product ");
        stringBuilder.Append(" ) AS TempTable WHERE row_num>=@startRowIndex AND row_num<=@endRowIndex ");
        return stringBuilder.ToString();
    }
    /// <summary>
    /// Builds the Query such that it return the count of the
    /// total number of account the query will select without
    /// paging
    /// </summary>
    /// <returns>Query to return total number of records</returns>
    private static String GetRowCountQuery()
    {
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append(" SELECT COUNT(*) FROM ( ");
        stringBuilder.Append(" SELECT	ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
        stringBuilder.Append(" FROM	Product ");
        stringBuilder.Append(" ) AS TempTable");
        return stringBuilder.ToString();
    }
    /// <summary>
    /// Executes the Actual Query without paging in order to
    /// fetch total number of records
    /// </summary>
    /// <returns>Total Number of records</returns>
    private static int GetRowCount()
    {
        int rowCount;
        SqlConnection sqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
        sqlConnection.Open();
        using (SqlCommand command = new SqlCommand(GetRowCountQuery(), sqlConnection))
        {
            rowCount = Convert.ToInt32(command.ExecuteScalar());
        }
        sqlConnection.Close();
        return rowCount;

    }
    /// <summary>
    /// Constructs Product Entity from the IDataReaer
    /// </summary>
    /// <param name="reader">Reader (Already Executed)</param>
    /// <returns>Product Entity</returns>
    private static Product ConstructProduct(IDataReader reader)
    {
        Product product = new Product();

        int i = reader.GetOrdinal("ProductID");
        if (!reader.IsDBNull(i))
            product.ProductID = reader.GetInt32(i);
        i = reader.GetOrdinal("Name");
        if (!reader.IsDBNull(i))
            product.Name = reader.GetString(i);
        i = reader.GetOrdinal("ProductNumber");
        if (!reader.IsDBNull(i))
            product.ProductNumber = reader.GetString(i);
        i = reader.GetOrdinal("SafetyStockLevel");
        if (!reader.IsDBNull(i))
            product.SafetyStockLevel = Convert.ToInt32(i);
        i = reader.GetOrdinal("ReorderPoint");
        if (!reader.IsDBNull(i))
            product.ReorderPoint = Convert.ToInt32(i);

        return product;
    }
}

Now we include our magical PageMethodProxy on our page.

Ext.data.PageMethodProxy = function(config){
	Ext.data.PageMethodProxy.superclass.constructor.call(this);
	Ext.apply(this, config);
};

Ext.data.PageMethodProxy.TRANS_ID = 1000;
Ext.data.PageMethodProxy.arr_trans = Array();

Ext.extend(Ext.data.PageMethodProxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg) {
        if(this.fireEvent("beforeload", this, params) !== false){

            var p = Ext.apply(params, this.extraParams);

            var transId = ++Ext.data.PageMethodProxy.TRANS_ID;
            var trans = {
                id : transId,
                params : params,
                arg : arg,
                callback : callback,
                scope : scope,
                reader : reader
            };

            eval("PageMethods." + this.pageMethod + "(p.start,p.limit,this.handleResponse)");

            Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID] = trans;
        }
        else{
            callback.call(scope||this, null, arg, false);
        }

    },	

    isLoading : function(){
        return this.trans ? true : false;
    },

    abort : function(){
        if(this.isLoading()){
            this.destroyTrans(this.trans);
        }
    },

    handleResponse : function(o){
        var trans = Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID];
        var result;
        try {
            result = trans.reader.readRecords(o);
        }catch(e){
            this.fireEvent("loadexception", this, o, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        this.trans = false;
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    }
});

You should have following three Javascripts on your page.

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/pagemethods-proxy.js"></script>

We start by making an object of our PageMethodProxy in Ext.onReady

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });
});

Now we make a JsonStore which uses the object of this proxy and specifies properties of Json.

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'lstProducts',
        totalProperty: 'RowCount',
        idProperty: 'ProductID',
	    fields: [
            'Name','ProductID', 'ProductNumber', 'ReorderPoint','SafetyStockLevel'
        ],
        proxy:pmProxy
    });
});

Make a PagingToolbar object to be used in grid.

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'lstProducts',
        totalProperty: 'RowCount',
        idProperty: 'ProductID',
	    fields: [
            'Name','ProductID', 'ProductNumber', 'ReorderPoint','SafetyStockLevel'
        ],
        proxy:pmProxy
    });

    // create paging bar
    var pagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        emptyMsg: "No topics to display"
    });
});

At the end create a grid placeholder div and create the grid object.

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'lstProducts',
        totalProperty: 'RowCount',
        idProperty: 'ProductID',
	    fields: [
            'Name','ProductID', 'ProductNumber', 'ReorderPoint','SafetyStockLevel'
        ],
        proxy:pmProxy
    });

    // create paging bar
    var pagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        emptyMsg: "No topics to display"
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        el:'grid-products',
        width:405,
        height:300,
        title:'Adventure Works Products',
        store: store,
        stripeRows: true,
        loadMask: true,
        enableHdMenu: false,

        // grid columns
        columns:[{
    	    header: "id",
    	    id: 'ProductID',
            dataIndex: 'ProductID',
            hidden:true
        },{
            header: "Product Name",
            dataIndex: 'Name',
            width: 200
        },{
            header: "Product Number",
            dataIndex: 'ProductNumber',
            width: 100
        },{
            header: "Safety Stock Level",
            dataIndex: 'SafetyStockLevel',
            width: 100
        }],
        // put paging bar on the bottom
        bbar: pagingBar
    });

    grid.render();

    // set parameters for initial loading
    store.load({
	    params:{
		    start:0,
		    limit:10
	    }
    });
});

• And thats all
• Cheers, don’t forget to leave comments/feedback
• Download Source Code Here

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;
                });

            });
        });