Instant Ext JS Starter [Instant]

This title is available as an eBook only
Instant Ext JS Starter [Instant]
eBook: $12.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print & eBook also available on:
Learn in an Instant - Short, Fast, Focused
Table of Contents
Sample Chapters
  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.
  • Install and set up the environment with this quick Starter guide
  • Learn the basics of the framework and built-in utility functions
  • Use MVC architecture, components, and containers
  • Get to grips with the framework layout system in a nutshell

Book Details

Language : English
eBook : 56 pages
Release Date : April 2013
ISBN : 1782166106
ISBN 13 : 9781782166108
Author(s) : Nagarajan Bhava
Topics and Technologies : All Books, Instant, Web Development, Open Source

Table of Contents

Instant Ext JS Starter
  • Instant Ext JS Starter
    • So, what is Ext JS?
    • Installation and environment setup
      • Step 1 – What do you need?
      • Step 2 – Installing the browser and debugger
      • Step 3 – Installing the web server
      • Step 4 – Unpacking Ext JS
      • Step 5 –Testing Ext JS library.
      • And that's it
    • Quick start – Creating and defining your Ext JS application
      • Step 1 – Preparing for an Ext JS application
      • Step 2 – The MVC architecture
      • Step 3 – Defining your Ext JS application
      • Step 4 – Understanding the Ext JS class hierarchy
      • Step 5 – Defining and creating the Ext JS class
      • Step 6 – Instantiating Ext JS components
      • Step 7 – Using Ext JS Lang functions
    • Top features you'll want to know about
      • 1 – Layout mechanism
      • 2 – Containers
        • Ext.container.Viewport
        • Ext.container.Container
        • Ext.container.ButtonGroup
      • 3 – Components and data package
        • Tabpanel
        • Container with card layout
        • Data package
        • Grid panel
        • Infinite scrolling
      • 4 – Traversing Ext JS components
      • 5 – Working with forms
      • 6 – Templates
      • 7 – Controllers and events
      • 8 – Event handling
      • 9 – Other advanced features
    • People and places you should get to know
      • Official sites
      • Articles and tutorials
      • Community
      • Links
      • Books
      • Blogs
      • Twitter
      • About Packt Publishing
      • Writing for Packt

Nagarajan Bhava

Nagarajan Bhava is a User Interface Architect, who actively explores, designs, and develops user interfaces using the latest UI technologies. He has over 14 years of experience—12 years in IT and 2 years in Control system design engineering.

His work on user interfaces started during pre-Ajax days, for a Business Analytic product with thick-client and Windows desktop-like features in a thin web browser client interface and he is continuing his development for SaaS-based Cloud security service.

He primarily works on user interface designs, developing intuitive rich user interfaces using the latest User Interface frameworks (such as jQuery, MooTools, YUI, DOJO, and Ext JS), Ajax, JavaScript, HTML5, CSS, and Web 2.0 technologies, along with Java J2EE backend technologies.

He has recently taken an interest in designing user interfaces for mobile devices.

He is creative and loves to research various upcoming UI trends and implements them wherever applicable. He has a passion for UI design and is an artist by hobby.

Sorry, we don't have any reviews for this title yet.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 4 submitted: last submission 16 Jul 2013

Errata type: Code | Page number: 17 |


Instead of xtype it should say alias in both code and the content.

Custom button component 2: An app.extjsButton button component is
instantiated using a custom xtype name. In order for this to work, our app.
extjsBook class definition needs to have alias and extend properties specified  <-------- changed  to 'alias' from 'xtype'
along with a call to its parent Button class, as follows:

alias:'widget.extjsButton', <-------------- modified this line.



Errata type: Code| Page number: 9 | Errata date: 14-5-2013


A starerApp.js file through which all the application level JavaScript files are dynamically loaded on an as-needed basis

starerApp.js   should be  starterApp.js (as shown 8 lines below) 



Errata type: Code | Page number: 10 | Errata date: 13-5-2013


The following code segment:

<link rel="stylesheet" type="text/css" href="../ext-4.1.1a/resources/css/ext-all.css"></link> <script type="text/javascript" src="../../extjs4/ext-dev.js"> </script> <script type="text/javascript" src="../ExtJSStarter/starterApp.js"> </script> should read:

 <link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all.css"></link> <script type="text/javascript" src="../extjs4/ext-dev.js"> </script> <script type="text/javascript" src="starterApp.js"> </script> As shown on page 9 The resulting structure will be as follows: httpd extjs4 (unpacked ExtJS Framework and renamed to extjs4) ExtJSStarter °° app (folder for application-specific JavaScript files) °° data (folder for data) °° resources (folder for images and CSS files) °° starterApp.js °° index.html So: the ext-4.1.1a directory was renamed to extjs4 the ../../extjs4 would indicate that the extjs4 directory is two levels above the code in the ExtJSStarter directory, when it is only one the starterApp.js file is in the same directory as the index.html file, so there is no need to go up a directory and back into the same one.



Errata type: Code | Page number: 13

The lines of code should be:
Ext.define('app.extJsBook',{ config:{ title:'', price:'', author:'' }, constructor:function(config){ this.initConfig(config) } });

Instead of the following:
Ext.define('app.extJsBook'){ config:{ title:'', price:'', author:'' }, constructor:function(config){ this.initConfig(config) } };

Sorry, there are currently no downloads available for this title.

Frequently bought together

Instant Ext JS Starter [Instant] +    Seam 2.x Web Development =
50% Off
the second eBook
Price for both: $24.50

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Install Ext JS and test framework
  • Understand, define, and create an Ext JS class
  • Use Ext JS Lang Functions
  • Learn the layout mechanism
  • Use containers, components, and data packages
  • Traverse Ext JS components with easy-to-use examples
  • Work with forms and templates
  • Learn controllers and events

In Detail

Using JavaScript framework is the new way of creating rich, cross-browser, intuitive UI interfaces, in a fraction of the time that it would otherwise normally take. A cross-browser web application with header, footer, left column section with links, a content with a CSS grid/table, and a form with few text fields and a submit button can be done with ease using the JavaScript framework.

Instant Ext JS Starter has been especially created to provide you with all the information that you need to start with the Ext JS Sencha JavaScript framework. You will understand what the framework does, get started with building your first browser-based application/widget, and discover its rich and modern UI components.

Instant Ext JS Starter starts with brief details on downloading and installing the framework libraries, configuring the web server, creating your first application, and defining and creating a class. It goes through the key features you need to know about, along with the layout process. It ends with providing links to articles and tutorials to accomplish what you want to do.

Instant Ext JS Starter will help you to start Ext JS instantly, providing basic details about the framework, how it is being used in the class system, and MVC architecture. Also, it lets you know about the default built-in functions, and different component traversing techniques within a structure of components with easy-to-use examples. In addition, these examples will assist you in the usage of layouts within a component structure, handling events, working with forms and templates, and getting information about help articles and tutorials.This book helps you to understand the framework and provides insights about its key features that are required to start immediately.


Get to grips with a new technology, understand what it is and what it can do for you, and then get to work with the most important features and tasks. Instant Ext JS Starter is a step-by-step guide to providing you with all the information that you need to start with the Ext JS Sencha JavaScript framework. It has a simplified approach in building your first browser-based application.

Who this book is for

Instant Ext JS Starter is for people who are new to the Ext JS framework and people who are trying to explore the important features and possibilities of the framework. It assumes that you will have some experience with or understand the JavaScript programming language. As this is an Instant title, it provides the features of the framework and its usage in a nutshell, helping the user to start instantly. Readers are expected to have a browser with a debugger installed, preferably Firefox with the Firebug debugger plugin.

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
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