Ext JS

Course Overview

From these course modules, you will learn the basics of building an ExtJS web application. You will learn the principles behind building that app, how to build an app from scratch, as well as how to navigate through the process of what controls and modules to use. You will learn a couple basic ExtJS controls, including the grid and form panels. You will learn how to use the ExtJS layout managers, as well as all the different types of layouts. Finally, a complete example application using the ExtJS build system (CMD) and MVC is put together.

At the end of the training, participants will be able to:

  • Prior experience in JavaScript, ajax, HTML
  • Familiarity with JavaScript Object Notation (JSON)
  • Prior experience in Cascading Style Sheets

Pre-requisite

3 days

Course Outline

  • Loading the Library

  • Ext Application Design
  • Introducing Sencha MVC

  • Anatomy of a UI created with Designer
  • Laying Out UI Components
  • Adding Components
  • Positioning Components
  • Layout Options
  • Configuring Components
  • Using Templates
  • Connecting to Data
  • Exporting a Project
  • Attaching Event Handlers to UI Components

  • Ext.Element
  • Ext.CompositeElement
  • Ext.DomHelper
  • Ext.DomQuery

  • Events in Ext & DOM Events
  • Event Handlers & Delegated Event Handling

  • Overview
  • Component Manager
  • Component vs. Element
  • Component configuration

  • Defining Panels
  • Headers
  • Resizing Panels
  • Defining Toolbars
  • Defining Layouts
  • HBOX
  • VBOX
  • Tabs
  • Viewport
  • TabPanel
  • GridPanel
  • FormPanel

  • Checkbox
  • ComboBox
  • CompositeField
  • DateField
  • DisplayField
  • Hidden
  • HtmlEditor
  • NumberField
  • Radio
  • SliderField
  • TextArea
  • TextField

  • Defining Models
  • Validating your Data
  • Defining Associations
  • Defining Proxies
  • Defining Stores
  • Working with Forms
  • Understanding Form Layout
  • Applying Validations

  • Introducing grid features
  • Defining a read-only grid
  • Editing within a grid

  • Ext.applysmd
  • Ext.util.Format

  • Creating a Class & Extending a Class
  • Extending a Component
  • Class System
  • Class Definition
  • Class Loading

Reviews