Archive

Archive for the ‘EXTJS’ Category

Including ExtJS in your Pages

October 28, 2010 Comments off

How to use ExtJS in our Screens/Pages ?

Before we can use Ext in our pages, we need to reference the Ext library files. To do this, we need to include a few of the files provided in the SDK download in the HEAD portion of our HTML page.
<html>
<head>
<title>Example</title>
<link rel=”stylesheet” type=”text/css” href=”lib/extjs/resources/css/ext-

all.css” />
<script src=”lib/extjs/adapter/ext/ext-base.js”></script>
<script src=”lib/extjs/ext-all-debug.js”></script>
</head>
<body>
<!– Nothing in the body –>
</body>
</html>

 

The path to the Ext files must be correct and is relative to the location of our HTML file. These files must be included in the following order:

  1. ext-all.css: The main Ext CSS file.
  2. An external js library file, if needed .
  3. ext-base.js: The Ext ‘adapter.
  4. ext-all.js or ext-all-debug.js: The primary ExtJS library file
  5. A theme file could also be included here, after the main ExtJS CSS file.

 

Setting Up ExtJS

October 26, 2010 Comments off

Everything we will need can be downloaded from the Sencha website, at
http://www.sencha.com/products/js/.

Grab the Ext SDK (Software Development Kit),which contains a tons of useful examples and the API reference. Most importantly, it contains the resources that Ext needs to run properly.

Placing ExtJS:

Once you get the SDK file, unzip it onto your hard drive, preferably in its own folder. My approach to folder naming conventions is based on the standard Windows structure where all libraries go into a lib folder. So for the sake of the examples in this post , uncompress all of the files in the SDK into a folder named lib.

After extracting everything from the SDK download file, your directory tree should look like this:

Included in the SDK file are a specification of dependencies, documentation, example code, and more. The adapter and resources folders are required for ExtJS to work properly; everything else is just for development purposes.

1. adapter: Files that allow you to use other libraries along side ExtJS.

2. build: Files that can be used to custom-build an ext-all.js.

3. docs: The documentation center (this will only work when run on a web server)

4. examples: Plenty of amazing and insightful examples.

5. resources: Dependencies of the Ext library, such as CSS and images.

6. source: The complete source code for Ext.

When you’re ready to host your page on a web server, the adapter and resources folders will need to be uploaded to the server.

Categories: EXTJS Tags: , , , ,

ExtJS- Not just another JavaScript library

October 25, 2010 Comments off

Ext is not just another JavaScript library—in fact, Ext can work alongside other JavaScript libraries by using adapters.We’ll see how to work with adapters in my later Posts.

Typically, we would use Ext in a web site that requires a high level of user
interaction—something more complex than your typical web site. A web site that requires processes and a work flow would be a perfect example.

Ext makes web application development simple by:

  1. Providing easy-to-use cross-browser compatible widgets such as windows,grids, and forms. The widgets are already fine-tuned to handle the intricacies of each web browser on the market, without us needing to change a thing.
  2. Interacting with the user and browser via the EventManager, responding to the users keystrokes, mouse clicks, and monitoring events in a browser such as a window resize, or font size changes.
  3. Communicating with the server in the background without the need to
    refresh the page. This allows you to request or post data to or from your
    web server using AJAX and process the feedback in real time. [The term AJAX (Asynchronous JavaScript and XML) is an overly-complicated
    acronym for saying that processes can take place in the background while the user is performing other tasks. A user could be filling out a form while a grid of data is loading—both can happen at the same time, with no waiting around for the page to reload].

Introduction to ExtJS

July 19, 2010 Comments off

ExtJS can be defined as a client side JavaScript framework which can be used for developing web applications. Ext has several licensing options like Commercial license, Open Source LGPL License or OEM/Reseller License. Ext can run as a client-side framework, against any server platform like PHP, Java, .NET and many more.

Ext also provides Ajax support, animation, HTML document object model (DOM) manipulation, event handling etc. For more information on licensing and to download the mandatory files required for the framework visit  www.sencha.com

Categories: EXTJS, RIA Tags: , ,
%d bloggers like this: