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

Creating Views and Using Grids (part 1 of 2)

Page of 168

Overview

In this lab, you will perform the following tasks:

  • Populate a combo box with data from a Store
  • Use the Datagrid to display data from a Store
  • Output a grouped grid

Description

During this exercise you will output data from the Sponsor and Earmarks stores into Grid panels. The data in the Earmarks panel will be grouped under the names of their sponsors.

Steps

Open the Project

  1. Run Sencha Architect
  2. Select File > Open Project...
  3. Select /path/to/arch101/desktop/lab/exercise4/exercise4.xds. Note that this is the solution from the prior walkthrough.
Define the Sponsors Grid View
  1. In the Project Inspector, click on the Sponsors view
  2. From the Toolbox, drag and drop a Grid Panel onto the Window object in the Design Canvas.
  3. Configure the following properties:
    • title: (none)
    • itemId: sponsorsgrid
    • columnLines: checked
    • store: Sponsors
    • frameHeader: unchecked
  4. In the Design Canvas, click on the first column of the grid (labeled String) in the grid and configure the following properties:
    • dataIndex: 'HONORIFIC'
    • text: 'Title'
    • flex: 1
  5. In the Design Canvas, right-click on the second column of the grid (labeled Number) and select Transform > Ext.grid.column.Column
  6. Configure the following properties for the column:
    • text: First Name
    • dataIndex: FIRSTNAME
    • flex: 1
  7. In the Design Canvas, right-click on the third column of the grid (labeled Date) and select Transform > Ext.grid.column.Column
  8. Configure the following properties for the column:
    • text: Last Name
    • dataIndex: LASTNAME
    • flex: 1
  9. In the Design Canvas, right-click on the fourth column of the grid (labeled Date) and select Transform > Ext.grid.column.Column
  10. Configure the following properties for the column:
    • text: Party
    • dataIndex: PARTY
    • flex: 1
  11. In the Design Canvas, right-click on the fourth column (Party) and select Duplicate
  12. Configure the following properties for the column:
    • text: State
    • dataIndex: STATE
    • width: 58
  13. In the Project Inspector, click on sponsorsgrid.
  14. In the config panel, click on the [+] adjacent to the Selection Model property and select Row Selection Model.
  15. In the Project Inspector, click on MyRowSelectionModel and configure the following properties:
    • mode: MULTI
    • allowDeselect: checked
Add a Toolbar to the Grid
  1. From the Toolbox, drag a Toolbar and drop it onto sponsorsgrid in the Project Inspector.
  2. From the Toolbox, drag a Combo Box and drop it onto the Toolbar that you defined in the prior step.
  3. Configure the following properties for the Combo Box:
    • store: States
    • flex: 1
    • itemId: stateFilter
    • fieldLabel: Filter By State:
    • displayField: label
    • valueField: abbr
    • forceSelection: checked
    • multiSelect: checked
    • queryMode: local
  4. Preview the app.

Your Sponsors panel should be populated with the names of the members of the United States congress. Clicking the Combo Box should display a list of US States. You should be able to select multiple items from both the combo box and the grid.

Checkpoint: Does your app resemble this?

Page of 168
comments powered by Disqus