Tài liệu Ext JS 4 Web Application Development Cookbook pptx

Ext JS 4 Web

Application

Development

Cookbook

Over 110 easy-to-follow recipes backed up with real-life

examples, walking you through basic Ext JS features to

advanced application design using Sencha's Ext JS

Stuart Ashworth

Andrew Duncan

BIRMINGHAM - MUMBAI

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

Ext JS 4 Web Application Development

Cookbook

Copyright © 2012 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or

transmitted in any form or by any means, without the prior written permission of the publisher,

except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the

information presented. However, the information contained in this book is sold without

warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers

and distributors will be held liable for any damages caused or alleged to be caused directly or

indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies

and products mentioned in this book by the appropriate use of capitals. However, Packt

Publishing cannot guarantee the accuracy of this information.

First published: August 2012

Production Reference: 1170812

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84951-686-0

www.packtpub.com

Cover Image by Ed Maclean ([email protected])

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

Credits

Authors

Stuart Ashworth

Andrew Duncan

Reviewers

Aafrin Fareeth

Yiyu Jia

Peter Kellner

Joel Watson

Acquisition Editor

Usha Iyer

Lead Technical Editor

Dayan Hyames

Technical Editors

Apoorva Bolar

Madhuri Das

Project Coordinator

Michelle Quadros

Proofreader

Martin Diver

Indexer

Hemangini Bari

Graphics

Manu Joseph

Production Coordinators

Shantanu Zagade

Aparna Bhagat

Cover Work

Shantanu Zagade

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

About the Authors

Stuart Ashworth is a professional web developer and an all-round web geek currently

living in Glasgow, Scotland with his girlfriend Sophie and wee dog, Meg. After graduating with

a first-class honors 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. Since then they have worked on projects with a number of local, national,

and international clients ranging from small businesses to large multinational 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 through

Twitter, e-mail, or the Sencha forums.

Andrew Duncan’s passion for the Internet and web development began from a young age,

where he spent much of his time creating websites and installing/managing a 2 km square

wireless mesh network for his local, rural community.

After graduating in Business and 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 at the end of 2010. His experience

is now expansive, having worked with a large 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 e-mail, and on Twitter.

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

About the Reviewers

Aafrin Fareeth is a self-made programmer who fell in love with codes during his high

school. Since then he has mastered several languages, such as C++, Java, PHP, ASP, VB,

VB.NET, and is on a quest to master more languages. He specializes in web application

development, security testing, and forensic analysis.

I would like to thank my family and friends who have been very supportive,

Nor Hamirah for her continuous encouragement and motivation, Jovita

Pinto, and Reshma Sundaresan for this wonderful opportunity.

Yiyu Jia has been developing web applications since 1996. He worked as a technical

leader and solutions architect on various projects with Java and PHP as the major backend

languages. He also has professional experience in interactive TV middleware and home

gateway projects. He is especially interested in designing multi-channel web applications.

Yiyu Jia is also the main founder of the novel data-mining research topic—Promotional

Subspace Mining (PSM), which aims at finding out useful information from subspaces in very

large data sets. He can be reached at the given e-mail address—[email protected]. His

blog and website are http://yiyujia.blogspot.com and http://www.idatamining.

org respectively.

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

Peter Kellner, a Microsoft ASP.NET MVP since 2007, is founder and president of

ConnectionRoad, and a seasoned software professional specializing in high quality, scalable,

and extensible web applications. His experience includes building and leading engineering

teams both on and off shore. Peter is actively engaged in the software community being the

primary leader of Silicon Valley Code Camp, which attracted over 2,000 people in 2011 with

over 200 sessions. He also organizes the San Francisco Sencha Users Group. In his free time

he and his wife Tammy can be found biking the Santa Cruz Mountains. In 2003 they rode

across the United States in 27 days.

Joel Watson is a web enthusiast, working for the past eight years in website design and

development. He loves exploring web technologies of all sorts, and particularly enjoys creating

web experiences that leverage the newest features of HTML5 and its related technologies.

When he’s not coding, Joel enjoys spending time with his wife and two daughters, playing

guitar, and watching cheesy sci-fi and anime.

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

www.PacktPub.com

Support files, eBooks, discount offers,

and more

You might want to visit www.PacktPub.com for support files and downloads related to

your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub

files available? You can upgrade to the eBook version at www.PacktPub.com, and as a

print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at

[email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for

a range of free newsletters and receive exclusive discounts and offers on Packt books and

eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt’s online digital book

library. Here, you can access, read, and search across Packt’s entire library of books.

Why Subscribe?

f Fully searchable across every book published by Packt

f Copy and paste, print, and bookmark content

f On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

PacktLib today and view nine entirely free books. Simply use your login credentials for

immediate access.

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

For Charlotte, Sophie, and our families.

Thank you for the support and encouragement you gave us while writing this book.

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

Table of Contents

Preface 1

Chapter 1: Classes, Object-Oriented Principles and

Structuring your Application 7

Introduction 8

Creating custom classes using the new Ext JS class system 8

Using inheritance in your classes 15

Adding mixins to your class 19

Scoping your functions 22

Dynamically loading Ext JS classes 27

Aliasing your components 29

Accessing components with component query 31

Extending Ext JS components 37

Overriding Ext JS' functionality 40

Chapter 2: Manipulating the Dom, Handling Events,

and Making AJAX Requests 45

Introduction 46

Selecting DOM elements 46

Traversing the DOM 49

Manipulating DOM elements 51

Creating new DOM elements 55

Handling events on elements and components 58

Delegating event handling of child elements 60

Simple animation of elements 64

Custom animations 67

Parsing, formatting, and manipulating dates 70

Loading data with AJAX 73

Encoding and decoding JSON data 75

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

ii

Table of Contents

Chapter 3: Laying Out Your Components 79

Introduction 79

Using a FitLayout to expand components to fill their parent 80

Creating flexible vertical layouts with VBoxes 82

Creating flexible horizontal layouts with HBoxes 85

Displaying content in columns 88

Collapsible layouts with accordions 91

Displaying stacked components with CardLayouts 94

Anchor components to their parent's dimensions 98

Creating fullscreen applications with the BorderLayout 103

Combining multiple layouts 107

Chapter 4: UI Building Blocks—Trees, Panels, and Data Views 113

Introduction 114

Loading a tree's nodes from the server 114

Sorting tree nodes 117

Dragging-and-dropping nodes within a tree 120

Using a tree as a menu to load content into another panel 123

Docking items to panels' edges 126

Displaying a simple form in a window 130

Creating a tabbed layout with tooltips 132

Manipulating a tab panel's TabBar 134

Executing inline JavaScript to in an XTemplate customize appearance 138

Creating Ext.XTemplate member functions 140

Adding logic to Ext.XTemplates 144

Formatting dates within an Ext.XTemplate 146

Creating a DataView bound to a data store 147

Displaying a detailed window after clicking a DataView node 152

Chapter 5: Loading, Submitting, and Validating Forms 157

Introduction 157

Constructing a complex form layout 158

Populating your form with data 163

Submitting your form's data 167

Validating form fields with VTypes 170

Creating custom VTypes 171

Uploading files to the server 175

Handling exception and callbacks 178

Chapter 6: Using and Configuring Form Fields 183

Introduction 183

Displaying radio buttons in columns 184

Populating CheckboxGroups 189

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

iii

Table of Contents

Dynamically generate a CheckboxGroup from JSON 193

Setting up available date ranges in Date fields 199

Loading and parsing Dates into a Date field 202

Entering numbers with a Spinner field 204

Sliding values using a Slider field 207

Loading server side data into a combobox 210

Autocompleting a combobox's value 212

Rendering the results in a combobox 216

Rich editing with an HTML field 219

Creating repeatable form fields and fieldsets 221

Combining form fields 224

Chapter 7: Working with the Ext JS Data Package 229

Introduction 229

Modeling a data object 230

Loading and saving a Model using proxies 234

Loading cross-domain data with a Store 238

Associating Models and loading nested data 241

Applying validation rules to Models' fields 248

Grouping a Store's data 253

Handling Store exceptions 259

Saving and loading data with HTML5 Local Storage 262

Chapter 8: Displaying and Editing Tabular Data 265

Introduction 265

Displaying simple tabular data 266

Editing grid data with a RowEditor 269

Adding a paging toolbar for large datasets 276

Dealing with large datasets with an infinite scrolling grid 278

Dragging-and-dropping records between grids 282

Creating a grouped grid 288

Custom rendering of grid cells with TemplateColumns 291

Creating summary rows aggregating the grid's data 295

Displaying full-width row data with the RowBody feature 300

Adding a context menu to grid rows 304

Populating a form from a selected grid row 308

Adding buttons to grid rows with action columns 312

Chapter 9: Constructing Toolbars with Buttons and Menus 319

Introduction 319

Creating a split button 319

Working with context menus 324

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134

iv

Table of Contents

Adding a combobox to a toolbar to filter a grid 328

Using the color picker in a menu 333

Chapter 10: Drawing and Charting 337

Introduction 337

Drawing basic shapes 338

Applying gradients to shapes 343

Drawing paths 346

Transforming and interacting with shapes 352

Creating a bar chart with external data 356

Creating a pie chart with local data 360

Creating a line chart with updating data 365

Customizing labels, colors, and axes 370

Attaching events to chart components 375

Creating a live updating chart bound to an editable grid 379

Chapter 11: Theming your Application 383

Introduction 383

Compiling SASS with Compass 384

Introduction to SASS 388

Using Ext JS' SASS variables 395

Using the UI config option 398

Creating your own theme mixins 403

Restyling a panel 406

Creating images for legacy browsers 410

Chapter 12: Advanced Ext JS for the Perfect App 413

Introduction 414

Advanced functionality with plugins 414

Architecting your applications with the MVC pattern 420

Attaching user interactions to controller actions 424

Creating a real-life application with the MVC pattern 431

Building your application with Sencha's SDK tools 441

Getting started with Ext Direct 445

Loading and submitting forms with Ext Direct 449

Handling errors throughout your application 455

Index 459

This material is copyright and is licensed for the sole use by Gauthier Giacomoni on 11th September 2012

47 gordon street #4, Allston, 02134