Introduction to ExtJs - Beginners Guide

Views:
 
     
 

Presentation Description

Beginning your first step with ExtJS has been simplified to most possible extent. This presentation gives you much information about how to understand quickly the concepts required to begin with ExtJS.

Comments

By: gchandran (41 month(s) ago)

Thanks. It looks good..

Presentation Transcript

Beginning ExtJS with ASP.Net : 

Beginning ExtJS with ASP.Net A simplified guide By NithyaVidhyaarthi Lesson 01 – Part two

Purpose & Pre-requisites : 

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. 11/05/2010 2 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Purpose & Pre-requisites : 

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. 11/05/2010 3 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

How this tutorial is organized? : 

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 with reference to the number in the “Glossary” section. TIP 11/05/2010 4 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Introduction to ExtJS : 

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. 11/05/2010 5 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Points to remember : 

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. 11/05/2010 6 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

How do we begin? : 

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). 11/05/2010 7 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Exploring Folder structure of ExtJS : 

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. 11/05/2010 8 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Exploring Folder structure… : 

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 ) 11/05/2010 9 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Walking the first step… : 

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). 11/05/2010 10 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Files to be linked : 

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> 11/05/2010 11 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Explaining the files to be linked … : 

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. 11/05/2010 12 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Order of linking the files… : 

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. 11/05/2010 13 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Can I add more files? : 

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 Website optimizations techniques for CSS & java script. Those tips are potential information for all web application developers. TIP 11/05/2010 14 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Important : 

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. 11/05/2010 15 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Finishing up links… : 

Finishing up links… Link the ext-all.css at header. Add ext-base.js, followed by ext-all.js Our custom .js file. You can still add *.js files, if required. You can add your custom *.css files, if required. 11/05/2010 16 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Our first Hello Ext!!! : 

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 }); }); 11/05/2010 17 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Run towards Hope… : 

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. 11/05/2010 18 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Hello World with ExtJS… : 

Hello World with ExtJS… Eureka!!!, there we go…  11/05/2010 19 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

What if anything had went wrong? : 

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

Fixing & Wrapping it up all… : 

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. 11/05/2010 21 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

A close look at our code & output : 

A close look at our code & output Our code Ext.MessageBox.show({ title:’My Message’ , msg:’My first Hello world using Ext…’ , buttons: Ext.MessageBox.OK , icon: Ext.MessageBox.INFO }); Output (edited image generated as output). The values we specified appear as expected in the output. Kindly correlate the input values & output in the “name: value” format. 11/05/2010 22 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Analyzing code & output... : 

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. 11/05/2010 23 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Analyzing code… : 

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. 11/05/2010 24 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Additional Info on config objects : 

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. TIP 11/05/2010 25 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Looking at an Asynchronous Ext! : 

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

When Ext.onReady() fires? : 

When Ext.onReady() fires? Client browser Web Server ASP.Net Life Cycle Parsed contents Browser generates the page On after generation, Ext.onReady() fires 1 2 3 6 5 4 27

Explaining the sequence… : 

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. 11/05/2010 28 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Explaining the sequence… : 

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. 11/05/2010 29 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Explaining the sequence… : 

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. 11/05/2010 30 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

onReady & Async nature : 

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. 11/05/2010 31 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Exploring Async nature with VS2008 : 

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. 11/05/2010 32 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Conclusion : 

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. 11/05/2010 33 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Glossary : 

Glossary 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). 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 11/05/2010 34 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Glossary : 

Glossary 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. DOM: Document Object Model. The layout of web form constructed by the browser (using / not using output generated by web-server). CSS: Cascading Style Sheets. A document that contains all the style definitions for a website. 11/05/2010 35 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Glossary : 

Glossary IDE: Integrated Development Environment: Denotes a single application / program that is suitable for more than one development activity. Example: Visual Studio UI: User Interface 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. 11/05/2010 36 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Glossary : 

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’ 11/05/2010 37 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

With Thanks… : 

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. 11/05/2010 38 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Past & Present : 

Past & Present 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. Past: “Beginning ExtJS with ASP.Net” Present: “Beginning ExtJS with ASP.Net” (Part two) 11/05/2010 39 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Next in the Series… : 

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. 11/05/2010 40 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Contact me via : 

Contact me via Mail: arunprasadnva@gmail.com arun85prasad@gmail.com 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 11/05/2010 41 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

Disclaimer : 

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. 11/05/2010 42 Beginning ExtJS with ASP.NET - Lesson 01 - Part two

authorStream Live Help