Tips & Tricks for Ext JS 3.x

Exclusive offer: get 50% off this eBook here
Learning Ext JS 3.2

Learning Ext JS 3.2 — Save 50%

Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS

$26.99    $13.50
by Colin Ramsay Nigel White Shea Frederick Steve 'Cutter' Blades | November 2010 | Open Source

Ext JS is a JavaScript library that makes it (relatively) easy to create desktop-style user interfaces in a web application, including multiple windows, toolbars, drop-down menus, dialog boxes, and much more.

In this article, we will have a look at the tips and tricks presented thru-ought Learning Ext JS 3.2

 

Learning Ext JS 3.2

Learning Ext JS 3.2

Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS

  • Learn to build consistent, attractive web interfaces with the framework components
  • Integrate your existing data and web services with Ext JS data support
  • Enhance your JavaScript skills by using Ext's DOM and AJAX helpers
  • Extend Ext JS through custom components
  • An interactive tutorial packed with loads of example code and illustrative screenshots

 

        Read more about this book      

(For more resources on Ext JS, see here.)

Objective:  Button focus and tab orders are built in.

Tip:  Button focus and tab orders are built into Ext JS Components. For the MessageBox Component, the OK or Yes button will be the default action, so pressing Enter on our keyboard when a MessageBox appears will trigger that button, and pressing Tab will move us through the buttons and other items in the MessageBox. Windows have the ESC key mapped to the Close tool. When using button bars in other Componenets, tabbing through the buttons is enabled by default and in Toolbars like the PagingToolbar tabbing is also built in.

Objective:  Duplicate Component ID's must be avoided.

Tip:  Having duplicate IDs in our document can lead to strange behavior, such as a widgets always showing up in the upper-left corner of the browser, and must therefore be avoided.

Objective:  Other uses of Button config on a MessageBox.

Tip:  The buttons config for a MessageBox can also specify the text to display on the button. Instead of passing a Boolean value, just pass it the desired text to display, for example, {yes: 'Maybe'}.

Objective:  Ext does not require any pre-existing markup.

Tip:  Ext does not require any pre-existing markup for it to function, this is because it generates everything it needs on its own. This let's us start with a very simple HTML document containing an empty body.

Objective:  Avoid using the built in JavaScript alert messages.

Tip:  Standard JavaScript alert messages pause code execution, which can cause unexpected results. You should not be using the built in JavaScript alert messages, and instead use Ext's MessageBox widget or console messages (when available), which does not pause that code execution.

Objective:  Creating form Field validation types (vType).

Tip:  A search of the Ext JS forum is likely to come back with a vType that someone else has created with exactly what you need, or close enough to use as a starting point for your own requirements, so search the Ext JS Forums before trying to write your own.

Objective:  Simple and quick static options for a ComboBox.

Tip:  A quick way to specify a few static options for a ComboBox is to pass an array to the store config, which will auto-create the store for you. So if we wanted a ComboBox that had 'Yes' and 'No' as options, we would provide ['Yes','No'] as the store config value.

Learning Ext JS 3.2 Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS
Published: October 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Ext JS, see here.)

Objective:  What events exist for each Component.

Tip:  A list of valid events to listen for can be found at the bottom of the API documentation page for each Component, along with the arguments the listeners are passed when they get fired, which are unique to each event.

Objective:  The xtype config element is not always mandatory.

Tip:  There is a default xtype for each Components children, for example a Toolbars children default to a button. We can leave out the xtype config element if the default is the type we want, but I like to include it in most cases just for clarity.

Objective:  Avoid the autoLoad option for complex work.

Tip:  Loading HTML using the autoLoad option is meant for loading HTML fragments, not full HTML documents, so Scripts and stylesheets will not be evaluated. The autoLoad option should not be used as a substitute for adding child components if Components are really whats required.

Objective:  Layout configuration options.

Tip:  Many layout configuration options are defined on the container component, not on each of the children. For instance, the labelWidth config in a Form layout is defined on the container instead of on each form field contained within. The Ext JS documentation is a great place to figure out what configuration options go where.

Objective:  Shorthand version of Component names.

Tip:  Some Components have shorthand names, such as the Ext.MessageBox, which has a shorthand version—Ext.Msg. These shorthand versions can make your code a little more concise, and it's up to you which one you use, as they're both functionally equivalent.

Objective:  Only one Ext.MessageBox at a time

Tip:  You can only use a single Ext.MessageBox at a time. If you try to pop up two boxes at the same time, the first will be replaced by the second. In some cases, you might want to check for the presence of an existing MessageBox as to not inadvertently overwrite the existing message it is presenting. Ext.Msg.isVisible() can be used for that.

Objective:  Chart URL might need to be set in certain applications.

Tip:  If charts are being used on an Intranet application that does not have external Internet access, then the Chart URL must be set, otherwise charts will appear blank.

Learning Ext JS 3.2 Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS
Published: October 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Ext JS, see here.)

Objective:  Tooltips can be styled in Ext JS Charts.

Tip:  The Tooltips used in Charts can be styled just like the other elements of a chart using the options available in the extraStyles config object. Check the API documentation for the options to set.

Objective:  The function Ext.Fx.scale has restrictions in Scaling.

Tip:  Ext.Fx.scale works only with elements that have their display style set to block, which allows the width and height changes to take effect. Using it on inline elements won't trigger an error, but you will not see any change in the dimensions of the element, either.

Objective: The easing effects supported by Ext JS can vary.

Tip: The easing effects supported by Ext JS vary depending on which adapter you're using. If you're using the Ext JS Base adapter, then you'll get the full works.

Objective: Ext.Element compared with Ext.Fx in animations.

Tip:  Ext.Element animations can be used at the same time as the ones from Ext.Fx, but they are not guaranteed to support the queuing features that are always available with the Ext.Fx methods.

Objective: Components have minimal Drag & Drop features by default.

Tip: There are so many variations of drag-and-drop that it's impossible for Ext to understand what you're trying to do in a particular Component. Instead, it makes it trivial to add your own actions to drag-and-drop operations by using the DD Classes.

Objective:  Delaying the render event from firing.

Tip:  When rendering complex components, the render event can sometimes fire before rendering has been completed by the browser. Adding a delay config of 100 milliseconds to your listener can in most cases prevent problems with elements not being ready. Were simply giving the browser time to catch up.

Summary

In this article we had a look at various tips & tricks to make working with Ext JS 3.2 a little easier.


Further resources on this subject:


Resources for Article :


Learning Ext JS 3.2 by Shea Frederick, Colin Ramsay, Steve 'Cutter' Blades & Nigel White

 

About the Author :

 

Colin Ramsay

Colin Ramsay began his web career hacking around ASP websites in a part-time developer job when he was at university. Since then he's been involved with a range of web technologies, which have provided a springboard for the formation of his UK-based web development company, run in tandem with his fledgling writing projects.

Shea Frederick

Shea Frederick began his career in web development before the term 'Web Application' was commonplace. By the late 1990s, he was developing web applications for Tower Records that combined the call center interface with inventory and fulfillment. Since then, Shea has worked as a developer for several companies—building and implementing various commerce solutions, content management systems, and lead tracking programs.

Integrating new technologies to make a better application has been a driving point for Shea's work. He strives to use open source libraries as they are often the launching pad for the most creative technological advances. After stumbling upon a young user interface library called YUI-ext several years ago, Shea contributed to its growth by writing documentation, tutorials, and example code. He has remained an active community member for the modern YUI-ext library—Ext JS. Shea's expertise is drawn from community forum participation, work with the core development team, and his own experience as the architect of several large, Ext JS-based web applications. He currently lives in Baltimore, Maryland with his wife and two dogs and spends time skiing, biking, and watching the Steelers.

Shea is the primary author of the first book published on Ext JS, a book which helps to ease beginners into the Ext JS library. He is also a core developer on the Ext JS project along with writing columns for JSMag and running the local Baltimore/DC JavaScript Meetup. His ramblings can be found on his blog, http://www.vinylfox.com and open source code contributions on Github at http://www.github.com/VinylFox/.

Steve 'Cutter' Blades

Cutter is the Senior Web Developer for Dealerskins, a Nashville, Tennessee based hosting provider that develops websites for the Automobile Dealership market. Cutter began his web career when he began learning HTML 1 while in the US Army and stationed with the National Security Agency. Cutter got into application development as a Corporate Support Specialist for a regional ISP, just prior to becoming the IT Director of Seacrets, a large resort destination on the Eastern Shore of Maryland. Cutter has extensive experience as a server- and client-side developer, with a popular blog dedicated to ColdFusion, Ext JS, and other web development technologies.

Books From Packt


jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

JavaScript Testing Beginner's Guide
JavaScript Testing Beginner's Guide

CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook

Joomla! 1.5 Top Extensions Cookbook
Joomla! 1.5 Top Extensions Cookbook

Drupal 7
Drupal 7

PHP 5 E-commerce Development
PHP 5 E-commerce Development


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
2
b
r
A
p
T
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software