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 2 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 the continuation of this exercise you will output data from the Earmarks store into the Grid depicted below. The data in the Earmarks panel will be grouped under the names of their sponsors.

The Earmarks panel that you will implement during this exercise

Steps

Define the Earmarks Grid

  1. In the Project Inspector, click on the Earmarks view
  2. From the Toolbox, drag and drop a Grid Panel onto the Window object in the Design Canvas.
  3. Configure the following Ext.grid.Panel properties:
    • title: (none)
    • itemId: earmarkGrid
    • store: Earmarks
    • columnLines: checked
    • frameHeader: unchecked
  4. In the Config panel, click on the [+] adjacent to the Grid Features option and select Grouping Feature.
  5. In the Project Inspector, click on the MyGroupingFeature object and configure the following property:
    • hideGroupedHeader: checked
  6. In the Config panel, click on the [+] adjacent to the groupHeaderTpl property.
  7. In the Project Inspector, double-click on the groupHeaderTpl object and enter the following code:
{columnName}: {name} ({[values.rows.length]} Earmarks)
  1. Click the Design button
  2. In the Design Canvas, right-click on the first column of the grid (labeled String) and select Transform > Ext.grid.column.Number
  3. Configure the following properties for the column:
    • width: 50
    • dataIndex: ENACTED_YEAR
    • text: Year
    • format: 0000
  4. In the Design Canvas, right-click on the first column of the grid (labeled Number) and select Transform > Ext.grid.column.Column
  5. Configure the following properties for the column:
    • dataIndex: AGENCY_TITLE
    • flex: 1
    • text: Agency
  6. In the Design Canvas, right-click on the Agency Column header and select Duplicate.
  7. Configure the following properties for the column:
    • dataIndex: BUREAU_TITLE
    • text: Bureau
  8. In the Design Canvas, right-click on the fourth column (labeled Date) and select Delete
  9. In the Design Canvas, right-click on the fifth column (labeled Boolean) and select Transform > Ext.grid.column.Template
  10. Configure the following properties:
    • align: right
    • text: Amt
    • width: 100
  11. In the Config panel, click on the [+] adjacent to the tpl property.
  12. In the Project Inspector, double-click on the Amt column's tpl object. This will launch the Code Editor.
  13. Enter the following code:
{[Ext.util.Format.usMoney(values.AMT_CONF * 1000)]}
  1. Click the Design button.
Test the Application
  1. Click Save.
  2. Click Preview.
  3. Open your browser's debugger console and type the following line of code:
Ext.getStore('Earmarks').load()
  1. Verify that your Earmarks grid panel displays data as indicated below:
The Earmarks panel displaying data from the Earmarks Store.
Page of 168
comments powered by Disqus