JavaScript Sencha: Ext JS

JavaScript developers looking to develop mobile and web applications using Sencha Ext JS and Touch


Expected Duration
66 minutes

Sencha Ext JS is a pure JavaScript application development framework for developing interactive applications for the web. This course takes you through developing a simple app using the model View Controller architecture, and covers features of Ext JS, such as custom classes, data stores, and UI features such as containers, layouts and components.


Generating a Simple App

  • start the course
  • download the free, open source version of Sencha Ext JS
  • download the Sencha command tool
  • use Command Prompt to start the Sencha Cmd web server, before accessing the web server in a web browser to verify that it is working
  • run Sencha Cmd’s generate app command and edit the initial code so a new application can be created
  • replace the default contents of app.js with a call to the Ext.define() method, define global application settings, and create a bootstrap using the launch function
  • restart the Sencha Cmd web server and access an application in the browser

Custom Classes

  • create and instantiate a simple class in Ext JS
  • create a simple class using the config property
  • run custom logic using the apply method that the config property automatically generates
  • use the statics keyword to create instances of a class that can be called directly

Model View Controller Architecture

  • describe the uses of the folders, subfolders, and files that are automatically generated when an application is created in Sencha
  • create an app.js file to define a new application
  • create and define the Controller for a new application
  • use a Controller’s control function to add an appropriate handler to a specific event
  • define a view to extend the list class, which creates a grid, and also demonstrates passing appropriate data to the grid
  • add a view referenced by name to a Controller’s views property, and render the view in the main viewport
  • find a specific element on a page and respond to a user action on that element
  • use the edit class and add an editing view to the Controller to allow records to be added by the user

Working with Data Stores

  • define a store by extending the Store class, defining fields, and providing an array of data points
  • use a store in a view
  • create a model for use with a store
  • save data as a model using a button with a save action and the updateUser handler
  • convert sample hard-coded data into a separate JSON file that could be loaded by the app
  • use JSON data in a store in JavaScript Sencha
  • use Ajax to send a POST request to the server to update and save the modified data to a file

Containers, Layouts and Components

  • use the app.js launch function to create a main panel with two child panels to help manage containers
  • use the layout property to position two child panels side-by-side in a browser
  • use the suspendLayout property to delay the layout of two child panels
  • use the Viewport container to specify that childPanel1 and childPanel2 are its items





Multi-license discounts available for Annual and Monthly subscriptions.