作者:empty 页数:375 出版社:empty |
Jorge Ramon is currently the VicePresident of Development forT a ladro Systems LLC,where he has led the design and development of a number of software products for thelaw industry.Jorge has over 16 years of experience as a software developer and has also created webapplications, searchengines, and automatic-control software.He actively contributes tothe software development community through his blog.Miami Coder com.To my parents.They showed me the way.Thanks to K ship ra Singh, Douglas Paterson, David Bames,AbhjeetDeobhakta, Ashwin Shetty, Swap naV.Verle kar, Rakesh She j wal,Wilson D'souza, Aditya Bel pathak, and the rest of the team atPack t Publishing
About the Reviewer
Colin Ramsay remembers the days when people tried to charge for web browsers, andmarvels at how far we've come since then.He started his web career by hacking on ASPand PHP websites, and has now progressed to some of the more in-vogue technolog jes,such as ASP.NET MVC and RubyonRails.His JavaScript fascination has been constantthroughout, and resulted in his co-authorship of'Leam ning Ext JS'.He'sa partner at GoTripod Ltd, a UK development company, working with a range of interesting technologiesto make exciting things for the Web lDownload a tWo weB oak.ComDownload a tWo weB oak.Com
Chapter1:DOMandDataTypes, the Ext JS Way_IntroductionDetecting browsers and platforms used by clientsRetrieving DOMnode sand elementsAcquiring references to Ext JS componentsRunning high-performance DOM queriesEncoding and decoding JSONEncoding and decoding URL dataDetermining the objecttype and converting empty references toa defaultvalueFinding objects in an array and removing array itemsManipulating strings ala Ext JSEffortless range checking for numbersFormatting, parsing, and manipulating datesPreventing naming conf icts and scoping non-global variablesExtending JavaScript objects, the Ext JS wayAdding features to the Ext JS classesBull ding custom JavaScript classes that inherit the functionality of Ext JsChapter2:LayingOutaRichUserInterfaceIntroductionLaying out items within a container using CSS-style absolute positioningMaintaining components'proportions when their containers are resizedStacking items with an accordion layoutWizard style Ul using a card layout44Using a tabbed look46Taking all the browser window's realestate48Positioning components in multiple columns49TableofContentsUsing the tablelayout51Creating a modern application layout with collapsible regions53A custom column layout57A three-panel application layout with a single line of code92Creating a portal and a portlets catalogChapter3:Load, Validate.and Submit Forms87Introduction87Specifying the required fields in a form88Setting the minimum and maximum length allowed for a field's value91Changing the location where validation errors are displayed94Deferring field validation until form submission97Creating validation functions for URLs, email addresses,and other types of data100Confirming passwords and validating dates using relational field validation104Rounding up your validation strategy with server-side validationof form fields108Loading form data from the server111Serving the XML data to a form119Using forms for file uploads124Building fr lend lier forms using text hints128Chapter4:FunwithComboBoxesandDateFields_131Introduction131Using the combobox with local data132Displaying remote data with a combobox135Combobox with autocomplete137How the combobox helps you type140Converting an HTML drop-down list into a nExt combobox143Cascading comboboxes144Using templates to change the look of combobox items148Using paging to handle a large number of combobox items152The different ways to setup disabled dates in a date field156The date range selector159Chapter5:UsingGridPanelstoDisplayandEditTabularData163Introduction164Displaying XML data sent by the server164Displaying JSON data generated by the server166Creating a grid that uses server-side sorting169Implementing data paging172Data grouping with live group summaries175Creating data prev lews179
Preface
In the world of Rich Internet Applications(RIA) development, Ext JS stands out as across-browser JavaScript library that offers the applications developer a powerful toolset.With a set of customizable userinterface widgets similar to those found in desktop operatingsystems, an effective databinding model, a comprehensive programming interface formanipulating the Document Object Model and communicating with the server, a committeddevelopment team, and an enthusiastic users'community, the Ext JS library is a great chol cefor today's web bull ders.This book addresses many of the library's features, from the perspective of how they can beused to solve the real-world challenges faced by those that develop in tem net applications.What this book coverschapter 1-The DOM and DataTypes, the Ext JS way, covers the Ext JSf acl tes for workingwith different browsers, the Document Object Model(DOM) , and the Ext JS datatypes.Itsrecipes will teach you howto detect browsers and platforms, manipulate the DOM, encodeand decode JSON and URL data, and work with arrays, strings, numbers, and dates.In thischapter you will also learn howto augment the features of the Ext JS classes, as well a showto incorporate library features into your own JavaScript classes.Chapter-Laying Out a Rich User Inter tace, will help you to learn howto use layouts to createuser interfaces with the Ext JS widgets.This chapter explains the common uses of some of thelibrary's native layouts, and teaches you howto combine and augment these layouts to buildgreat looking and functional inter t aces.Chapter 3-Load, Validate, and Submit Forms, focuses on forms processing.In this chapteryou will find tips and techniques for effective field validation, details on howto load datainto forms, as well as advice on howto use forms to upload files to the server.As in previouschapters, in Chapter 3 you will find examples of howto extend the library's classes, inparticular, howto create custom form fields.PrefaceChapter 4-Fun with ComboBoxes and Date Fields, is a continuation of the form fields recipesintroduced in Chapter 3.Chapter 4is loaded with examples of howto use the ComboBox andDate Field form components.It wilt each you howto take advantage of ComboBox featureslike paging and item templates, as well a show to safely capture master-details and datesrange input.Chapter 5-Using Grid Panels to Display and Edit Tabular Data, consists of recipes thatencompass the display of data using Ext JS grid panels.They explain different approachesto loading.editing.and saving data, as well as looking at howto implement features likegrouping and group summaries.Chapter 5uses techniques introduced in Chapter 3tot eachyou how the Ext JS Grid Panel widget can be enhanced through the use of plugins.Chapter 6-More Applications of Grid and List v lews, expands on Chapter 5's examples.Itexplains multiple ways to use the Grid Panel widget to display master-de talls relationships,approaches to displaying tabular data more eff ciently, and howto edit data with the newRow Editor class.Chapter 7-Keeping Tabs on your Trees, explores the Tab Panel and T review widgets.Besideshowto use their main features, in this chapter you will also leam howto take advantage ofplugins to enhance these widgets.This chapter also teaches you howto implement usagescenarios involving drag-and-drop and master-details displays with tree views and panels.Chapter 8 Making Progress with Menus and Toolbars, consists of recipes that examine thecommonly used menu items, as well as the different ways to setup toolbars and progressbars in your applications.Chapter 9-We li Charted Territory, consists of recipes that explain the typical usage scenariosof the chart widget, as well as approaches to configuring and customizing the look of theslider widget.Chapter 10-Patterns i nExt JS, provides examples of some important design patterns usedto build robust and flexible applications.These examples cover techniques such as resourcemanagement using lazy instantiation, prototyping and encapsulating using code modules andpre-configured classes, dependency management with publish/subscribe models, and statepreservation.What you need for this bookThe recipes in this book use the Ext JS 3.0SDK, available from the Ext JS website athttp://www.extj8.com/producta/extja/domload.php.Youwllneedtodownloadand install the SDK in order to run the code for the recipes.Some recipes use the Saki la sample database, provided by MySQL AB.The Saki la sampledatabaseisavailablefromhttp://dev.mysql.com/doc/.Installationinstructionsareavailableathttp://dev.myeql.com/doc/sakila/en/eakila, html.It is recommended that you use a JavaScript debugger when running the code for the recipes.
Who this book is for
The Ext JS Cookbook is for Ext JS users who want a book of useful techniques, withexplanations, that they can refer to and adapt to their purposes, Developers who are alreadyfam liar with Ext JS will ind practical guidance and numerous examples covering most of thelibrary's features and components that can be used as a solid foundation to build upon whencreating rich internet applications.ConventionsIn this book, you will tin da number of styles of text that distinguish between different kinds ofinformation.Here are some examples of these styles, and an explanation of their meaning.Codewords in text are shown as follows:“Initialize the global QuickTips instance.A block of code is set as follows:var browser= ;ir(Ext.1aChroue) {When we wish to draw your attention to a particular part of a code block, the relevant lines oritems are set in bold:New terms and important words are shown in bold.Words that you see on the screen.inmenus or dialog boxes for example, appear in the text like this: clicking the Next buttonmoves you to the next screen .browser a Hi!I'm the new kid on the block itx type:'textfield,id:login-pud',field Label; I Password', input Type:'password',allow Blank:ra lee, minLength:6, maxLength:32,PrefaceminLength Text :'Pasawordmustbeat least 6 characters long.'Reader feedbackFeedback from our readers is always welcome.Let us know what you think about this book-what you liked or may have disliked.Reader feedback is important for us to develop titles thatyou really get the most out of.Tosendusgeneralfeedback,simplydropanemailtofeedbackwpacktpub.com, andmention the booktitle in the subject of your message.If there is a book that you need and would like to see us publish, please send usa note in theSUGGESTATITLEformonwww.packtpub.comoremailsuggestapacktpub.com.If there is a topic that you have expertise in and you are interested in either writing orcontribu ing to a book,seeourauthorguideonwww.packtpub.com/authors.Customer supportNow that you are the proud owner of a Pack t book, we have a number of things to help you toget the most from your purchase.Downloading the example code for the bookVisithttp://www.packtpub.com/rilea/code/8709_Code.ziptodirectlydownloadthe example code.The downloadable files contain instructions on howto use them.ErrataA i though we have taken every care to ensure the accuracy of our contents, mistakes do happen.If you find a mistake in one of our books-maybe a mistake in text or code-we would be gratefulif you would report this to us.By doing so, you can save other readers from frustration, and helpus to improve subsequent versions of this book.If you find any errata, please report them byvisitinghttp://www.packtpub.com/aupport, selecting your book, clicking on the let usknow link, and entering the details of your errata.Once your errata are verified, your submissionwill be accepted and the errata added to any list of existing errata.Any existing errata can beviewedbyselectingyourtitlefromhttp://www.packtpub.com/support.
Chapter1:DOMandDataTypes, the Ext JS Way_
Introduction
Detecting browsers and platforms used by clients
Retrieving DOMnode sand elements
Acquiring references to Ext JS components
Running high-performance DOM queries
Encoding and decoding JSON
Encoding and decoding URL data
Determining the objecttype and converting empty references to
a defaultvalue
Finding objects in an array and removing array items
Manipulating strings ala Ext JS
Effortless range checking for numbers
Formatting, parsing, and manipulating dates
Preventing naming conf icts and scoping non-global variables
Extending JavaScript objects, the Ext JS way
Adding features to the Ext JS classes
Bull ding custom JavaScript classes that inherit the functionality of Ext Js
Chapter2:LayingOutaRichUserInterface
Introduction
Laying out items within a container using CSS-style absolute positioning
Maintaining components'proportions when their containers are resized
Stacking items with an accordion layout
Wizard style Ul using a card layout44
Using a tabbed look46
Taking all the browser window's realestate48
Positioning components in multiple columns49
TableofContents
Using the tablelayout51
Creating a modern application layout with collapsible regions53
A custom column layout57
A three-panel application layout with a single line of code92
Creating a portal and a portlets catalog
Chapter3:Load, Validate.and Submit Forms87
Introduction87
Specifying the required fields in a form88
Setting the minimum and maximum length allowed for a field's value91
Changing the location where validation errors are displayed94
Deferring field validation until form submission97
Creating validation functions for URLs, email addresses,
and other types of data100
Confirming passwords and validating dates using relational field validation104
Rounding up your validation strategy with server-side validation
of form fields108
Loading form data from the server111
Serving the XML data to a form119
Using forms for file uploads124
Building fr lend lier forms using text hints128
Chapter4:FunwithComboBoxesandDateFields_131
Introduction131
Using the combobox with local data132
Displaying remote data with a combobox135
Combobox with autocomplete137
How the combobox helps you type140
Converting an HTML drop-down list into a nExt combobox143
Cascading comboboxes144
Using templates to change the look of combobox items148
Using paging to handle a large number of combobox items152
The different ways to setup disabled dates in a date field156
The date range selector159
Chapter5:UsingGridPanelstoDisplayandEditTabularData163
Introduction164
Displaying XML data sent by the server164
Displaying JSON data generated by the server166
Creating a grid that uses server-side sorting169
Implementing data paging172
Data grouping with live group summaries175
Creating data prev lews179