mastering extjs (2nd ed) groner 2015 01 22 Lập trình Java

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 thepublisher, except in the case

Mastering Ext JS Second Edition

Introducing the MVVM architecture

Creating the ViewController for Login View

Binding the ViewController to the ViewListening to the button click event

Cancel Button Listener implementationSubmit Button Listener implementationCreating the User and Groups tables

Creating the main TabPanel component

Creating the footer

A quick word about modular CSSCreating the Header class

Creating the Header CSSCustomizing the Font Awesome icon colorsThe main screen and MVVM

Rendering the menu from nested JSON (the hasMany association)Using glyphs in TreePanel – working with overrides

Menu locale supportOpening a menu item programmatically

The Users screenWorking with docked itemsWorking with singletons – Ext JS class systemPanel versus Container versus ComponentDeclaring the User ViewModel

Working with ViewModel data binding

Creating the User ViewController

Adding and editing a new user

Creating the Edit View – form within a windowCreating the Group Model

The Groups StoreController – listening to the Add button

CuuDuongThanCong.com https://fb.com/tailieudientucntt

Controller – listening to the Cancel button

Controller – saving a user

Using Model validatorsPreviewing a file before uploading

Handling many-to-many associations

Loading nested JSON from the server

Changing the ViewModel – chained storesFilm-Actor – handling many-to-many associations

Film categories

Film Actors

Search Actors – Live Search comboboxModel

StoreLive Search comboboxComplementing the ViewModel

Index

Mastering Ext JS Second Edition

Copyright © 2015 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 thepublisher, 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 theinformation presented However, the information contained in this book is sold withoutwarranty, either express or implied Neither the author nor Packt Publishing, and its

dealers and distributors will be held liable for any damages caused or alleged to be causeddirectly or indirectly by this book

Loiane Groner has over 9 years of experience in software development While at

university, she demonstrated great interest in IT Loiane worked as a teaching assistant for2.5 years and taught algorithms, data structures, and computing theory She representedher university at the ACM International Collegiate Programming Contest—Brazilian

Finals (South America Regionals) and also worked as a student delegate of the BrazilianComputing Society (SBC) for 2 years Loiane won a merit award in her senior year forbeing one of the top three students with the best GPAs in the computer science departmentand also graduated with honors

Loiane has worked at multinational companies, such as IBM Her areas of expertise

include Java SE and Java EE and also Sencha technologies (Ext JS and Sencha Touch).Nowadays, Loiane works as a software development manager at a financial institution,where she manages overseas solutions She also works as an independent Sencha

I would like to thank my parents for giving me education, guidance, and advice all theseyears and helping me to become a better human being and professional A very specialthanks to my husband for being patient and supportive and giving me encouragement

I also would like to thank the readers of this book and the other books I have written, fortheir support and feedback Your feedback is very valuable to me to improve as an authorand as a professional Thank you very much!

CuuDuongThanCong.com https://fb.com/tailieudientucntt

Peter Holcomb has been working with Ext JS for several years, right from version 2, and

has thoroughly enjoyed being a part of the Sencha community as it has grown A tinkerer

at heart, Peter tries to spend his free time on a variety of projects to keep his skills sharpand stay on top of new frameworks and technologies He’s currently a lead frontend

engineer at SailPoint Technologies, Inc., a company that he’s been fortunate to be a part offor over 8 years He lives in Austin with his wife, Courtney, and two children and

thoroughly enjoys breakfast tacos

Girish Srivastava works as a technical associate at Vision Technologies, Bengaluru

(formerly, Bangalore) He is a good speaker and an industry expert on data warehousingand web-based solutions and their implementations He used to facilitate training sessions

on different technologies such as Java SE/Java EE, JavaScript, Ext JS, IBM PureDataSystem for Analytics (IBM Netezza), Perl/CGI, SAP BO, Tableau, and so on Girish hasworked as a technical consultant in the IT industry

I would like to thank the Almighty, my parents, B.M.P Kiran and Mina Devi, my family,and my loveable friends, who have supported and backed me throughout my life I wouldalso like to thank Rawal Thakur, the managing director of my company, who gave mebrilliant opportunities, ample time, and some extraordinary resources to explore new andemerging technologies My thanks also goes to Packt Publishing for selecting me as one ofthe technical reviewers for this wonderful book It is an honor to be a part of it

Thorsten Suckow-Homberg is a software developer from Aachen, Germany He took his

first programming steps with AmigaBASIC, peeked into Turbo Pascal, Modula-3, andlearned to love the strange yet wonderful abstract world of object-oriented programming(OOP) with Java Most of the time, he works on PHP/JavaScript-driven web applications,such as conjoon.com, of which he is the main developer If he’s not traveling around

teaching JavaScript and Ext JS, you’ll most likely find him in the woods, riding his

mountain bike, or sitting in front of his desk, sipping coffee and engineering code

CuuDuongThanCong.com https://fb.com/tailieudientucntt

CuuDuongThanCong.com https://fb.com/tailieudientucntt

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.Did you know that Packt offers eBook versions of every book published, with PDF andePub 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 < service@packtpub.com > for more details

for a range of free newsletters and receive exclusive discounts and offers on Packt booksand eBooks

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt’s online digitalbook library Here, you can search, access, and read Packt’s entire library of books

If you have an account with Packt at www.PacktPub.com, you can use this to accessPacktLib today and view 9 entirely free books Simply use your login credentials forimmediate access

If you are an Ext JS developer, it probably took you a while to learn the framework Weknow that the Ext JS learning curve is not short After we have learned the basics, and weneed to use Ext JS in our daily jobs, a lot of questions pop up: how can one componenttalk to another? What are the best practices? Is it really worth using this approach and notanother one? Is there any other way I can implement the same feature? This is normal.This book was written thinking about these developers

So this is what this book is about: how do we put everything together and create reallynice applications with Ext JS? We are going to create a complete application, from themockup of the screens all the way to putting it into production We are going to create theapplication structure, a splash screen, a login screen, a multilingual capability, an activitymonitor, a dynamic menu that depends on user permission, and modules to manage

database information (simple and complex information) And then, we will learn how tobuild the application for production, how to customize the theme, and how to debug it

We will use real-world examples and see how we can implement them using Ext JS

components And throughout the book, we’ve also included a lot of tips and best practices

to help you boost your Ext JS knowledge and take you to the next level

chapter provides references that you can read before diving into the other chapters of thisbook This is done taking into consideration the possibility that this is your first contactwith the framework

book, its features, and the mockup of each screen and module (each chapter covers a

different module), and also demonstrates how to create the structure of the applicationusing Sencha Cmd and how to create a splash screen

automatically and logs out This chapter also provides an example of multilingual

capability and shows how to create a component so that the user can use it to change thesystem’s language and locale settings

on user permission The options of the menu are rendered depending on whether the userhas permission or not; if not, the option will not be displayed

already have access to the system

able to edit information as though they were editing information directly from a MySQLtable This chapter also explores capabilities such as live search, filter, and inline editing(using the Cell Editing and Row Editing plugins) Also, we start exploring real-worldissues when we develop big applications with Ext JS, such as the reuse of componentsthroughout the application

information from a table of the database and all its relationships with other tables So wecover how to manage complex information and how to handle associations within dataGrids and FormPanels

ability to export to PDF and Excel, that are not supported natively by Ext JS This chapteralso covers charts and how to export them to image and PDF and also how to use third-party plugins

in the project; it is also about debugging Ext JS applications, including what we need to be

CuuDuongThanCong.com https://fb.com/tailieudientucntt

support), a few helpful tools that can help you in your daily work as a developer, and also

a few recommendations of where to find extra and open source plugins to use in Ext JSprojects

create custom UIs It also explores the steps required for, and the benefits of, packagingthe application to production

The following is a list of the software you will need to have installed prior to executing theexamples of the book The following list covers the exact software used to implement andexecute the examples of this book, but you can use any similar software that you alreadyhave installed that has the same features

If you are a developer who is familiar with Ext JS and want to augment your skills tocreate even better web applications, this is the book for you Basic knowledge of

JavaScript/HTML/CSS and any server-side language (PHP, Java, C#, Ruby, or Python) isrequired

Ext.define('Packt.model.film.Film', {

extend: 'Packt.model.staticData.Base', //#1

When we wish to draw your attention to a particular part of a code block, the relevantlines or items are set in bold:

Feedback from our readers is always welcome Let us know what you think about thisbook—what you liked or disliked Reader feedback is important for us as it helps usdevelop titles that you will really get the most out of

To send us general feedback, simply e-mail < feedback@packtpub.com >, and mention thebook’s title in the subject of your message

If there is a topic that you have expertise in and you are interested in either writing orcontributing to a book, see our author guide at www.packtpub.com/authors

Now that you are the proud owner of a Packt book, we have a number of things to helpyou to get the most from your purchase

Although we have taken every care to ensure the accuracy of our content, mistakes dohappen If you find a mistake in one of our books—maybe a mistake in the text or thecode—we would be grateful if you could report this to us By doing so, you can save otherreaders from frustration and help us improve subsequent versions of this book If you findany errata, please report them by visiting http://www.packtpub.com/submit-errata,

selecting your book, clicking on the Errata Submission Form link, and entering the

details of your errata Once your errata are verified, your submission will be accepted andthe errata will be uploaded to our website or added to any list of existing errata under theErrata section of that title

To view the previously submitted errata, go to

search field The required information will appear under the Errata section.

Piracy of copyrighted material on the Internet is an ongoing problem across all media AtPackt, we take the protection of our copyright and licenses very seriously If you comeacross any illegal copies of our works in any form on the Internet, please provide us withthe location address or website name immediately so that we can pursue a remedy

Please contact us at < copyright@packtpub.com > with a link to the suspected piratedmaterial

We appreciate your help in protecting our authors and our ability to bring you valuablecontent

CuuDuongThanCong.com https://fb.com/tailieudientucntt

If you have a problem with any aspect of this book, you can contact us at

< questions@packtpub.com >, and we will do our best to address the problem

Nowadays, there are many flavors for frontend frameworks and libraries in the market

There are frameworks you can use if you only want to manipulate the Document Object Model (DOM), frameworks used only for styling, frameworks for user-friendly

components, frameworks used to design your project, and so on Also there is Ext JS, a

framework used to create Rich Internet Applications (RIA), but it has many other

features than just pretty components

In this book, we are going to learn how to develop an application from the beginning tothe end with Ext JS 5, also covering some pieces of the backend required to make ourapplication work We will learn how to use Ext JS with hands-on examples covering somecomponents, how they work, and how to use them in each chapter

But first, you are going to learn what Ext JS is capable of if this is the first time you havecome into contact with the framework

Can we use Ext JS to manipulate DOM? Can we use it if we want pretty and user-friendlycomponents (forms, grids, trees, and so on)? Can we use it if we need some nice charts?

Can we use the Model View Controller (MVC) architecture to organize the application

with Ext JS? What if we want to use a two-way data-binding between the Model and theView? Can we do that using Ext JS? And what if we do not like the colors of Ext JS

components’ look and feel? Can we easily change it too? And now a difficult one; can wemake a build to obfuscate and optimize the CSS and JavaScript files of our applicationusing Ext JS? Is Ext JS responsive? Can we use it in mobile devices?

CuuDuongThanCong.com https://fb.com/tailieudientucntt

Before we get started, let’s make sure we understand a few of the core concepts Ext JS is

a frontend framework based on JavaScript and HTML5 This means Ext JS does notconnect to the database directly For storage, we can use one of the types of HTML5storage, such as Web SQL or local storage, but these types of storage allow us to storeonly 5 MB of data, which is very little for a common application

Usually, we want to use MySQL, Oracle, MS Server or any other database To be able tostore information in a database, we need to use a server-side language, such as PHP, Java,C#, Ruby, Python, Node.js, and so on Ext JS will communicate with the server-sidelanguage (or web services), and the server will connect to the database or any other

storage (documents repository, for example)

The following diagram exemplifies the architecture of an application developed with ExtJS: