Ext JS 4 Web Application Development Cookbook


Ext JS 4 Web Application Development Cookbook
eBook: $34.99
Formats: PDF, PacktLib, ePub and Mobi formats
$29.74
save 15%!
Print + free eBook + free PacktLib access to the book: $84.98    Print cover: $49.99
$49.99
save 41%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Learn how to build Rich Internet Applications with the latest version of the Ext JS framework in a cookbook style
  • From creating forms to theming your interface, you will learn the building blocks for developing the perfect web application
  • Easy to follow recipes step through practical and detailed examples which are all fully backed up with code, illustrations, and tips

Book Details

Language : English
Paperback : 488 pages [ 235mm x 191mm ]
Release Date : August 2012
ISBN : 1849516863
ISBN 13 : 9781849516860
Author(s) : Andrew Duncan, Stuart Ashworth
Topics and Technologies : All Books, Web Development, Cookbooks, Open Source, Web Development

Table of Contents

Preface
Chapter 1: Classes, Object-Oriented Principles and Structuring your Application
Chapter 2: Manipulating the Dom, Handling Events, and Making AJAX Requests
Chapter 3: Laying Out Your Components
Chapter 4: UI Building Blocks—Trees, Panels, and Data Views
Chapter 5: Loading, Submitting, and Validating Forms
Chapter 6: Using and Configuring Form Fields
Chapter 7: Working with the Ext JS Data Package
Chapter 8: Displaying and Editing Tabular Data
Chapter 9: Constructing Toolbars with Buttons and Menus
Chapter 10: Drawing and Charting
Chapter 11: Theming your Application
Chapter 12: Advanced Ext JS for the Perfect App
Index
  • Chapter 1: Classes, Object-Oriented Principles and Structuring your Application
    • Introduction
    • Creating custom classes using the new Ext JS class system
    • Using inheritance in your classes
    • Adding mixins to your class
    • Scoping your functions
    • Dynamically loading Ext JS classes
    • Aliasing your components
    • Accessing components with component query
    • Extending Ext JS components
    • Overriding Ext JS' functionality
    • Chapter 2: Manipulating the Dom, Handling Events, and Making AJAX Requests
      • Introduction
      • Selecting DOM elements
      • Traversing the DOM
      • Manipulating DOM elements
      • Creating new DOM elements
      • Handling events on elements and components
      • Delegating event handling of child elements
      • Simple animation of elements
      • Custom animations
      • Parsing, formatting, and manipulating dates
      • Loading data with AJAX
      • Encoding and decoding JSON data
      • Chapter 3: Laying Out Your Components
        • Introduction
        • Using a FitLayout to expand components to fill their parent
        • Creating flexible vertical layouts with VBoxes
        • Creating flexible horizontal layouts with HBoxes
        • Displaying content in columns
        • Collapsible layouts with accordions
        • Displaying stacked components with CardLayouts
        • Anchor components to their parent's dimensions
        • Creating fullscreen applications with the BorderLayout
        • Combining multiple layouts
        • Chapter 4: UI Building Blocks—Trees, Panels, and Data Views
          • Introduction
          • Loading a tree's nodes from the server
          • Sorting tree nodes
          • Dragging-and-dropping nodes within a tree
          • Using a tree as a menu to load content into another panel
          • Docking items to panels' edges
          • Displaying a simple form in a window
          • Creating a tabbed layout with tooltips
          • Manipulating a tab panel's TabBar
          • Executing inline JavaScript to in an XTemplate customize appearance
          • Creating Ext.XTemplate member functions
          • Adding logic to Ext.XTemplates
          • Formatting dates within an Ext.XTemplate
          • Creating a DataView bound to a data store
          • Displaying a detailed window after clicking a DataView node
          • Chapter 5: Loading, Submitting, and Validating Forms
            • Introduction
            • Constructing a complex form layout
            • Populating your form with data
            • Submitting your form's data
            • Validating form fields with VTypes
            • Creating custom VTypes
            • Uploading files to the server
            • Handling exception and callbacks
            • Chapter 6: Using and Configuring Form Fields
              • Introduction
              • Displaying radio buttons in columns
              • Populating CheckboxGroups
              • Dynamically generate a CheckboxGroup from JSON
              • Setting up available date ranges in Date fields
              • Loading and parsing Dates into a Date field
              • Entering numbers with a Spinner field
              • Sliding values using a Slider field
              • Loading server side data into a combobox
              • Autocompleting a combobox's value
              • Rendering the results in a combobox
              • Rich editing with an HTML field
              • Creating repeatable form fields and fieldsets
              • Combining form fields
              • Chapter 7: Working with the Ext JS Data Package
                • Introduction
                • Modeling a data object
                • Loading and saving a Model using proxies
                • Loading cross-domain data with a Store
                • Associating Models and loading nested data
                • Applying validation rules to Models' fields
                • Grouping a Store's data
                • Handling Store exceptions
                • Saving and loading data with HTML5 Local Storage
                • Chapter 8: Displaying and Editing Tabular Data
                  • Introduction
                  • Displaying simple tabular data
                  • Editing grid data with a RowEditor
                  • Adding a paging toolbar for large datasets
                  • Dealing with large datasets with an infinite scrolling grid
                  • Dragging-and-dropping records between grids
                  • Creating a grouped grid
                  • Custom rendering of grid cells with TemplateColumns
                  • Creating summary rows aggregating the grid's data
                  • Displaying full-width row data with the RowBody feature
                  • Adding a context menu to grid rows
                  • Populating a form from a selected grid row
                  • Adding buttons to grid rows with action columns
                    • Chapter 10: Drawing and Charting
                      • Introduction
                      • Drawing basic shapes
                      • Applying gradients to shapes
                      • Drawing paths
                      • Transforming and interacting with shapes
                      • Creating a bar chart with external data
                      • Creating a pie chart with local data
                      • Creating a line chart with updating data
                      • Customizing labels, colors, and axes
                      • Attaching events to chart components
                      • Creating a live updating chart bound to an editable grid
                      • Chapter 11: Theming your Application
                        • Introduction
                        • Compiling SASS with Compass
                        • Introduction to SASS
                        • Using Ext JS' SASS variables
                        • Using the UI config option
                        • Creating your own theme mixins
                        • Restyling a panel
                        • Creating images for legacy browsers
                        • Chapter 12: Advanced Ext JS for the Perfect App
                          • Introduction
                          • Advanced functionality with plugins
                          • Architecting your applications with the MVC pattern
                          • Attaching user interactions to controller actions
                          • Creating a real-life application with the MVC pattern
                          • Building your application with Sencha's SDK tools
                          • Getting started with Ext Direct
                          • Loading and submitting forms with Ext Direct
                          • Handling errors throughout your application

                          Andrew Duncan

                          Andrew Duncan’s passion for the Internet and Web Development began from a young age, when he spent much of his time creating websites and installing/managing a 2 km2 wide wireless mesh network for his local, rural community. After graduating in Business & Management from the University of Glasgow, Andrew was inspired to set up a business offering web development, training and consultancy as SwarmOnline. During expansion, he partnered with Stuart Ashworth at the end of 2010. His experience is now expansive, having worked with a variety of small, medium and multinational businesses for both the public and private sector markets. Sencha’s technologies first became of interest to Andrew more than three years ago. His knowledge and enthusiasm was recognized in the Sencha Touch App Contest where SwarmOnline secured a top 10 place. This talent did not go unrecognized as Sencha soon signed SwarmOnline as their first official partner outside the US. When not immersed in technology, Andrew lives in Glasgow’s West End with his girlfriend, Charlotte. He enjoys skiing, curling and DIY projects. Andrew can be found on swarmonline.com/blog, by email and twitter.

                          Stuart Ashworth

                          Stuart Ashworth is a professional web developer and all-round web geek currently living in Glasgow, Scotland with his girlfriend Sophie and wee dog, Meg. After graduating with a 1st class honours degree in Design Computing from the University of Strathclyde, he earned his stripes at a small software company in the city. Stuart has worked with Sencha technologies for over three years, creating various large and small scale web applications, mobile applications and framework plugins along the way. At the end of 2010, Stuart and Andrew formed SwarmOnline, later becoming an official Sencha partner. They have since worked on projects with a number of local, national and international clients ranging from small businesses to large multi-national corporations. Stuart enjoys playing football, snowboarding and visiting new cities. He blogs about Sencha technologies on the SwarmOnline website as much as possible and can be contacted via Twitter, Email or the Sencha Forums.
                          Sorry, we don't have any reviews for this title yet.

                          Code Downloads

                          Download the code and support files for this book.


                          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.


                          Errata

                          - 10 submitted: last submission 09 Apr 2014

                          Errata type: Typo     Page No: 59

                          Code Snippet in the There's more... section:

                          alert('The Element was clicked!);
                          closing quote was missed

                          Should be

                          valid line : alert('The Element was clicked!');

                          Errata type: Code     Page No: 52

                          bookTitleEl.addClass('book-title');

                          Should be

                          bookTitleEl.addCls('book-title');

                          Errata type: Code     Page No: 76

                          size: ["Small", "Medium", "Large"],"

                          Should be

                          size: ["Small", "Medium", "Large"],
                          quote at the end of line is to be removed

                          Errata type: Code     Page No: 76

                          Code snippet in Numbered Bullet 2

                          Include the following line of code at the beginning of the code snippet:

                           var encodedJson = Ext.encode(objToEncode)

                          Errata type: Code     Page No: 27

                          In the following code snippet:

                           listeners: {
                          click: {
                          fn: function(button, e, options){
                          alert(this.text);
                          },
                          scope: this
                          },
                          afterrender: {
                          fn: function(button, options){
                          // do something...
                          },
                          scope: otherObject
                          }
                          }

                          scope by default is bind to control, 'scope: this' must be omitted, because in that case this is window object, not control itself

                          Errata type: Graphics    Page no.: 11

                          The following is the updated diagram:

                          Errata type: Graphics    Page no.: 10

                          The following is the updated diagram:

                          Errata type: Code    Page no.: 56

                          In first code snippet in the Using templates to insert elements section

                          html: '{newfeature}'

                          Should be:

                          html: '{newFeature}'


                          Errata type: Code Page no.: 438

                          onSortBySeverityButtonClick: function(btn){

                          this.getBugDataView().getStore().sort('severity', 'DESC');

                          }

                          The preceding code has been printed twice in the book. Consider it only once.

                          Sample chapters

                          You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                          Frequently bought together

                          Ext JS 4 Web Application Development Cookbook +    Oracle Essbase 9 Implementation Guide =
                          50% Off
                          the second eBook
                          Price for both: $44.50

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

                          What you will learn from this book

                          • Structure your application according to best practices, manipulate the DOM, and handle events raised by users and the framework
                          • Learn the layouts available in Ext JS and understand how to combine these to make complex layouts
                          • Create aesthetic and user-friendly forms, validate these on the client, and submit data to your server
                          • Present and organize data with Trees, Tabbed layouts, Data Views, and Templates
                          • Make AJAX requests, model data objects, incorporate Ext.Direct, perform CRUD operations on data, and integrate HTML5 local storage with Ext JS
                          • Work with Grids to present and manipulate tabular data by editing rows, dragging and dropping records, scrolling infinitely, and grouping data
                          • Represent data visually with flexible and interactive Charts and Drawing components
                          • Customize the look and feel of your application with SASS and Compass

                           

                          In Detail

                          Ext JS 4 is Sencha’s latest JavaScript framework for developing cross-platform web applications. Built upon web standards, Ext JS provides a comprehensive library of user interface widgets and data manipulation classes to turbo-charge your application’s development. Ext JS 4 builds on Ext JS 3, introducing a number of new widgets and features including the popular MVC architecture, easily customisable themes and plugin-free charting.

                          Ext JS 4 Web Application Development Cookbook works through the framework from the fundamentals to advanced features and application design. More than 130 detailed and practical recipes demonstrate all of the key widgets and features the framework has to offer. With this book, and the Ext JS framework, learn how to develop truly interactive and responsive web applications.

                          Starting with the framework fundamentals, you will work through all of the widgets and features the framework has to offer, finishing with extensive coverage of application design and code structure.

                          Over 110 practical and detailed recipes describe how to create and work with forms, grids, data views, and charts. You will also learn about the best practices for structuring and designing your application and how to deal with storing and manipulating data. The cookbook structure is such that you may read the recipes in any order.

                          The Ext JS 4 Web Application Development Cookbook will provide you with the knowledge to create interactive and responsive web applications, using real life examples.

                          Approach

                          This is a cookbook with easy to follow recipes containing practical and detailed examples which are all fully backed up with code, illustrations, and tips.

                          Who this book is for

                          The Ext JS 4 Web Application Development Cookbook is aimed at both newcomers and those experienced with Ext JS who want to expand their knowledge and learn how to create interactive web applications with Ext JS 4.

                          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