Mastering Ext JS Learn how to build powerful and professional applications by mastering the Ext JS framework Loiane Groner BIRMINGHAM - MUMBAI Mastering Ext JS Copyright © 2013 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 author, 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: July 2013 Production Reference: 1010713 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.. ISBN 978-1-78216-400-5 www.packtpub.com Cover Image by Asher Wishkerman ([email protected]) Credits Author Project Coordinator Loiane Groner Hardik Patel Reviewers Proofreader Aafrin Chris Smith Vincenzo Ampolo Yiyu Jia Indexer Hemangini Bari Joel Watson Graphics Acquisition Editor Abhinash Sahu Edward Gordon Production Coordinator Lead Technical Editor Shantanu Zagade Anila Vincent Cover Work Technical Editors Shantanu Zagade Arvind Koul Worrell Lewis Vaibhav Pawar Amit Ramadas About the Author Loiane Groner lives in São Paulo, Brazil and has over eight years of software development experience. While at university, she demonstrated great interest in IT. She worked as an assistant teacher for two and a half years, teaching algorithms, data structures, and computing theory. She represented her university at the ACM International Collegiate Programming Contest – Brazilian Finals (South America Regionals) and also worked as Student Delegate of SBC (Brazilian Computing Society) for two years. She won a merit award in her senior year for being one of the top three students with better GPAs in the Computer Science department and also graduated with honors. She has worked at multinational companies such as IBM. Her areas of expertise include Java SE, Java EE, and also Sencha technologies (Ext JS and Sencha Touch). She is now working as Software Development Manager at a financial institution, where she manages overseas solutions. She also works as an independent Sencha consultant and coach. Loiane is also the author of Ext JS 4 First Look and Sencha Architect App Development, Packt Publishing. She is passionate about Sencha and Java, and is the leader of CampinasJUG/SouJava Campinas (Campinas Java Users Group) and coordinator of ESJUG (Espirito Santo Java Users Group) , both Brazilian JUGs. She also contributes to the software development community through her blogs: http://loianegroner.com (English) and http://loiane.com (Portuguese-BR), where she writes about IT careers, Ext JS, Sencha Touch, Sencha Architect, Java, and general development notes and also publishes screencasts. If you want to keep in touch, you can find Loiane on Facebook (https://www.facebook.com/loianegroner) and Twitter (@loiane). Acknowledgement I would like to thank my parents for giving me education, guidance, and advice, through all these years, and helping me be a better human being and professional. A very special thank you to my husband, for being patient and supportive and giving me encouragement. Also a big thanks to my friends and readers for all the support. About the Reviewers Aafrin is a self-taught programmer who has a cyber security and digital forensic background. He has been actively developing and prototyping web applications since 2003. He codes in various programming languages including C++, Java, PHP, ASP, VB, VB.net, and has also worked with frameworks such as EXTJS, CakePHP, CodeIgniter, and Yii. In his free time, he blogs at www.aafrin.com and researches on the computer security/computer forensic field. Vincenzo Ampolo has a Master's degree in Computer Systems Engineering at Politecnico di Milano, Italy. He has been a freelancer for over six years. His passion for technology started when he was nine, when he assembled his first computer. By 12 he learned the BASIC language. At 15 he learned C, then Python and Javascript. He is a free software evangelist and has been using the GNU/Linux system from the age of 14. He created the first usermode bootsplash system for Linux systems when he was 17. He moved to the silicon valley a year ago. He is a philanthropist and believes in the power of software communities and has helped in organizing many FOSS-related conferences such as Linux day and the Ubuntu release party. To all the people who believed in me. Yiyu Jia has been developing web applications since 1996. He worked as a technical leader and solution architect on various projects with Java and PHP as the major backend languages. He also has professional experience on interactive TV, middleware, and home gateway projects. He is especially interested in designing multichannel web applications. He 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 on a very large data set. He is now working on Big Data technologies. He can be reached at his blog and website. They are http://yiyujia.blogspot. com and http://www.idatamining.org respectively. 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. 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? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • 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. Table of Contents Preface 1 Chapter 1: Getting Started 7 Installing the required software 8 Presenting the application and its capabilities 10 The splash screen 10 The login screen 11 The main screen 11 User control management 13 MySQL table management 13 Content management control 14 The e-mail client module 16 Creating the structure of the application using MVC 17 A quick word about MVC 17 Creating the application 18 Creating the loading page 25 Summary 32 Chapter 2: The Login Page 33 The Login screen 33 Creating the Login screen 34 Client-side validations 38 Creating custom VTypes 40 Adding the toolbar with buttons 40 Running the code 42 Using itemId versus id – Ext.Cmp is bad! 43 Creating the login controller 44 Adding the controller to app.js 45 Listening to the button click event 46 Cancel button listener implementation 51