SkillSoft Explore Course – Lambers, Inc.

IT Skills Web Development and Graphic Design Scripting JavaScript

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.

Asset ID	sl_snch_a01_it_enus
Course Type	Video Course
Course Category	Web Development and Graphic Design

Objectives
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

Objectives

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