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 6 By Example

Book Description

Create powerful, real-world web applications with Ext JS 6 using sample projects

About This Book

  • Explore, debug, and get practical by extending the sample projects, including a sample RESTful API project in Ext JS 6
  • Gain a quick and easy understanding through working source code and get an explanation of multiple cool sample projects
  • A project-based guide to help you get your hands on real-world applications

Who This Book Is For

If you’re a front web developer who is looking to learn a new JavaScript framework, or if you already know about Ext JS and are looking for a practical resource with multiple example projects to get expert-level knowledge in Ext JS, then this guide will be a great resource for you. A basic understanding of HTML, CSS, and JavaScript is expected.

What You Will Learn

  • Install Ext JS Sencha Cmd 6 and debugging tools such as Illumination, App Inspector, and Sencha Fiddle
  • Understand and apply the core concepts and querying capabilities of Ext JS 6
  • Dive deep into powerful components such as Grid, Data View, Trees, and different kinds of charts including 3D charts as well as Bar, Area, Pie, Line charts
  • Discover how an Ext JS 6 application communicates with the server side through Data Packages such as Stores and Proxies
  • Discover how to create responsive web applications and client-side routing
  • Acquire and implement knowledge on accessibility, localization, and the drag-and-drop and theming capabilities of Ext JS 6

In Detail

Ext JS is one of the most famous JavaScript frameworks used to create rich interactive web applications using techniques such as Ajax, DHTML, JSON, and DOM scripting.

It provides a complete rich set of GUI controls, has an excellent API for AJAX and REST, and helps users to organize their code with Model View ViewModel (MVVM) or the MVC architecture, and supports two-way data binding, responsive layouts, responsive design, and more.

It is an extensive, one-stop-shop to build an JavaScript RIA application.

This book starts with a clear step-by-step installation guide for Ext JS 6 and the additional tools required for development on both Mac and Windows operating systems. It then covers the core concepts and fundamentals of Ext JS 6.

We move on to focus on multiple basic GUI controls such as buttons, message boxes, and menus, and a sample project that covers the fundamental and basic GUI controls. You’ll also learn how to design a form with form fields such as a text field, number field, date picker, label, and radio button, and learn about form validation. We proceed to show you how to organize your code using the MVVM application architecture, and you’ll then jump into advanced controls such as Grids, Trees, Data Views, and Charts.

You’ll also learn about the API required for AJAX and REST communication, and learn all need to know about Ext JS Data Packages. A working RESTful API sample project is included to help you explore the Data Packages. Finally, we end with a discussion on responsive design, theming your application, and the available plugins.

Style and approach

This is an example-based guide to help you develop rich Internet applications using Ext JS 6. Most of the chapters start with a particular concept and code example, and end with a cool sample project that uses the concepts learned in the chapter.

Downloading the example code for this book. 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.

Table of Contents

  1. Ext JS 6 By Example
    1. Table of Contents
    2. Ext JS 6 By Example
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. 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. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Getting Started with Ext JS
      1. Why Ext JS?
        1. Cross-browser support
        2. Rich UI components
        3. Two-way binding
        4. Architectural pattern for JavaScript
        5. Simplifying a complicated operation
        6. Easy DOM access
        7. Client-side routing
        8. Support for accessibility
      2. An introduction to Ext JS
        1. The universal application
      3. Setting up Ext JS
        1. Sencha Cmd
          1. Java Runtime Environment (JRE)
          2. Ruby
          3. Installing Sencha Cmd
      4. Generating the Ext JS application using Sencha Cmd
      5. The application architecture
        1. Model
        2. View
        3. Controller
        4. View model
          1. View model – MainModel.js
          2. Controller – MainController.js
          3. View – main.js
      6. Exploring Sencha Cmd commands
        1. The Sencha command format
        2. Help
        3. Upgrading Sencha Cmd
        4. Generating an application
        5. Building the application
        6. Launching the application
        7. The code generation
        8. Upgrading your application
      7. Debugging an Ext JS application
      8. Illumination
        1. The features of Illumination
          1. Object naming
          2. Element highlighting
            1. The contextual menu
      9. App Inspector
        1. Sencha Fiddle
      10. Tha development IDE
      11. Summary
    9. 2. Core Concepts
      1. The class system
        1. Ext
          1. application
          2. define
          3. create
          4. onReady
          5. widget
          6. getClass
          7. getClassName
          8. Ext.Base
          9. Ext.Class
          10. Ext.ClassManager
          11. Ext.Loader
      2. Events
        1. Adding listeners
        2. Removing listeners
        3. The DOM node event handling
      3. Accessing DOM
        1. Ext.get
        2. Ext.query
        3. Ext.select
          1. Multiple selections
          2. Selection root
          3. Selection chaining
        4. Ext.ComponentQuery
      4. Components, containers, and layouts
        1. Components
        2. Containers
        3. Layouts
          1. updateLayout
          2. suspendLayout
          3. The absolute layout
          4. The accordion layout
          5. The anchor layout
          6. The border layout
          7. The card layout
          8. The center layout
          9. The column layout
          10. The fit Layout
          11. The hbox layout
          12. The table layout
          13. The VBox layout
      5. Summary
    10. 3. Basic Components
      1. Getting familiar with basic components
        1. Ext.Button
        2. Ext.MessageBox
      2. Forms and form fields
        1. Ext.form.Panel
      3. Fields
        1. Ext.form.field.Text
        2. Ext.form.field.Number
        3. Ext.form.field.ComboBox
        4. Ext.form.field.HtmlEditor
      4. The form field validation
        1. Events in the form panel
        2. Form field containers
        3. Ext.form.CheckboxGroup
        4. Ext.form.FieldContainer
        5. Ext.form.RadioGroup
        6. Submitting a form
        7. Menus and toolbar
      5. The customer feedback form design
      6. Calculator – a sample project
        1. The folder structure
          1. App – app.js
        2. MVC and MVVM – Revisit
          1. Model
          2. View
          3. Controller
          4. ViewController and Controller
          5. View model
        3. View — Main.js
        4. Controller — MainController.js
        5. ViewModel — MainViewModel.js
      7. Summary
    11. 4. Data Packages
      1. Model
        1. Field
          1. The data conversion
          2. Validators
          3. Relationships
            1. One-to-one
            2. One-to-many
            3. Many-to-many
          4. Custom field types
      2. Store
        1. The inline data store
        2. Filtering and sorting
        3. Accessing the store
          1. Accessing the store using StoreManager
          2. Accessing the store using Ext.app.ViewModel
        4. Store events
        5. The store in ViewModel
      3. Proxies
        1. The client-side proxy
          1. The memory proxy
          2. The LocalStorage proxy
          3. The SessionStorage proxy
        2. The server-side proxy
      4. To do – a RESTful sample project
      5. Summary
    12. 5. Working with Grids
      1. The basic grid
      2. Sorting
        1. Renderer
        2. Filtering
        3. Pagination
      3. Cell editing
      4. Row editing
      5. Grouping
      6. The pivot grid
      7. The company directory – a sample project
      8. Summary
    13. 6. Advanced Components
      1. The tree panel
        1. The basic tree
      2. The tree grid
      3. Data views
      4. The picture explorer – a sample project
      5. Drag and drop
        1. Configure the items as draggable
        2. Create the drop target
        3. Complete the drop target
      6. Summary
    14. 7. Working with Charts
      1. Charts
        1. Chart types
          1. The cartesian chart
          2. The polar chart
          3. The spacefilling chart
      2. Bar and column charts
        1. The basic column chart
        2. The bar chart
        3. The stacked chart
        4. The 3D bar chart
        5. Area and line charts
          1. The area chart
          2. The line chart
        6. The pie chart
          1. The basic pie chart
        7. The donut chart
        8. The 3D pie chart
      3. The expense analyzer – a sample project
      4. Summary
    15. 8. Theming and Responsive Design
      1. An introduction to SASS
        1. Variables
        2. Mixins
        3. Nesting
      2. Theming
        1. Creating a custom theme
        2. SASS variables
        3. Creating a new component UI using SASS mixins
        4. JS overrides
        5. Images
        6. Styling your application
      3. Responsive design
        1. responsiveConfig
      4. Summary
    16. Index