Book Image

Ext JS Data-driven Application Design

By : Kazuhiro Kotsutsumi
Book Image

Ext JS Data-driven Application Design

By: Kazuhiro Kotsutsumi

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Ext JS Data-driven Application Design
Kazuhiro Kotsutsumi
Dec, 2013 | 162 pages
No titles found
Table of Contents (14 chapters)
Ext JS Data-driven Application Design
Ext JS Data-driven Application Design
Credits
Credits
Foreword
Foreword
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Data Structure
Data Structure
The structure of the application – User, Customer, Quotation, Quotations, Bill, and Bills
The user
The customer
Quotation and Quotations
Bill and Bills
Creating and dealing with the customer structure tables
Creating each operation and testing
The Customers table
The Bill table
Summary
2
Planning Application Design
Planning Application Design
Setting up Sencha Cmd and a local development environment
Creating controllers
Using Ext.util.History for directly accessing a screen
Setting up Ext Direct
Summary
3
Data Input
Data Input
Creating the login page
Creating the MyAccount form
Creating the Quotation form
Creating the Bill form
Managing dirty and undirty apps
The Quotation form
The Bill form
Implementing the read and write processes using Ext Direct
Reading data
Writing data and validations
Summary
4
List and Search
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
Reporting
Creating charts on dashboard
Creating a pie chart
Creating a bar chart
Creating a line chart
Creating a radar chart
Summary
6
Data Management
Data Management
Designing Import and Export
Summary
Index
Index

The Quotation form

The Quotation form is mostly the same as Bill and MyAccount, but there is one big difference—there is a grid inside the form panel.

At first glance, the store that is configured to the grid panel looks as though it will communicate directly with the server, but this is not the case. To the very end, this form panel handles fields, so it doesn't handle the grid directly and there is no need to separate form data sending and grid data sending.

Then how do we solve this? The answer is to hand it a hidden field and make it save the grid data in the form of JSON. So, the grid store is fine to be left as a MemoryStore.

First, implement it to the same point as MyAccount. Because Quotation will hold a list, add to it so that refs can also acquire a list view.

This source code is very similar to the implementation from the previous step of the following classes:

  • MyApp.controller.myaccount.MyAccount

  • MyApp.controller.myaccount.Edit

Try implementing for Quotation remembering what we did...

Previous Section
End of Section 7
Next Section