Click to search on your search term.
Subscribe to Fig Leaf Tutorials

Need help with a project? Contact us at
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:

Exercise 3-1: Getting Started (Part 1 of 2)

Page of 168


In this lab, you will perform the following tasks:
  • Review the Ext JS 4 API Documentation and Examples
  • Review the final project app
  • Use Sencha Architect to quickly define a model, store, controller, and view and inspect the generated Ext JS 4 syntax for each.
  • Review the syntactic differences between Ext JS 4 and Sencha Touch.

The Ext JS 4 Home Page


During this exercise you will review the Ext JS 4 API documentation, focusing on a few key areas. You will also review the completed app that you'll build during this unit to familiarize yourself with its functionality and provide a context for the exercises that follow. In addition, you will use Sencha Architect to review the syntax associated with the Ext JS 4 class system and MVC framework.


Review the Ext JS 4 Examples

  1. Open your web browser to http://localhost/extjs4
  2. Click on the View the Examples button.
  3. Review the following examples:
    • Kitchen Sink
    • Web Desktop
    • Ext JS Calendar
    • Keyboard Feed Viewer
    • Infinite Grid wth Remote Filter
    • Multi-sort Dataview
    • Layout Manager
    • Localization (Dynamic)
Review the Ext JS 4 API Docs
  1. Open your web browser to
  2. Click on the Ext JS 4.2 link
  3. Click on the API Docs button
  4. Review the class-specific configuration properties and examples for the following classes that you will use throughout this course:
    • Ext.panel.Panel
    • Ext.toolbar.Toolbar
    • Ext.button.Button
    • Ext.window.Window
    • Ext.form.Panel
    • Ext.grid.Panel
    • Ext.chart.Chart
Review the Final Project App
  1. Open your browser to the following url:
  2. Review the functionality, note that you can multi-select congressmen from the left panel, which displays their expenditures in the top-right panel and compares the total amount of their spending in a bar chart at the bottom-right. A feedback button in the top-right launches a data entry form. You will create this app by writing fewer than 25 lines of code.


Page of 168
comments powered by Disqus