Ext JS Data-driven Application Design - Kazuhiro Kotsutsumi - E-Book

Ext JS Data-driven Application Design E-Book

Kazuhiro Kotsutsumi

0,0
27,59 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

Sencha Ext JS is an industry leader for business-standard web application development. Ext JS is a leading JavaScript framework that comes with a myriad of components, APIs, and extensive documentation that you can harness to build powerful and interactive applications. Using Ext JS, you can quickly develop rich desktop web applications that are compatible with all major browsers.

This book will enable you to build databases using information from an existing database with Ext JS. It covers the MVC application architecture that enables development teams to work independently on one project. Additionally, the book teaches advanced charting capability, enabling developers to create state-of-the-art charts just once. These charts are compatible with major browsers without the need to rely on plugins.

This hands-on, practical guide will take you through the mechanics of building an application. In this instance, we will use this application to manage existing data structures in the form of a database.

You will begin by making SQL and tables in MySQL and will then move on to developing the project environment and introducing Sencha Cmd. You will learn to create a form to input data and monitor the state of the input, while seeing how Ext Direct will validate the form on the server side.

Finally, you will have a working application that is ready for you to customize to suit your needs. You can also use it as a template for any future projects when you need a similar database.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 136

Veröffentlichungsjahr: 2013

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Ext JS Data-driven Application Design
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Data Structure
The structure of the application – User, Customer, Quotation, Quotations, Bill, and Bills
The user
The customer
Quotation and Quotations
Quotation
Quotations
Bill and Bills
Bill
Bills
Creating and dealing with the customer structure tables
The User table
The Customer table
The Quotation table
The Bill table
Creating each operation and testing
User authentication
Selecting the user list
Adding users
Updating the user information
Deleting users
The Customers table
The customer information list
Selecting the quotation list
Items
The Bill table
Summary
2. Planning Application Design
Setting up Sencha Cmd and a local development environment
Options
Categories
Commands
Creating a project with Sencha Cmd
Creating a component test
Check how it's working
Making production build
CT in individual views
View component
Adding controllers
Creating views
Navigation
Dashboard
MyAccount
Quotation and bill
Viewport
Creating controllers
Main
Navigation
Dashboard
MyAccount
Quotation and bill
Using Ext.util.History for directly accessing a screen
Adding logic to the controller
Setting up Ext Direct
Creating the Ext Direct router
Creating the Ext Direct module
Applying Ext Direct to the client application
Testing Ext Direct
Summary
3. Data Input
Creating the login page
Creating the MyAccount form
Creating the Quotation form
Store
The field and grid components
TopToolbar
Creating the Bill form
Managing dirty and undirty apps
MyAccount
The Quotation form
The Bill form
Implementing the read and write processes using Ext Direct
Reading data
MyAccount
The Quotation form
The Bill form
Writing data and validations
Summary
4. List and Search
Creating the Quotation list
Creating the Quotation model
Updating the Quotation view
Implementing the Quotation controller
Loading the grid and implementing toolbar buttons
Managing toolbar buttons depending on the grid selection's status
Using a search trigger field and a relation URL hash
Summary
5. Reporting
Creating charts on dashboard
Pie chart for CT
Bar chart for CT
Line chart for CT
Radar chart for CT
Layout to dashboard
Creating a pie chart
Implementing the Direct function
Preparing the store for the pie chart
Creating the View
Implementing the controller
Creating a bar chart
Implementing the Direct function
Preparing the store for the chart
Creating the view
Implementing the controller
Creating a line chart
Implementing the Direct function
Preparing the store for the chart
Creating the view
Implementing the controller
Creating a radar chart
Implementing the Direct function
Preparing the store for the chart
Creating the view
Implementing the controller
Summary
6. Data Management
Designing Import and Export
Data format
Creating the Import and Export views in Quotation
Preparing the server side for export
Creating a temporary view for import
Creating the CT view for import
Creating Upload and Show Data in the grid
Executing the Import data
Summary
Index

Ext JS Data-driven Application Design

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

Kazuhiro Kotsutsumi

Reviewers

Gagandeep Singh

Adrian Teodorescu

Li Xudong

Acquisition Editor

Joanne Fitzpatrick

Commissioning Editors

Llewellyn Rozario

Deepika Singh

Technical Editors

Rosmy George

Manal Pednekar

Veena Pagare

Project Coordinator

Akash Poojary

Copy Editors

Alisha Aranha

Roshni Banerjee

Mradula Hegde

Gladson Monteiro

Deepa Nambiar

Laxmi Subramanian

Proofreader

Lucy Rowland

Indexer

Hemangini Bari

Production Coordinator

Kyle Albuquerque

Cover Work

Kyle Albuquerque

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.

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 PacktCopy and paste, print and bookmark contentOn 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.

Preface

Ext JS is a leading JavaScript framework that comes with a wealth of components, APIs, and extensive documentation that you can harness to build powerful and interactive desktop applications. By using Ext JS, you also quickly develop rich desktop web applications that are compatible with all major browsers. This book will take you step-by-step through building a clear and user-friendly sales database in Ext JS using information from an existing database.

Rather than just explaining MVC, this book is a hands-on, practical guide that will take you through the mechanics of building an application. By the end of the book you will have a working application that is ready to customize. You can also use the architecture from this book in future projects to simplify controls, improve maintenance, and expand applications with ease.

You should be able to grasp the idea of the example data structure introduced in this book. This book has been written on the premise that you are familiar with JavaScript and have basic operational knowledge of MySQL.

What this book covers

Chapter 1, Data Structure, focuses on preparing the basic foundations of your database. It will deal with an existing virtual company's data structure and the making of SQL and tables in MySQL.

Chapter 2, Planning Application Design, develops the environment of the project, while at the same time introducing Sencha Cmd. You will learn to design a simple application and optimize Ajax requests in order to use Ext Direct and Ext.util.History to control the screen with a URL.

Chapter 3, Data Input, discusses making a form to input data, then transmit that data to a server via Ext Direct. You will also learn to monitor the state of the input and how Ext Direct will validate it on the server side.

Chapter 4, ListandSearch, speaks mainly about displaying data that we read in Chapter 3, Data Input. However, users will no doubt want to search the data, so this chapter will also introduce data searches.

Chapter 5, Reporting, focuses on the implementation of the report displaying it with four different types of graphs on the dashboard.

Chapter 6, Data Management, focuses on the implementation of data import/export, done to restore or to keep a backup of the data.

What you need for this book

For using this book, you will need to be familiar with JavaScript and have a basic operational knowledge of MySQL.

Before you start reading, you need to have the following setup in your system:

The most recent version of Sencha Ext JS with GPL. You can download this from the Sencha website available at http://www.sencha.com/products/extjs/download/. This book was made based on Ext JS Version 4.2.2.Any good code editor.A web browser, any modern web browser is okay. In this book we are using Google Chrome, so we suggest that you use Google Chrome as well, if possible.

Who this book is for

This is a tutorial for intermediates in Sencha Ext JS that explains the process of building a UI that deals with an existing database.

This book is for anyone who wants to be able to systematically learn how to construct an application from the first step of implementation.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "The Bill table is almost the same as the Quotation table."

A block of code is set as follows:

UPDATE users SET email='[email protected]', passwd=SHA1(MD5('password')), lastname='Kotsutsumi', firstname='Kazuhiro', modified=NOW() WHERE id=1

Any command-line input or output is written as follows:

# The name of the package containing the theme scss for the app app.theme=ext-theme-classic ↓ # The name of the package containing the theme scss for the app app.theme=ext-theme-neptune

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "By doing this, you can keep deleting just by continuing to click on the Delete button."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback 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 that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

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

Customer support

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

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the erratasubmissionform link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

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

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Data Structure