Last saved: 6/29/2009 Jesus Garcia / Ext JS in Action 1
©Manning Publications Co. Please post comments or corrections to the Author Online forum:
http://www.manning-sandbox.com/forum.jspa?forumID=525
2 Jesus Garcia / Ext JS in Action Last saved: 6/29/2009
©Manning Publications Co. Please post comments or corrections to the Author Online forum:
http://www.manning-sandbox.com/forum.jspa?forumID=525
MEAP Edition
Manning Early Access Program
Copyright 2009 Manning Publications
For more information on this and other Manning titles go to
www.manning.com
Licensed to Alison Tyler <pedbro@gmail.com>
Download at Boykma.Com
Last saved: 6/29/2009 Jesus Garcia / Ext JS in Action 3
©Manning Publications Co. Please post comments or corrections to the Author Online forum:
http://www.manning-sandbox.com/forum.jspa?forumID=525
Part 1: Introduction to Ext JS
1 A framework apart
2 Back to the basics
3 Events, Components, and Containers
Part 2: Ext components
4 Panels, TabPanels, and Windows
5. Organizing Components
6 Ext takes Form
7 The venerable GridPanel
8 The EditorGridPanel
9 Taking root with Trees
10 Toolbars and Menus
11 Drag and drop with Widgets
Part 4: Building a configurable composite component
12 Developing object-oriented code with Ext
13 Building a composite widget
14 Applying advance UI techniques
Licensed to Alison Tyler <pedbro@gmail.com>
Download at Boykma.Com
Last saved: 6/29/2009 Jesus Garcia / Ext JS in Action 1
©Manning Publications Co. Please post comments or corrections to the Author Online forum:
http://www.manning-sandbox.com/forum.jspa?forumID=525
1
A framework apart
Envision a scenario where we are tasked to develop an application with many of the
typical UI widgets such as menus, tabs, data grids, dynamic forms and styled pop-up
windows. We want something that allows us to programmatically control the position of
widgets, which means it has to have layout controls. We also desire detailed and organized
centralized documentation to ease our learning curve with the framework. Lastly, this
application needs to look mature and go into beta phase as quickly as possible, which means
we don’t have lots of time to toy with HTML and CSS. Before entering the first line of code
for the prototype, you need to decide on an approach to developing the front-end. What are
your choices?
We do some recon on the common popular libraries on the market and quickly learn that
all of them can manipulate the DOM but only two of them have a mature UI library, YUI and
Ext JS.
At a first glance of YUI, we might get the sense that we need not look any further. We
toy with the examples and notice that they look mature but not exactly professional quality,
which means we need to modify CSS. No way. Next, we look at the documentation at
http://developer.yahoo.com/yui/docs. It’s centralized and extremely technically
accurate, but it is far from user friendly. Look at all of the scrolling required to locate a
method or class. There are even classes that are cut off because the left navigation pane is
too small. What about Ext JS? Surely it has to better -- right?
1.1 An easier way to get the job done
Out of the proverbial box, you’re provided a rich set of widgets. These coupled with the
Layout management tools give you full control to organize and manipulate the UI as
requirements dictate. Most widgets are highly customizable, affording you the option to
enable, disable features, override, and use custom extensions and plug-ins. One example of
Licensed to Alison Tyler <pedbro@gmail.com>
Download at Boykma.Com
2 Jesus Garcia / Ext JS in Action Last saved: 6/29/2009
a web application that takes full advantage of Ext JS is Conjoon. Below is a screenshot of
Conjoon in action.
Figure 1.1 Conjoon is an open source personal information manager that is a great example of a web
application that leverages the framework to manage a UI that leverages 100% of the browser’s viewport.
You can download it at http://conjoon.org/ .
Conjoon is an open source Personal Information Manager and can be considered the epitome
of web applications developed with Ext JS. It uses just about all of the framework’s native
UI widgets and demonstrates how well the framework can integrate with custom extensions
such as the
YouTubePlayer, LiveGrid and ToastWindow. You can get a copy of
Conjoon by visiting http://conjoon.org. What if you’re looking to just add some Ext flavor to
your existing web application or site?
1.1.1 Integration with existing sites
Any combination of widgets can be embedded inside an existing web page and or site
with relative ease, giving your users the best of both worlds. An example of a public facing
site that contains Ext JS is located at the Dow Jones Indexes site, which you can visit via
http://djindexes.com.
©Manning Publications Co. Please post comments or corrections to the Author Online forum:
http://www.manning-sandbox.com/forum.jspa?forumID=525
Licensed to Alison Tyler <pedbro@gmail.com>
Download at Boykma.Com
