Hello World in Ext JS and ASP.Net MVC4

Javascript based frameworks has been evolving of late and one of the prominent among them is External Javascript, better known as Ext JS. Unlike some of its competitors like Angular JS, Ext JS distinguishes itself with a rich suite of UI components. It is cross browser compatible. I am delving more into details of Ext JS, and as always, jumping right into the code.

For this post, we would be referring the online version of the ExtJS libraries.

Ok Tim to do some coding. Let’s start by creating a MVC application in Visual Studio.

image

Now open your ‘\Shared\_Layout.cshtml’ and add the following code in the ‘<Head>’ section.

<link rel ="stylesheet" type ="text/css" href ="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css" />

<script type ="text/javascript" src ="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"> </ script >

These lines refers and includes the CSS styles and ExtJS library. Like mentioned earlier in the post, we would be referring on-line version in this tutorial.  The next step is to add the script to call our Hello World Message box.

 

<script type =”text/javascript”>

        Ext.onReady( function () {

            Ext.Msg.alert( “Alert” , “Hello world!” );

        });

</script >

 

Entire ‘<Head’> Section would look like

image

That’s it. You are done. Kick off the application and you will see your first application in ExtJS using Asp.Net

image