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


Need help with a project? Contact us at sales@figleaf.com.
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:
Ext JS 6 Bootcamp
12/04/2017

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

Page of 168

Overview

Throughout the remainder of this exercise you will use Sencha Architect to build a small application, depicted below, in order to better understand the syntactic differences between Sencha Touch and Ext JS 4.

Description

During this exercise you will use Sencha Architect to review the syntax associated with the Ext JS 4 class system and MVC framework. You will build an editable grid, depicted below, that reads and writes from HTML5 LocalStorage.

The final result of this exercise

Steps

Use Sencha Architect to Define a Model

  1. Open Sencha Architect
  2. Select File > New Project > Ext JS 4.2.x
  3. Click the Save button
  4. Click the Browse button and select /path/to/arch101/desktop/lab
  5. Enter a project name of exercise1
  6. Click Save
  7. In the Project Inspector, click on the [+] and select Model.
  8. In the Project Inspector, click on MyModel and configure the following property:

    • userClassName: Person
  9. In the Config panel, click on the [+] adjacent to the Fields property and enter the following field names:

    firstName, lastName

  10. In the Config panel, click on the [+] adjacent to the Proxy attribute and select localStorageProxy
  11. In the Project Inspector, click on MyLocalStorageProxy
  12. In the Config panel, set the id property to arch101demo
  13. Click on the Code button and review the generated syntax. Note that it differs from models defined in Sencha Touch in that no config property is present.
Use Sencha Architect to Define a View
  1. In Sencha Architect, click on the Design button.
  2. From the Toolbox, drag a Grid Panel and drop it onto the Design Canvas.
  3. Configure the following properties:
    • userClassName: persons.Grid
    • userAlias: personsgrid
    • Title: Edit Records
    • Store: Persons
  4. In the Project Inspector, click on the String object and configure the following properties:
    • dataIndex: firstName
    • text: First Name
    • flex: 1
  5. In the Config panel, click the [+] adjacent to Editor and select Text Field.
  6. In the Project Inspector, right-click on the Number column and select
    Transform > Ext.grid.column.Column
  7. In the Project Inspector, right-click on the Number column and select Transform > Ext.grid.column.Column
  8. In the Project Inspector, click on the Number object and configure the following properties:
    • dataIndex: lastName
    • text: Last Name
    • flex: 1
  9. In the Config panel, click the [+] adjacent to the Editor property and select Text Field.
  10. In the Project Inspector, right-click on the Date column and select Delete
  11. In the Project Inspector, right-click on the Boolean column and select Delete
  12. In the Project Inspector, click on persons.Grid
  13. In the config panel, click the [+] adjacent to the Grid Plugins property and select Row Editing Plugin.
  14. In the Project Inspector, click on the Row Editing Plugin and modify the following configuration property:
    • pluginId: personsGridEditor
  15. From the Toolbox, drag a Toolbar and drop it onto persons.Grid in the Project Inspector.
  16. From the Toolbox, drag a Button and drop it onto the Toolbar that you defined in the prior step.
  17. Configure the following button properties:
    • itemId: btnAdd
    • text: Add Record
  18. From the Toolbox, drag a Button object and drop it onto the Toolbar.
  19. Configure the following button properties:
    • itemId: btnDel
    • text: Delete Record
  20. In the Project Inspector, click on PersonGrid.
  21. Click on the Code button and review the generated syntax. Note the following:
    • Overrides of class config properties are defined directly in the class. No config object is required.
    • Grid column properties are defined through the initComponent method, which is analogous to the initialize() method in Sencha Touch.
    • Docked items are represented through the dockedItems array instead of using the docked property found in Sencha Touch.
Using Sencha Architect to Define a Controller
  1. In the Project Inspector, click on the [+] and select Controller
  2. Click on MyController and enter the following properties:
    • userClassName: Persons
  3. In the Config panel, click on the models property and select Person.
  4. Click the Remove button.
  5. In the Config panel, click on the Stores property and select Persons.
  6. Click the Remove button.
  7. In the Config panel, click on the Views property and select persons.Grid.

Listen for a Button Click

  1. In the Design Canvas, click on the Add Record button.
  2. In the Config panel, click on the [+] adjacent to Event Bindings.
  3. Select the Click event.
  4. In the Project Inspector, right-click on the click event handler and select Convert to Action > Persons
  5. In the Config panel, modify the controlQuery to be more specific by changing it to the following:

    personsgrid #btnAdd

  6. From the Toolbox, drag a Controller Reference and drop it onto the Persons Controller in the Project Inspector.
  7. Configure the following ControllerReference properties:
    • ref: personsGrid
    • selector: personsgrid
  8. In the Project Inspector, double-click on the onBtnAddClick handler. This will open the code editor.
  9. Enter the following script into the code editor:
// get grid plugin
var grid = this.getPersonsGrid();
var plugin = grid.getPlugin('personsGridEditor');

plugin.cancelEdit(); // cancel current editing

// add new record to store
var rec = Ext.create('MyApp.model.Person', {
    firstName: '', 
    lastName: ''
});
Ext.getStore('Persons').insert(0,rec);

// start editing new record
plugin.startEdit(0,0);

 

Delete a Selected Record from a Grid

  1. In the Design Canvas, click on the Delete Record button.
  2. In the Config panel, click on the [+] adjacent to Event Bindings.
  3. Select the Click event.
  4. In the Project Inspector, right-click on the click event handler and select Convert to Action > Persons
  5. In the Project Inspector, double-click on the onBtnDelClick handler. This will open the code editor.
  6. Enter the following code to remove a selected item from the data Store:
var grid = this.getPersonsGrid();
var plugin = grid.getPlugin('personsGridEditor');
var store = grid.getStore();
var sm = grid.getSelectionModel();

plugin.cancelEdit();
store.remove(sm.getSelection()); // delete row
if (store.getCount() > 0) {
    sm.select(0); // after delete, move selection cursor
}
  1. In the Project Inspector, click on the Persons controller.
  2. Click on the Code button and review the generated syntax. Note how the syntax constrasts with Sencha Touch controllers:
    • A config object does not wrap the models, stores, or views properties.
    • Refs cannot be used to attach event listeners
    • Refs have a move verbose syntax
    • Event listeners are attached by the init() method and event handler functions are specified as objects instead of strings.
  3. Click Save
  4. Click Settings
  5. Click on the Project tab
  6. Configure the following properties:
    • URL prefix: http://localhost/arch101/desktop/lab/exercise1/
  7. Click Save
  8. Click Preview
  9. Test the grid. You should be able to add, edit, and remove records. Note that you must double-click on a row in order to activate the rowEditing plugin.

-End of Exercise-

Page of 168
comments powered by Disqus