why ExtJS

ExtJS is one of the most popular JavaScript user interface framework, it offer a bunch of great user interface component, if you are a Java Programmer it better you use the Ext-GWT, but if you are a web programmer who always using web scripting language such as PHP, it may be painless if you learn the new web interface beside the traditional HTML.

Features of ExtJS :
Ext JS includes a set of GUI-based form controls (or "widgets") for use within web applications:
  •         Text field and textarea input controls
  •          date fields with a pop-up date-picker       
  •          numeric fields
  •          list box and combo boxes
  •          radio and checkbox controls
  •          html editor control
  •          grid control (with both read-only and edit modes, sortable data, lockable and  
  •          draggable columns, and a variety of other features)
  •          tree control
  •          tab panels
  •          toolbars
  •          desktop application-style menus
  •          region panels to allow a form to be divided into multiple sub-sections
  •          sliders
  •          vector graphics charts

Introducing Ext Core

Given the release of Ext Core, it's only natural that developers try to compare the features of this new distribution with that of other popular frameworks such as jQuery. jQuery is, by far, one of the most popular JavaScript frameworks on the market, and deservedly so. However, there is one distinct advantage to using Ext Core over other lightweight frameworks that I haven't seen discussed much. Using Ext Core gives you the ability to become familiar with all the base functions of Ext JS, allowing an easier transition to using the Ext JS library. Again, Ext JS is known for its advanced UI component framework, and Ext Core gives the perfect introduction.

Component updates and improvements :

Although with each new release the Ext JS team seems to announce internal memory enhancements and performance gains, the news that has the biggest impact is the latest round of eye candy. I go through some of the more interesting and important updates here.

Grids :

All UI frameworks have a grid of some sort. It's the most desirable widget for developing rich, Web-based applications. Ext JS has recognized this and added a good deal of updates to its most important component. The Ext JS grid has long supported the notion of editing field data directly in the grid. Although this function is great, it was only supported at the field level. Available as a user extension (UX) in Ext JS, you can now perform edits to a grid at the row level, as shown in above figure.
Grid column locking :
// grid which supports column locking
// just need to specify the locking version of the column model and grid view
var grid = new Ext.grid.GridPanel(
    store: dinnerData,
    colModel: new Ext.ux.grid.LockingColumnModel( [
      { header: "Name", dataIndex: "name", id: "colName" },
      { header: "Arrival Date", dataIndex: "arrivalDate" },
      { header: "Dinner Choice", dataIndex: "dinnerChoice" }
    ] ),
    view: new Ext.ux.grid.LockingGridView(),
    title: "Event Planner",
    width: 350,
    height: 250

Grid grouped column headers :
Charting Another big and completely new feature to Ext JS is charting. Based on the YUI Library's charting engine, Ext JS charts are Adobe Flash-based. They leverage the power of Ext JS data stores, a common object in the library used for linking data to other popular UI components, such as grids. With support for chart types such as line, column, pie, and stacked bar, Ext JS charts can find a place in most applications. However, for more advanced chart implementations, consider implementing more mature charting engines such as those found in Adobe Flex. Figure 4 provides a demonstration of three of the available charts in Ext JS.
Charts sampler Layouts :
Other great additions to Ext JS are the HBox and VBox layouts and the ListView control. The HBox and VBox are simple horizontal and vertical layout managers that are overdue. With good support for spacing and alignment configurations, these layouts are similar to layouts supported in other rich application frameworks such as Flex and Microsoft® Silverlight.
The ListView control is a lightweight control with a grid view. It has support for templates so that you can render data as you see fit while also supporting the basic grid features you'd expect, such as column resizing. Although it also supports a selectable interface, it does not support horizontal scrolling or editing. Figure 5 provides an example of the ListView control.
ListView sample  - Toolbars, menus, and forms :
Toolbars received two key updates that I think are pretty cool. The first is the enabling of automatic handling of toolbar item overflow. When a container is resized so that a toolbar's items are clipped, Ext
JS automatically handles this overflow by creating a menu of the extra toolbar items. This feature is simple but useful, because you don't have to think about handling it yourself. Toolbars can now also group buttons, forming the basis for ribbon-based toolbars. Buttons can be a mix of many different types and can support various layouts.
Forms received a new field type in the ux namespace named SpinnerField. Although this extension has been around for a while, Ext JS shipped this as part of their example suite in Ext JS 3.0. It's a great addition that allows for spinning through numbers, dates, and times as well as any other array-based data.

Next Post »