ASP.NET: How to call webservice with parameters through extJs HttpProxy class.

In this post I am going to explain how we can call a C# asp.net webservice with parameters through extJs HttpProxy class.

You have to do this:

var storeName = new Ext.data.Store

({

proxy: new Ext.data.HttpProxy

({

url: 'webserviceName/methodName,

method: 'POST'

}),

baseParams: {parameter1: p1,parameter2 p2},

reader: readerName,

});

In webservice you have to write:

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString = false)]

public void GetData(int p1, int p2)

{

// outString is a JSON formated string

Context.Response.Write(outString);

}

Creating application using ExtJs

Ext Js

Ext js is a cross browser JavaScript library for building rich internet application. You can build a high performance user interface with easy to use API. Its object-oriented design patterns influence the relationship and interactions between objects

Creating a application using Ext 2.0

While creating a application there should always be a directory structure. There is a Document Root directory in the server and all other folder relative to it.

Recommended directory structure

./CSS (optionally link)

./ext (link)

./img (link)

./js

Index.html

Link means a link pointing to a real directory where files are stored.

The advantage is that if you have new version of ext or some other files you have to change just the link to point there without changing anything in your application.

• css will hold all stylesheets.
• ext link to Ext JS Library tree.
• img link to your images. It can contain icons subdirectory as well.
• js will hold all javascript files the application is composed of.
• index.html HTML file that is an entry point of your application. You can have different name for this file but there is one application entry point/file.
• optionally you can create a directory or a link for your server side part of the application (like if you are using aspx file it may be ./aspx)

index.html

index.html should link defined in the head sestion for following css and javascript file

./ext/resources/css/ext-all.css

./css/application.css

./ext/adapter/ext/ext-Base.js

./ext/ext-all-debug.js

./application.js

Index.html has all the link defined for css file and javascript file that is required to built a ext application.

ext-all-debug.js include the entire Ext framework. Use ext-all-debug.js for development and ext-all.js for production purpose.

Js/application.js

Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';

Ext.ns('Application');

// application main entry point

Ext.onReady(function() {

//code here

});

• Ext.BLANK_IMAGE_URL point to a image file that is used by Ext as an image hoder and if it point to invalid location you can get various rendering problem.
• You may also need to create a new global object variable for your application (here it is Application).
• Ext.onReady is the main application point. The place where you write your code for application.

css/application.css

This file will contain all css stylesheet.

Using Pre-configured classes

The best approach to write a Ext application is to write extension classes of Ext component that have all configuration option.You have to just pass the configuration object for that.

An example for creating a panel to be used as an application window.

//application.js

var win = new Ext.Window({

title:'Personnel'

,widht:600

,height:400

,items:{xtype:'personnelgrid'}

});

win.show();

Organizing pre-configured calsses

The above code create a javascript object .It should be written in a seprate file(/js/filename.js) and included in index.html as

Production system

For production purpose you do not require debug version of Ext library.

Include

• ext-all.js
• app-all.js and
• application.js (your javascript file application code)

Grid pane demo using ExtJs

Files that has been used from ExtJs site for creating demo

· Js/ext-all.js

· Js/ext-base.js

· Css/ext-all.css

• Div which contain the grid is defined in css file ext-all.css in downloaded folder from ExtJS web site .

Creating a ExtJs Grid Demo

Steps and method that to create Grid Demo define in js/Paging.js are following:

1. First we need to create a Datastore from which the grid is attached and access the record.Datastore fetch record from XML orJson source.

Datastore is created using method

Var objectDataSore = new Ext.data.Store();

In this method specify

1.url of the file to connect to database.

2.Json or XML source.

3.Other things like sorting etc.

2. Define a columnmodel(Information about grid column).Columnmodel method define the column structure for the grid.

Columnmodel can de define as

Var objectColumnmodel=new Ext.grid.columnmodel()

3.Pass the grid Datastore and columnmodel.

var grid = new Ext.grid.GridPanel({

                       ds: objectDataSore,

                       cm: objectColumnmodel

        });

We can also define the columnmodel while creating object of Grid Panel instead of defining in column model.

4. Render the Grid

Grid.render();

5.Load in the data from our data store

objectDataSore.load();

Source code for HTMl file: index.html

Source code for javascript file: application.js

Source code for aspx file: dbaccess.aspx

ExtJS with C#

http://code.google.com/p/extsharp/




"I really love Ext but coding in javascript just gives me the chills. So I went out and found a way to use my favorite js library (Ext) and my favorite programming language (C#) at the same time. By using a project called Script# I am able to write C# code and have it converted into javascript, similar to GWT. Building on that, Script# also allows you to code against external APIs, but you need to create the types, methods, properties, etc. for everything in the javascript library. So what I did was write a little console app that parses all of the ExtJS source files extracting out the script comments and writing C# files for each class. The end result is a programmable C# API to access all of the Ext objects and I threw in a couple new things to make life a little easier."

2007 Ajax Tools Usage Survey Results

Source: Ajaxian

"Prototype and Script.aculo.us are the only toolkits to maintain a lead over the past three years. However, over all there are no clear winners or losers as even the strongest incumbents (i.e., Prototype and Script.aculo.us) are starting too loose ground. Some frameworks initially popular have faded nearly completely out of the market (i.e., xajax and Rico ) while others have have sprung out of nowhere to become leading tookits (i.e., jQuery and Ext JS). The changes over the past three years are easy to see in the stack chart at the end of this blog, which shows the market share of the most popular toolkits - notice how they grow and shrink in market share. That means that the market remains immature."