JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Introduction to Ext JS

October 22, 2013 by Manisha Patil Leave a Comment

In this article I’ll give a brief overview of the ExtJS a JavaScript framework, which is most popular today, due to the features and quality it offers. External Javascript or ExtJS as it is called, is a JavaScript framework that was initially designed to be an extension of the YUI framework (Yahoo! User Interface Library ) . It was named at the beginning of its development as yui-ext and YUI as its basis for work, so its operation was not possible without the use of YUI.

Its distribution is done through two licenses,

  • a business license
  • and other open-source license (open source)

Besides these two licenses, there is a support service that could be purchased individually, where the user acquires the right not only through the support forums, but also through e-mail, telephone, and if necessary, the user could purchase a higher membership level and also be entitled to support via onsite, having access to the SVN Ext JS, where he could find versions of Ext JS in development and yet-to be released versions.

  • DOJO Widget Example
  • Introduction to Foundation 3 Framework

The yui-ext, throughout its development, has been getting new adapters that serve to make the connection between it and other JavaScript frameworks such as Prototype and jQuery. The growth of its features and interface components that have brought value to the most popular JavaScript frameworks like YUI, jQuery and Prototype, made it quickly recognized by developers and contributors, generating greater speed to the emergence of several versions of the yui-ext 0.x., before finally being released as version 1.0, it got its name changed to ExtJS; showing that ExtJS is no longer just an extension to the YUI framework.

It came to be known as a framework after version 1.1 was released. Thereafter, new versions continued to be developed and with them came new functions and basic components redesigned to be more effective and required fewer lines of code.

Ext JS Browser Support

The ExtJS currently supports the most popular browsers like:

  • IE 6 or higher.
  • Firefox 1.5 or higher.
  • Safari 3 or higher.
  • Opera 9 or higher.
  • Chrome.

Ext JS Installation and Setup

To use ExtJS, we first need to download the same through the following link: Donwload ExtJS. On this page we find two download options: a free version and the commercial version.

Ext JS Download Figure 1: Download Page ExtJS

To download the free version, click on “Download fot Ext JS 4.0.7 GPL“. Save to a directory of your choice. After the download is complete, simply decompress the Zip file. The file that we downloaded, will give us the following folder structure:

Ext JS Folder Structure

Figure 2: Structure of the Ext JS folder

Working With Ext JS

To begin using this framework, we will create the file index.html. The directory structure of our code and the library will be as shown below:
Ext JS Working

Figure 3: Files needed to use Ext JS

Inside the of index.html file we will include the files needed to run the ExtJS i.e

  • Ex-all.css: File containing all CSS styles of Ext JS.
  • Ext-all.js: File that contains all the codes of the components, whether or not visible to users.
  • Ext-base.js: This file can be used both as Ext JS to other libraries such as jQuery.
  • We have included our script in the header.

Listing 1: Import the files needed

[code lang=”javascript”]
<!DOCTYPE html>
<html>
<head>
<title>TestIng of ExtJS</title>
<link rel="stylesheet" href="ext-4.0.7-gpl/resources/css/ext-all.css" type="text/css" />
<script src="ext-4.0.7-gpl/ext-all.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window
({
height: 200,
width: 300,
title: ‘Test’,
html: ‘<b>Example of an application made with ExtJS</b>’
})

win.show();

Ext.get(‘btClose’).on(‘click’, function()
{
win.close();
})})
</script>

</head>
<body>
<input type="button" id="btClose" value="Close Window"></input>
</body>
</html>

[/code]

Let ‘s see the details of the preceding code:

  • Within Ext.onReady we define a function as a parameter.  This function is only loaded after all other elements of our application have been loaded, thus avoiding any problems that may occur. And it is in this function that we insert all the code we want to run when we open our page.
  • Inside this function we begin by creating the variable “win” and called a window “ext.Window” with the dimensions 300px wide and 200px wide, and define a text to be displayed on this window.
  • After the creation of this window through our variable “win”, we use the method “show”, which is displayed to the user. It will automatically be positioned exactly in the center of the browser screen.
  • And finally we use “Ext.get ()”. We can compare this method with the familiar document.getElemetByID ().

Now that the code is ready, let’s test it. To do this, open the file “index.html” in your browser and we get the following result: a blue window in the middle of the browser and if we click on the close button, this window will be closed blue window, as shown in the following figure .

Ext JS Example ScriptFigure 4: Results of the test example of ExtJS

However, as it is an object of Ext JS, we realize that with Ext.get the returned object has all the properties and methods of the object Ext.Element. And the property Ext.get (‘desiredElement’). Thus using the Ext.get can use events with ease. As we can see, in this case we associate an event to the button with id “btclose” using method “on“, which takes three parameters:

  • Name of the event that we wish to associate;
  • The call-back function that will be used when the event is triggered;
  • And the scope, this is an optional parameter.

Hence we connect a function to the click event of the button that caught our variable which has the window and it executes the method “close” to close. If the result is not the same as shown in Figure 4, make sure your code is the same as shown above.

Summary

In this article we can conclude that ExtJS streamlines the development of web applications, with tools to develop attractive, efficient and mostly functional interfaces. That’s why it leaves ExtJS developer without concern for the visual part, which in most cases is not as important as the treatment of data. If you have any questions, write it in the comments section.

Filed Under: ExtJS Tagged With: ExtJS, javascript

Ext JS 3.0 Cookbook

November 23, 2009 by Krishna Srinivasan Leave a Comment

Ext JS 3.0 Cookbook


In the world of Rich Internet Applications (RIA) development, Ext JS stands out as a
cross-browser JavaScript library that offers the applications developer a powerful toolset.
With a set of customizable user interface widgets similar to those found in desktop
operating systems, an effective data binding model, a comprehensive programming
interface for manipulating the Document Object Model and communicating with the
server, a committed development team, and an enthusiastic users’ community, the Ext JS
library is a great choice for today’s web builders.


This book addresses many of the library’s features, from the perspective of how
they can be used to solve the real-world challenges faced by those that develop
internet applications.


What This Book Covers


Chapter 1—The DOM and Data Types, the Ext JS way, covers the Ext JS facilities for
working with different browsers, the Document Object Model (DOM), and the Ext JS
data types. Its recipes will teach you how to detect browsers and platforms, manipulate
the DOM, encode and decode JSON and URL data, and work with arrays, strings,
numbers, and dates. In this chapter you will also learn how to augment the features
of the Ext JS classes, as well as how to incorporate library features into your own
JavaScript classes.


Chapter 2—Laying Out a Rich User Interface, will help you to learn how to use layouts to
create user interfaces with the Ext JS widgets. This chapter explains the common uses of
some of the library’s native layouts, and teaches you how to combine and augment these
layouts to build great-looking and functional interfaces.


Chapter 3—Load, Validate, and Submit Forms, focuses on forms processing. In this
chapter you will find tips and techniques for effective field validation, details on how to
load data into forms, as well as advice on how to use forms to upload files to the server.
As in previous chapters, in Chapter 3 you will find examples of how to extend the
library’s classes, in particular, how to create custom form fields.


Chapter 4—Fun with Combo Boxes and Date Fields, is a continuation of the form fields
recipes introduced in Chapter 3. Chapter 4 is loaded with examples of how to use the
ComboBox and DateField form components. It will teach you how to take advantage of
ComboBox features like paging and item templates, as well as how to safely capture
master-details and dates range input.


Chapter 5—Using Grid Panels to Display and Edit Tabular Data, consists of recipes that
encompass the display of data using Ext JS grid panels. They explain different
approaches to loading, editing, and saving data, as well as looking at how to implement
features like grouping and group summaries. Chapter 5 uses techniques introduced in
Chapter 3 to teach you how the Ext JS GridPanel widget can be enhanced through the use
of plugins.


Chapter 6—More Applications of Grid and List views, expands on Chapter 5’s examples.
It explains multiple ways to use the GridPanel widget to display master-details
relationships, approaches to displaying tabular data more efficiently, and how to edit data
with the new RowEditor class.


Chapter 7—Keeping Tabs on your Trees, explores the TabPanel and Treview widgets.
Besides how to use their main features, in this chapter you will also learn how to take
advantage of plugins to enhance these widgets. This chapter also teaches you how to
implement usage scenarios involving drag-and-drop and master-details displays with tree
views and panels.


Chapter 8—Making Progress with Menus and Toolbars, consists of recipes that examine
the commonly-used menu items, as well as the different ways to set up toolbars and
progress bars in your applications.


Chapter 9—Well Charted Territory, consists of recipes that explain the typical usage
scenarios of the chart widget, as well as approaches to configuring and customizing the
look of the slider widget.


Chapter 10—Patterns in Ext JS, provides examples of some important design patterns
used to build robust and flexible applications. These examples cover techniques such as
resource management using lazy instantiation, prototyping and encapsulating using code
modules and pre-configured classes, dependency management with publish/subscribe
models, and state preservation.


Load, Validate, and Submit Forms


You will learn the following recipes in this chapter:



  • Specifying the required fields in a form

  • Setting the minimum and maximum length allowed for a field’s value

  • Changing the location where validation errors are displayed

  • Deferring field validation until form submission

  • Creating validation functions for URLs, email addresses, and other types of data

  • Confirming passwords and validating dates using relational field validation

  • Rounding up your validation strategy with server-side validation of form fields

  • Loading form data from the server

  • Serving the XML data to a form

  • Using forms for file uploads

  • Building friendlier forms using text hints


Introduction


This chapter focuses on the topic of processing forms. The journey will include client-side
and server-side field validation, form loading, submission, field customization, and layout
techniques that will make it a breeze to build great-looking and friendly forms.


Specifying the required fields in a form


This recipe uses a login form as an example to explain how to create required fields in a form.

How to do it…



  1. Initialize the global QuickTips instance:

    Ext.QuickTips.init();

  2. Create the login form:

    var loginForm = { xtype: ‘form’,
    id: ‘login-form’,
    bodyStyle: ‘padding:15px;background:transparent’,
    border: false,
    url:’login.php’,
    items: [{
    xtype: ‘box’,
    autoEl: { tag: ‘div’,
    html: ‘<div class=”app-msg”>
    <img src=”img/magic-wand.png” class=”app-img” />
    Log in to The Magic Forum</div>’}
    },
    { xtype: ‘textfield’, id: ‘login-user’,
    fieldLabel: ‘Username’,
    allowBlank: false
    },
    { xtype: ‘textfield’, id: ‘login-pwd’,
    fieldLabel: ‘Password’,
    inputType: ‘password’,allowBlank: false
    }],
    buttons: [{
    text: ‘Login’,
    handler: function() {
    Ext.getCmp(‘login-form’).getForm().submit();
    }
    },
    {
    text: ‘Cancel’,
    handler: function() {
    win.hide();
    }
    }]
    }

  3. Create the window that will host the login form:

    Ext.onReady(function() {
    win = new Ext.Window({
    layout: ‘form’,
    width: 340,
    autoHeight: true,
    closeAction: ‘hide’,
    items: [loginForm]
    });
    win.show();
    });


How it works…


Initializing the QuickTips singleton allows the form’s validation errors to be shown as
tool tips. When the form is created, each required field needs to have the allowblank
configuration option set to false:



{ xtype: ‘textfield’, id: ‘login-user’, fieldLabel: ‘Username’,
allowBlank: false
},
{ xtype: ‘textfield’, id: ‘login-pwd’, fieldLabel: ‘Password’,
inputType: ‘password’,allowBlank: false
}


Setting allowBlank to false activates a validation rule that requires the length of the field’s
value to be greater than zero.


There’s more…


Use the blankText configuration option to change the error text when the blank validation
fails. For example, the username field definition in the previous code snippet can be changed
as shown here:



{ xtype: ‘textfield’, id: ‘login-user’, fieldLabel: ‘Username’,
allowBlank: false, blankText:’Enter your username’
}


The resulting error is shown in the following figure:

Validation rules can be combined and even customized. Other recipes in this chapter explain
how to range-check a field’s length, as well as how to specify the valid format of the field’s value.


See also…



  • The next recipe titled Setting the minimum and maximum length allowed for a field’s
    value
    explains how to restrict the number of characters entered in a field

  • The Changing the location where validation errors are displayed recipe, covered later
    in this chapter, shows how to relocate a field’s error icon

  • Refer to the Deferring field validation until form submission recipe, covered later
    in this chapter, to learn how to validate all fields at once upon form submission,
    instead of using the default automatic field validation

  • The Creating validation functions for URLs, email addresses, and other types of data
    recipe, covered later in this chapter, explains the validation functions available in
    Ext JS

  • The Confirming passwords and validating dates using relational field validation
    recipe, covered later in this chapter, explains how to perform validation when the
    value of one field depends on the value of another field

  • The Rounding up your validation strategy with server-side validation of form fields
    recipe, covered later in this chapter, explains how to perform server-side validation

Pages: 1 2 3 4 5 6

Filed Under: ExtJS Tagged With: EXTJS 3

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved