Ext JS Data-driven Application Design

Chapter 1. Data Structure

This book will take you step-by-step through the process of building a clear and user-friendly sales management database in Ext JS using information from an existing database.

This book is intended for intermediate Ext JS developers with operational knowledge of MySQL and who want to improve their programming skills and create a higher-level application.

The finished application will give you a working sales management database. However, the true value of this book is the hands-on process of creating the application, and the opportunity to easily transfer and incorporate features introduced in this book in your own future applications.

The standout features we will look at while building this application are as follows:

History-supported back button functionality: We will customize the Ext JS function to create a lighter method to scroll forwards and backwards while staying on a single page.
More efficient screen management: We'll learn how simply registering a screen and naming conventions can help you cut down on the screen change processes; meaning you can focus more on the implementation behind each screen. Also, it will be easier to interact with the history just by conforming to this architecture.
Communication methods with Ext.Direct: Ext.Direct has a close affinity with Ext applications which makes for easier connection, easier maintenance, and removes the need for the client side to change the URL. Also, if you use Ext.Direct, you can reduce the stress on the server side as it combines multiple server requests into just one request.
Data display methods with charts: In Ext JS, by simply adjusting the store and the data structure set to display in a grid, we can display the data graphically in a chart.

This chapter will give you the basic building blocks of your database. In this chapter of the book, you will write the SQL code and and create tables in MySQL.

Creating each operation and testing

Because we will use PHP in later stages, let's prepare each operation now. Here, we will insert some temporary data.

Remember to check that the acquisition and update operations are working properly.

User authentication

These are some SQL code you can use to develop your database.

You can look for a user by inputting an e-mail address and password. You can assume it was successful if the count is 1.

For increased password security, after having carried out MD5 encryption, you should store the password as a character string of 40 characters after being put through SHA1.

SELECT
    COUNT(id) as auth
FROM
    users
WHERE
    users.email = 'extkazuhiro@xenophy.com'
AND
    users.passwd = SHA1(MD5('password'))
AND
    users.status = 1;

Selecting the user list

This is used when you want to collect data for use in a grid. Make note of the fact that we are not performing the limit operation with PagingToolbar:

SELECT
    users.id,
    users.email,
    users.lastname,
    users.firstname
FROM
    users
WHERE
    users.status = 1;

Adding users

To add a user, put the current time in created and modified:

INSERT INTO users (
    email,
    passwd,
    lastname,
    firstname,
    modified,
    created
) VALUES (
    'someone@xenophy.com',
    SHA1(MD5('password')),
    'Kotsutsumi',
    'Kazuhiro',
    NOW(),
    NOW()
);

Updating the user information

Every time the modified file should be set to NOW() for it to be used as a time stamp. Other fields should be updated as needed.

UPDATE
    users
SET
    email='extkazuhiro@xenophy.com',
    passwd=SHA1(MD5('password')),
    lastname='Kotsutsumi',
    firstname='Kazuhiro',
    modified=NOW()
WHERE
    id=1

Deleting users

Deletion from this system is not a hard purge where the user data is permanently deleted. Instead we will use a soft purge, where the user data is not displayed after deletion but remains in the system. Therefore, note that we will use UPDATE, not DELETE. In the following code, status=9 denotes that the user has been deleted but not displayed. (status=1 will denote that the user is active).

UPDATE
    users
SET
    status=9
WHERE
    id=1

Creating and dealing with the customer structure tables

We will be using MySQL, and the database character is set to utf8 and collation is set to utf8_bin. When SQL describes the details of what we defined previously, each of these components are as follows.

The User table

The User table we prepared earlier becomes operational when the following code is executed. It's important to remember to include AUTO_INCREMENT in the id column; otherwise, you have to input it manually:

SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;

DROP TABLE IF EXISTS 'users';
CREATE TABLE 'users' (
  'id' bigint(20) NOT NULL AUTO_INCREMENT,
  'status' tinyint(1) NOT NULL DEFAULT '1',
  'email' varchar(255) NOT NULL,
  'passwd' char(40) NOT NULL,
  'lastname' varchar(20) NOT NULL,
  'firstname' varchar(20) NOT NULL,
  'modified' datetime DEFAULT NULL,
  'created' datetime NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

SET FOREIGN_KEY_CHECKS = 1;

The Customer table

Once the following code is executed, the Customer table becomes operational:

SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;

DROP TABLE IF EXISTS 'customers';
CREATE TABLE 'customers' (
  'id' bigint(20) NOT NULL AUTO_INCREMENT,
  'status' tinyint(1) NOT NULL DEFAULT '1',
  'name' varchar(255) NOT NULL,
  'addr1' varchar(255) NOT NULL,
  'addr2' varchar(255) DEFAULT NULL,
  'city' varchar(50) NOT NULL,
  'state' varchar(50) NOT NULL,
  'zip' varchar(10) NOT NULL,
  'country' varchar(50) NOT NULL,
  'phone' varchar(50) NOT NULL,
  'fax' varchar(50) DEFAULT NULL,
  'modified' datetime DEFAULT NULL,
  'created' datetime NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

SET FOREIGN_KEY_CHECKS = 1;

This is the foundation of creating an initial set of tables that can later be populated with data.

The Quotation table

This is the corresponding code for the Quotation table. As with the Customer table, this code snippet will lay the foundation of our table.

SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;

DROP TABLE IF EXISTS 'quotation';
CREATE TABLE 'quotation' (
  'id' bigint(20) NOT NULL AUTO_INCREMENT,
  'status' tinyint(1) NOT NULL DEFAULT '1',
  'customer' bigint(20) NOT NULL,
  'note' text NOT NULL,
  'modified' datetime DEFAULT NULL,
  'created' datetime NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

DROP TABLE IF EXISTS 'quotations';
CREATE TABLE 'quotations' (
  'id' bigint(20) NOT NULL AUTO_INCREMENT,
  'status' tinyint(1) NOT NULL DEFAULT '1',
  'parent' bigint(20) NOT NULL,
  'description' varchar(255) NOT NULL,
  'qty' int(11) NOT NULL,
  'price' int(11) NOT NULL,
  'sum' int(11) NOT NULL,
  'modified' datetime DEFAULT NULL,
  'created' datetime NOT NULL,
  PRIMARY KEY ('id'),
  KEY 'parent' ('parent')
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

SET FOREIGN_KEY_CHECKS = 1;

The Bill table

As with the previous two code snippets, the following code for the Bill table is very similar to the Quotation table, so this can be found in the source file under 04_bill_table.sql.

These are all the tables we need for this database. Now let's move on to testing after creating each operation.

Creating each operation and testing

Because we will use PHP in later stages, let's prepare each operation now. Here, we will insert some temporary data.

Remember to check that the acquisition and update operations are working properly.

User authentication

These are some SQL code you can use to develop your database.

You can look for a user by inputting an e-mail address and password. You can assume it was successful if the count is 1.

For increased password security, after having carried out MD5 encryption, you should store the password as a character string of 40 characters after being put through SHA1.

SELECT
    COUNT(id) as auth
FROM
    users
WHERE
    users.email = 'extkazuhiro@xenophy.com'
AND
    users.passwd = SHA1(MD5('password'))
AND
    users.status = 1;

Selecting the user list

This is used when you want to collect data for use in a grid. Make note of the fact that we are not performing the limit operation with PagingToolbar:

SELECT
    users.id,
    users.email,
    users.lastname,
    users.firstname
FROM
    users
WHERE
    users.status = 1;

Adding users

To add a user, put the current time in created and modified:

INSERT INTO users (
    email,
    passwd,
    lastname,
    firstname,
    modified,
    created
) VALUES (
    'someone@xenophy.com',
    SHA1(MD5('password')),
    'Kotsutsumi',
    'Kazuhiro',
    NOW(),
    NOW()
);

Updating the user information

Every time the modified file should be set to NOW() for it to be used as a time stamp. Other fields should be updated as needed.

UPDATE
    users
SET
    email='extkazuhiro@xenophy.com',
    passwd=SHA1(MD5('password')),
    lastname='Kotsutsumi',
    firstname='Kazuhiro',
    modified=NOW()
WHERE
    id=1

Deleting users

UPDATE
    users
SET
    status=9
WHERE
    id=1

Filter reviews by

All

Amazon verified reviews

Sagi Jan 25, 2014

In this rather short book (definitely worth the price) you will walk through the steps needed to create a data driven solution using ExtJS.To learn this, the author teaches you to build a sales management database and system.You will learn how to choose entities accordingly (though I believe most of the people coming to this sort of book will already be able to make this happen).You will learn how to build ExtJS controllers to respond to users' requests, needed views and understand the workflow, a "soft" back button to work with the framework and more.One of the major gems you will find in this book is one of the things many people who are new to working with extjs combined with a server is the user of Ext.Direct with php.(Though I'm not a big fan of php! I'd would rather it be written for nodejs..but that's just me)In conclusion this book is definitely a tool for those who want to escalate their knowledge of extjs to the next level and develop products for this growing market.

Amazon Verified review

Shinobu Kawano Feb 09, 2014

If you are totally beginner of Ext JS, and want to learn how to implement a real-life application with it, I recommend “Mastering Ext JS“. Because the contents of “Ext JS Data-driven Application Design” is quite unique and I don’t know it’s a best practice or not. That’s why I think it’s not fit for a beginner.The other hand, you have experience of Ext JS app development, and want to learn how to create more quality architecture, this book might be for you. You will learn a new concept and it would be a hint to consider how to create a higher-level applications. I learned many ideas from this book and was inspired.

Luigi Feb 08, 2014

I read very quickly this book, that is short and condensed. It is a step-by-step guide that drives you through the building of an ExtJS application that interacts with data. It explains how to leverage on ExtJS MVC model for building a robust and easy to mantain application. I appreciated especially the Reporting chapter, where it's explained how to use data for builing charts (that are part of the ExtJS framework).

Alok Ranjan Feb 03, 2014

This book seems to be the first book which attempts to explain step-by-step process to create the whole application using ExtJS. Most of the book often talks about the concept, which at times leaves some of the key aspects of application development and support. After following the book very closely, eventually you get an application and that should give confidence to first timers who want to build their own application.While I had a bit high expectation from the book, I must say that the overall presentation is pretty average. I found that words used in the book were often the synonyms which I am not very used to. So, it took some time to have appropriate mapping of words with the concept. At times I felt as if the author has put some incorrect word. However, after reading couple of chapter it was clear that instead of creating a class the author is making a class. Also, I wanted to build the application incrementally and it took time to understand the incremental changes and put them into main project.Some of the statements were so casual that I was wondering what was the need for putting that statement. For example in one of the place the author says “It has been a while since we saw an image, so we’ve displayed a column for now; however, let’s start to create the necessary objects for this list.”.Of course I am passionate about Sencha ExtJS and after going through this book at times I felt that the reader will get an impression that the ExtJS is something difficult to grasp and master. The presentation of content could have been much better. I would have liked to see the basic concepts of an application being explained and then make use of that concept to give the readers the step-by-step process for creating an application. I felt that there was too much to-and-fro and reference to Component Testing again and again was a killer.You can read my complete review comment on below URL:http://blogs.walkingtree.in/2014/01/31/extjs-data-driven-book-review/

G. Hayward May 29, 2014

I am very disappointed with Packet Publishing for put out a book that can only be described as a half finished effort. The example files do not work as described by the book. The sentence structure is very hard to follow.

Ext JS Data-driven Application Design: Learn how to build a user-friendly database in Ext JS using data from an existing database with this step-by-step tutorial. Takes you from first principles right through to implementation.

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the author

FAQs

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access