Beginning ExtJS with

ASP.Net
Lesson 01 – Part two

A simplified guide

By NithyaVidhyaarthi
 Purpose & Pre-requisites
• This tutorial is intended to help developers who
would like to take up ExtJS as their major tool for
web application development.
• This tutorial uses Ext 3.1.1 version for visual
clarifications. While most contents are still
appropriate, it is strongly suggested for the
observer to pay attention to the “changes.html”
bundled with every release to cross-verify new
updates/ deprecation(s) if any.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 2
Part two
 Purpose & Pre-requisites
• This tutorial assumes that you have basic
knowledge over java-script, HTML, CSS, DOM,
XML HTTP Requests (XHR), Internet
Information Services (IIS).
• Should you feel that you fell short in any of
above the mentioned, kindly have a good look
at those technologies / concepts, to have
better & improved understanding of Ext.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 3
Part two
 How this tutorial is organized?
• Introduction
• Subject
• Conclusion
• Glossary
• Disclaimer
Note: You would find words with superscripts like
“IDE1”. You can find the meaning for such words
TIPreference to
with the number in the “Glossary”
section.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 4
Part two
 Introduction to ExtJS
ExtJS is a java-script framework (client-side1)
that enables developers to develop Rich Internet
Applications2 (RIA) (static websites or data-
driven3 applications) with a plethora of options.
ExtJS has a huge collection of controls (ranging
from textboxes to highly sophisticated UI
Controls) along with a brilliant demo +
examples.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 5
Part two
 Points to remember
• Since ExtJS is a java-script framework, all of
the java script rules are applicable for ExtJS.
• ExtJS makes excellent & extensive use on
DOM4, CSS5 etc. It is highly recommended at-
least to have a look at basic HTML, DOM, CSS
& XML HTTP Requests (XHR).
• ExtJS is case-sensitive, i.e., a != A
• ExtJS is “Asynchronous” by default.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 6
Part two
 How do we begin?
• Download the latest version of ExtJS from
www.extjs.com/download
• Unzip the downloaded file using any file
compression utility (Winzip / WinRAR).
• It is strongly recommended that you create a
virtual directory for the unzipped folder (since
certain examples work only if accessed via
website / virtual directory).

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 7
Part two
 Exploring Folder structure of ExtJS
• The unzipped files look like this (the
folder structure might slightly differ based on
the version of ExtJS you download).
• adapter: This folder contains the core
engine files (basic foundation) of
ExtJS. Also provides interaction with
other libraries like YUI, jQuery etc.
• docs: This contains the complete UI7
documentation for ExtJS. This is an
excellent source of information.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 8
Part two
 Exploring Folder structure…
• examples: A must-see list of well
categorized brilliant demo of Ext
examples.
• resources: Contains all CSS,
images, sprites required by Ext.
• src: Contains all the source files
of ExtJS. (Altering & playing with
these (“src”) files are strictly for
advanced professionals )
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 9
Part two
 Walking the first step…
• Launch the Visual Studio IDE6
and create a new website (Do
not worry about the framework
version).
• Add the ExtJS files into a folder
named say, “ExtJS” within the
newly created website.
Note: You can create a folder with any name of
your preference, not necessarily “ExtJS” as
depicted here. Name of website & this folder need
not be similar (No correlation exists).
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 10
Part two
 Files to be linked
• Add links to all the highlighted
files. These files are very much
important to set-up the ground
work for our application.
• Example (in default.aspx):
<link href="ExtJS/resources/css/ext-all.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" language="javascript"
src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript"
src="ExtJS/ext-all.js"></script>
<script type="text/javascript" language="javascript"
src=“Scripts/default.js"></script>
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 11
Part two
 Explaining the files to be linked …
• ext-base.js: This file is the driving engine of Ext.
This file is very important & cannot be skipped.
• ext-all.js: This file contains all the defined UI
elements (like textbox, combo, button, grid etc…) found
in the samples & demo link (except ux5 type controls).
Using this file is highly recommended for
beginners. Advanced professionals can replace this
with a custom build file.
• ext-all.css: Responsible for the default blue theme
of ExtJS.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 12
Part two
 Order of linking the files…
CSS:
• Link the “ext-all.css” at the header section of the
aspx page.
Java script files:
• ext-base.js must be linked at the first place.
• ext-all.js (or) your custom build file should follow
next.
• Additional *.js files, as required by your
application can follow next.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 13
Part two
 Can I add more files?
• Of course, you can. You are free to add as
many files required by your application. Also
kindly make sure that, the files you create
does not affect the existing CSS class
definitions (or) java script variables, xtype, etc.
When you add more & more JS files & CSS files,
it is also recommended to have a look at
TIP Website optimizations techniques for CSS &
java script. Those tips are potential information
for all web application developers.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 14
Part two
 Important
• Start editing the default.aspx & remove form
elements with “runat = server” attribute.
• Make sure that no form elements within body
has “runat = server” attribute.
• This attribute removal step is applicable to all
web forms you add to your web application.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 15
Part two
 Finishing up links…

Link the ext-all.css at header.

You can add your custom *.css files, if required.

Add ext-base.js,
followed by ext-all.js

Our custom .js file.

You can still add *.js files, if required.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 16
Part two
 Our first Hello Ext!!!
Add a java script named “default.js” and place it within a
folder named “Scripts” within the root directory.
Start editing your default.js file and add / copy & paste the
following contents.
Ext.onReady(function(){
Ext.MessageBox.show({
title: ’My Message’
, msg: ’My first Hello world using Ext…’
, buttons: Ext.MessageBox.OK
, icon: Ext.MessageBox.INFO
});
});
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 17
Part two
 Run towards Hope…
• Verify again, whether you had added the links
to the java-script files and CSS files correctly.

• Now press the F5 key (or) the “debug” icon in

the Visual Studio Standard Toolbar, to execute
the application.
• If everything is right, you would certainly see
the image as in the next slide.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 18
Part two
 Hello World with ExtJS…

Eureka!!!, there we go… 

Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 19
Part two
 What if anything had went wrong?
If Ext java-script files If CSS files are not linked
are not linked properly, properly, you would see
you would see this. this.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 20
Part two
 Fixing & Wrapping it up all…
• In case if you face any troubles as in the
previous images, kindly correct the links (refer
slide-9) and re-execute the application till you
succeed.

• Following slides would show more

information on Ext.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 21
Part two
 A close look at our code & output
Our code Output

Ext.MessageBox.show({ (edited image generated as

title:’My Message’ output).
, msg:’My first Hello
world using Ext…’
, buttons:
Ext.MessageBox.OK
, icon:
Ext.MessageBox.INFO
}); The values we specified appear as expected in the output. Kindly
correlate the input values & output in the “name: value” format.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 22
Part two
 Analyzing code & output...
• Unlike the traditional alert box, Ext Messagebox can
be highly customized. This is the flexibility ExtJS offers
for developers. It is recommended to take a look at the
Message box example in the Ext virtual directory you
configured for Ext.
• And, as you might have observed, displaying a
message box requires you to specify every piece of
information, in the “name: value” format (Example:-
title:’ My Message’). This “name: value” would be
followed through out Ext programming.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 23
Part two
 Analyzing code…
• In our Ext.MessageBox example, all the four
“name: value” pairs are passed within a pair of
curly braces “{ }” to the .show() method of Ext.

Ext.MessageBox.show( { title:’Hello World’ } );

• The yellow highlighted part is called as “config”

object (or) “configuration object”, since this is the
deciding authority & instructs Ext, as how to
render (display) the Ext Message box.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 24
Part two
TIP Additional Info on config objects
• More than one items within a config object are
comma “,” delimited (separated using a comma).
• Almost all Ext components have config objects,
mostly passed as constructors. Nesting of config
objects are permitted.
• Take care to close the curly braces / square
braces in the descending order in which they are
opened, i.e., last opened bracket is closed first.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 25
Part two
 Looking at an Asynchronous Ext!
Ext.onReady(function(){ • As denoted at the
// rest of code follows beginning of this lesson,
}); Ext is asynchronous (by
default).
What is Ext.onReady() ?
• The code within the
Is is an event. “onReady”
function would execute
is the first event that
only after the “onReady”
fires when the DOM is
event.
constructed by the
browser. • Understanding the async
nature makes a long step
in programming with Ext.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 26
Part two
 When Ext.onReady() fires?

ASP.Net Life
Client browser Web Server
Cycle

1 2 3

On after
Browser
generation,
generates the Parsed contents
Ext.onReady()
page
fires

6 5 4 27
 Explaining the sequence…
• 1 to 2: The client browser makes a request to a
web page at the web-server.
• 2 to 3: Web server acknowledges the request,
loads the page & executes it. Execution
includes all server side application logic (making
DB calls / file IO etc) in .net compliant language.
• @ stage 3: This shows the life cycle of any web-
form from “PreInit” event to “Unload” event.
Note: Explaining the ASP.Net life cycle here, is considered as “out of scope”
with this tutorial. While the life cycle has less impact on ExtJS applications, it is
good to have knowledge about the ASP.net life cycle.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 28
Part two
 Explaining the sequence…
• @ stage 4: Once all server-side events are fired
and execution is completed, web server constructs
the output form with all required CSS, js files and
sends the contents to the browser.
• @ stage 5: Browser receives the contents sent by
server, parses & generates the page, and finally
renders to the user.
• Once all the HTML elements are generated, the
DOM is said to be ready. All the js files linked with
the page, are cached in the local machine.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 29
Part two
 Explaining the sequence…
• @ stage 6: Once all the js files are completely
cached locally & the DOM is ready, the
Ext.onReady() event fires.
• It is at this stage, the ExtJS code is loaded from
the js files and the UI is rendered / front end
execution begins.
• ExtJS codes are loaded & executed in the order
in which the js files are linked in the aspx page.

04/11/21 Beginning ExtJS with ASP.NET - Lesson 01 - Part two 30

 onReady & Async nature
• Like any Ext application, in our “Hello world”
example, the message box code executes only
after Ext.onReady() event.
• Thereby care must be taken as to know &
understand, when the components are
rendered and when & how they are available for
accessibility.
• Failing to do this, would throw “Ext.getCmp(‘’) is
null or not an object” script error message.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 31
Part two
 Exploring Async nature with VS2008
• Microsoft Visual Studio 2008 offers great support
for debugging java script files. Kindly make a
breakpoint in the java script file (“default.js” in our
case) and observe how the program execution is
sequenced.

• It is strongly recommended that you take your time

to settle yourself with this asynchronous nature. It
would be greatly helpful in the long run.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 32
Part two
 Conclusion
• Hi, I’m happy to have you attention till now
and am all the more happy if you let me know
me how far this tutorial had helped you grasp
the basics of ExtJS, and let me know how the
information can be conveyed in an improved,
easy-to-read & understand format, how can I
adjust my way of conveying information so
that no vital info is missed.
• Thank you once again.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 33
Part two
 Glossary
1. client-side: Client-side scripting generally refers to
the type of computer programs on the web that
are executed client-side, by the user's web
browser, instead of server-side (on the web
server).
2. RIA (Rich Internet Application): RIAs are web
applications that have many of the characteristics
of desktop applications, typically delivered either
by way of a site-specific browser, via a browser
plug-in, or independently via sandboxes or virtual
machines
04/11/21
Beginning ExtJS with ASP.NET - Lesson 01 -
34
Part two
 Glossary
3. Data-driven applications: An application /
website that stores/ retrieves/ manipulates data
and the nature of output depends on the value
of data, and subjected to change with time.
4. DOM: Document Object Model. The layout of
web form constructed by the browser (using / not
using output generated by web-server).
5. CSS: Cascading Style Sheets. A document that
contains all the style definitions for a website.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 35
Part two
 Glossary
6. IDE: Integrated Development Environment:
Denotes a single application / program that is
suitable for more than one development
activity. Example: Visual Studio
7. UI: User Interface
8. ux: User Extensions. These files are either user
defined plugins (or) custom/value added
controls created by Ext users / community.
These files also ship with Ext.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 36
Part two
 Glossary
9. xtype: “xtype” means control type. This
specifies the controls (like textfield, button,
label, combobox, etc )we use in our
application.
– example: xtype: ‘textfield’

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 37
Part two
 With Thanks…
• Hi, I’m happy to have you attention till now and
am all the more happy if you let me know me
how far this tutorial had helped you grasp the
basics of ExtJS, and just let me know how the
information can be conveyed in an improved,
easy-to-read & understand format, how can I
adjust my way of conveying information so that
no vital information is missed.
• Thank you once again.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 38
Part two
 Past & Present
Past: “Beginning ExtJS with ASP.Net”
Present: “Beginning ExtJS with ASP.Net” (Part two)
• Unlike the previous tutorial, the 14 slide tutorial,
which is the part one of this series, I had tried to
convey additional information wherever
possible.
• Though conscious efforts are made as not to slip
away from the actual approach, I would really
appreciate any such notifications from you.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 39
Part two
 Next in the Series…
Designing a user login panel with Ext.

Tentative date: 30-04-2010

The next tutorial would explain how to use controls
like textboxes, buttons to create and use a simple login
form.

Check out for further releases…

This date is an approximate estimation and is subjected to change without prior
notification.

Beginning ExtJS with ASP.NET - Lesson 01 -

04/11/21 40
Part two
 Contact me via
Mail:
[email protected]
[email protected]
Social network(s) / Services:
arunprasadvidhyaarthi – skype, slideshare.com
Arun85prasad – twitter, gmail, live, yahoo.com
Arun Prasad - facebook, orkut
Arunprasad – scribd.com
Mobile:
+91 93446 20159
04/11/21
Beginning ExtJS with ASP.NET - Lesson 01 -
41
Part two
 Disclaimer
The names of Technologies, Product(s),
Companies, Application(s), Tool(s), Utilities, etc
provided with this material are intended to
reference only. The name(s), brand name(s),
trademark(s), registered trademark(s), logo(s),
slogan(s) belong to their respective owners in
the respective countries.
Beginning ExtJS with ASP.NET - Lesson 01 -
04/11/21 42
Part two