O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Ext JS Data-driven Application Design

Book Description

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.

  • Discover how to layout the application structure with MVC and Sencha Cmd
  • Learn to use Ext Direct during the application build process
  • Understand how to set up the history support in the browser

In Detail

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.

Table of Contents

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