Ext JS Data-driven Application Design A step-by-step guide to building a user-friendly database in Ext JS using data from an existing database Kazuhiro Kotsutsumi BIRMINGHAM - MUMBAI Ext JS Data-driven Application Design 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: December 2013 Production Reference: 1171213 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78216-544-6 www.packtpub.com Cover Image by Tom Coulton ([email protected]) Credits Author Copy Editors Kazuhiro Kotsutsumi Alisha Aranha Roshni Banerjee Reviewers Mradula Hegde Gagandeep Singh Gladson Monteiro Adrian Teodorescu Deepa Nambiar Li Xudong Laxmi Subramanian Acquisition Editor Proofreader Joanne Fitzpatrick Lucy Rowland Commissioning Editors Indexer Llewellyn Rozario Hemangini Bari Deepika Singh Production Coordinator Technical Editors Kyle Albuquerque Rosmy George Manal Pednekar Cover Work Veena Pagare Kyle Albuquerque Project Coordinator Akash Poojary Foreword Ext JS Data-driven Application Design, by Kazuhiro Kotsutsumi, is a practical hands-on guide for both intermediate and expert JavaScript developers using Sencha's Ext JS 4.x framework. This book is aimed at developers who not only want to learn how to develop a real-life desktop application that can read from and write to a database, but also want to see how to use the framework's advanced features they might not yet have heard of. Kazuhiro begins describing the application development process by leading the reader through the database structure that the application will be using. He continues by laying out the application structure using the MCV (model-view-controller) pattern—decoupling the UI, data, and business-logic—while detailing how to use Sencha's CLI tool Sencha CMD (Sencha Command) to help in that process. He utilizes the framework's power by showing the reader how to use the advanced feature Ext Direct, describing in detail and with code examples what it is, how to add it, and how to use it in an application. He also brings in browser history support and again points out clearly how and why it can be used in an application. Finally, after describing how to add and read database entries into the application and back to the server, he finishes his book explaining how to visualize the data in different charts and importing to or exporting from the database. By using the carefully described features introduced in this book, you too can use this great architecture to build your own future applications. Stefan Stölzle Sr. Solutions Engineer - Professional Services Sencha, Inc. www.sencha.com About the Author Kazuhiro Kotsutsumi was born in Sapporo, Japan in 1979. He started using C/C++ at the age of 14 and proceeded to learn MASM, Delphi, ActionScript, PHP, C#, Perl, and so on. After working for a web systems development company while enrolled at college, he began programming built-in functions for cell phones. Having worked as a Project Manager and a freelance programmer for one year, he established his company Xenophy CO., LTD in 2006. Xenophy has always offered a variety of IT web solutions and has become synonymous with the promotion and expansion of Sencha in Japan. Currently, Xenophy is a Sencha Reseller and the official Sencha training partner in Japan. In September 2013, Xenophy announced the launch of Sencha Official Training in Japan, a fully localized course with Sencha's official training materials adapted for the Japanese market. He has already published two Sencha Ext JS guides in Japanese, including Sencha EXT JS 4 – A Practical Developing Guide and he recently co-authored a Sencha Touch guide. I would like to thank Yuuya Tanaka, Kazuhiro Yasunaga, Hisashi Nakamura, and Tom Miyagawa Coulton for making this book possible with their hard work and help. About the Reviewers Gagandeep Singh is a Software Engineer with five years' experience in distributed systems and data-driven web application development. He has expertise in Java and JavaScript. He holds a Master's degree in Computer Science from the University of Florida. He started his career with Infosys, then moved on to Siemens Research, and is now working with WalmartLabs. Adrian Teodorescu is a professional software developer who has been working with Sencha's frameworks since 2009. He has developed plugins, extensions, and apps with both Ext JS and Sencha Touch. You can check out some of his work on his website at www.mzsolutions.eu. Li Xudong is a frontend developer in Beijing, China. He is skilled in JavaScript, CSS, HTML, node.js, and Python, and wants to make things better. 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. TM 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: Data Structure 5 The structure of the application – User, Customer, Quotation, Quotations, Bill, and Bills 6 The user 7 The customer 7 Quotation and Quotations 8 Quotation 9 Quotations 9 Bill and Bills 10 Bill 10 Bills 10 Creating and dealing with the customer structure tables 11 The User table 11 The Customer table 11 The Quotation table 12 The Bill table 13 Creating each operation and testing 13 User authentication 13 Selecting the user list 14 Adding users 14 Updating the user information 14 Deleting users 15 The Customers table 15 The customer information list 15 Selecting the quotation list 16 Items 16