Learning Ext JS ppsx

Learning Ext JS

Build dynamic, desktop-style user interfaces for your

data-driven web applications

Shea Frederick

Colin Ramsay

Steve 'Cutter' Blades

BIRMINGHAM - MUMBAI

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Learning Ext JS

Copyright © 2008 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, Packt Publishing,

nor its dealers or 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 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: November 2008

Production Reference: 1201108

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-847195-

www.packtpub.com

Cover Image by Michelle O'Kane ([email protected])

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Credits

Authors

Shea Frederick

Colin Ramsay

Steve 'Cutter' Blades

Reviewer

James Kennard

Senior Acquisition Editor

David Barnes

Development Editor

Swapna V. Verlekar

Technical Editor

Gagandeep Singh

Copy Editor

Sumathi Sridhar

Editorial Team Leader

Akshara Aware

Project Manager

Abhijeet Deobhakta

Project Coordinator

Neelkanth Mehta

Indexer

Monica Ajmera

Proofreader

Dirk Manuel

Production Coordinator

Rajni R. Thorat

Cover Work

Rajni R. Thorat

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

About the Authors

Shea Frederick began his career in web development before the term 'Web

Application' became commonplace. By the late 1990s, he was developing web

applications for Tower Records that combined a 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.

A big loving thanks goes out to my wife Becky for looking over my

shoulder to correct the many grammatical errors my fingers produce,

and for always being there to support me.

Colin Ramsay began his career building ASP websites as a part-time developer

at university. Since then, he's been involved with a range of web technologies

and employers in the North East of England, working on everything from flash￾in-the-pan web frameworks to legacy applications. Most recently, he has used

this experience to provide a springboard for the formation of his UK-based web

development company, Plastiscenic Limited. From writing articles and blog posts

across the web, Colin has made the leap to book authoring with the patience and

kind assistance of his friends and family.

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Steve Blades (who goes by the name of 'Cutter'), a �irginia native, raised in

Georgia, began his computing career when he started learning BASIC at age

12, hammering out small programs on a Timex Sinclair 1000. As a linguist and

Intelligence Analyst for the US Army, Cutter began learning HTML while stationed

at the National Security Agency. On leaving the service, Cutter became part-owner

of a growing Advertising Specialty company, developing business automation

processes for the company by writing MS Office-based applications. From there,

Cutter went on to become a Customer Support Technician with a local Internet

Service Provider. Upon showing programming aptitude, he was later moved

into their Corporate Support department, providing maintenance and rewrites to

existing websites and applications. It was here that Cutter began to really dive into

web application programming, teaching himself JavaScript, CSS, and ColdFusion

programming. Cutter then took the position of IT Director for Seacrets, a large resort

destination in Ocean City, Maryland, while also holding the same position for one

of its owner's other companies, Irie Radio. Now, Cutter is the Senior Web Developer

for Dealerskins, a company that develops and hosts websites for the automobile

dealership industry. He lives and works in Nashville, Tennessee with his wife Teresa

and daughter Savannah.

Apart from work, side projects, and maintaining his blog (http://blog.

cutterscrossing.com), Cutter also enjoys spending time with his family, is an avid

reader and a videophile, and likes to relive his band days with a mic in hand.

I would like to thank a few people for their support while I have

been working on this project. First, thanks to Jack Slocum and

the entire Ext JS team for giving us such a great library to write

about. Thanks to the Dev Team at Dealerskins for helping proof

my chapters. Thanks to my Mom, for buying me my first book on

programming. But, most of all, thanks to my wife, Teresa, and my

daughter, Savannah, for giving me the time, space, love, and

support needed to work on this project. I could never have done

it without them.

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

About the Reviewer

James Kennard is an all-round computer specialist with a particular interest in

web-based technologies. He authored the Joomla! CMS book Mastering Joomla! 1.5

Extension and Framework Development. He holds a B.Sc. in Computer Science and has

worked for organisations such as LogicaCMG. James has recently taken an interest

in user interfaces and overall UX—it is this which led him to the truly superb

Ext JS project.

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Dedicated to our family, friends, and the Ext JS team.

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Table of Content

Preface 1

Chapter 1: Getting Started 9

About Ext 9

Ext: Not just another JavaScript library 11

Cross-browser DOM (Document Object Model) 12

Event-driven interfaces 12

Ext and AJAX 12

Getting Ext 13

Where to put Ext 13

Including Ext in your pages 14

What do those files do? 15

Using the Ext library 15

Time for action 16

The example 17

Not working? 17

Adapters 18

Using adapters 18

I'm asynchronous! 19

Localization 20

English only 20

A language other than English 21

Multiple languages 21

Ext JS online community 22

Summary 22

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Table of Contents

[ ii ]

Chapter 2: The Staples of Ext 23

Ready, set, go! 23

Spacer image 24

Widget 24

Time for action 24

What just happened? 25

Using onReady 25

More widget wonders 26

Meet JSON and the config object 28

The old way 28

The new way—config objects 28

What is a config object? 29

How does JSON work? 30

Time for action 30

Lighting the fire 32

The workhorse—Ext.get 33

Speed tip 34

Summary 35

Chapter 3: Forms 37

The core components of a form 37

Our first form 38

Nice form—how does it work? 39

Form fields 39

Validation 40

Built-in validation—vtypes 41

Styles for displaying errors 43

Custom validation—create your own vtype 44

Masking—don't press that key! 45

Radio buttons and check boxes 46

It's not a button, it's a radio button 46

X marks the check box 46

The ComboBox 47

Database-driven ComboBox 47

TextArea and HTMLEditor 50

Listening for form field events 51

ComboBox events 51

Buttons and form action 53

Form submission 53

Talking back—the server responses 54

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Table of Contents

[ iii ]

Loading a form with data 56

Static data load 56

Object reference or component config 58

Instantiated 58

Component config 58

Summary 59

Chapter 4: Buttons, Menus, and Toolbars 61

A toolbar for every occasion 61

Toolbars 61

The button 63

Menu 63

Split button 64

Toolbar item alignment, dividers, and spacers 65

Shortcuts 66

Icon buttons 66

Button handlers—click me! 67

Load content on menu item click 68

Form fields in a toolbar 69

Toolbars in windows, grids, and panels 70

Summary 71

Chapter 5: Displaying Data with Grids 73

What is a grid anyway? 74

Displaying structured data with a GridPanel 74

Setting up a data store 75

Adding data to our data store 75

Defining your data for the data store 76

Specifying data types 77

Displaying the GridPanel 78

How did that work? 80

Configuring the GridPanel 80

Defining a Grids column model 81

Using cell renderers 82

Formatting data using the built-in cell renderers 82

Creating lookup data stores—custom cell rendering 83

Combining two columns 84

Generating HTML and graphics 84

Built-in features 85

Client-side sorting 86

Hidden/visible columns 86

Column reordering 86

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065

Table of Contents

[ iv ]

Displaying server-side data in the grid 88

Loading the movie database from an XML file 88

Loading the movie database from a JSON file 90

Loading data from a database using PHP 91

Programming the grid 92

Working with cell and row selections 92

Listening to our selection model for selections 93

Manipulating the grid (and its data) with code 94

Altering the grid at the click of a button 94

Advanced grid formatting 95

Paging the grid 96

Grouping 98

Grouping store 98

Summary 100

Chapter 6: Editor Grids 101

What can I do with an editable grid? 101

Working with editable grids 102

Editing more cells of data 104

Edit more field types 104

Editing a date value 105

Edit with a ComboBox 106

Reacting to a cell edit 106

What's a dirty cell? 107

Reacting when an edit occurs 107

Deleting and adding in the data store 108

Removing grid rows from the data store 109

Adding a row to the grid 110

Saving edited data to the server 112

Sending updates back to the server 112

Deleting data from the server 114

Saving new rows to the server 115

Summary 117

Chapter 7: Layouts 119

What are layouts, regions, and viewports? 119

Our first layout 121

Splitting the regions 122

I want options 123

Tab panels 124

Adding a tab panel 124

This material is copyright and is licensed for the sole use by lawrence rambert on 16th June 2009

2012 price st, , rahway, , 07065