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
02/05/2018

Generating Markup with Ext.XTemplate

Page of 168

Overview

In this lab, you will perform the following tasks:

  • Add event listeners to Ext.grid.Panel components.
  • Use an Ext.XTemplate to automatically generate HTML from data in a Store.
  • Bind data from a Grid to a Panel

Description

During this exercise you will enhance the Earmarks view to add a resizable and collapsible panel that displays the description of a selected Earmark.

In this exercise you will enhance the Earmarks view.

Steps

Open the Project

  1. Run Sencha Architect
  2. Select File > Open Project...
  3. Select /path/to/arch101/desktop/lab/exercise6/exercise6.xds. Note that this is the solution from the prior walkthrough.
Define the Detail View Panel
  1. In the Project Explorer, click on the Earmarks view.
  2. Confirm that the layout property for the view is set to border.
  3. From the Toolbox, drag a Panel and drop it onto the Earmarks view in the Project Inspector.
  4. Configure the following Ext.panel.Panel properties:
    • region: south
    • flex: 1
    • split: checked
    • itemId: earmarkdetail
    • styleHtmlContent: checked
    • autoScroll: true
    • collapseDirection: bottom
    • collapsed: checked
    • collapsible: checked
    • title: Details
Define the Panel Template
  1. In the Config panel, click on the [+] adjacent to the tpl property.
  2. In the Project Inspector, double-click on the tpl for the earmarkdetail view.
  3. Enter the following code to output information from an Earmark model instance:
Sponsor: {SPONSOR.HONORIFIC} {SPONSOR.FIRSTNAME} {SPONSOR.LASTNAME}  {SPONSOR.STATE}

{EARMARK_DESCRIPTION}

  1. Click on the Design button.
Tie everything together with an Event Binding
  1. In the Project Inspector, click on the earmarkGrid component.
  2. In the Config panel, click the [+] adjacent to the Selection Model property in the Config panel and choose Row Selection Model.
  3. In the Project Inspector, click on the MyRowSelectionModel1 object that is a child of the earmarkGrid component.
  4. In the Config panel, click the [+] adjacent to Event Bindings and choose the selectionchange event.
  5. In the Project Inspector, double-click on the selectionchange event listener to open the code editor.
  6. Enter the following code to apply data from the model to your detail panel:
var detailView = Ext.ComponentQuery.query('#earmarkdetail')[0];
detailView.update(selected[0].data);
  1. Click Save.
  2. Click Preview.
  3. Test your work by selecting a Sponsor and then choosing an earmark. Note that not every earmark has a detailed description.
  4.  

- End of Exercise -

Page of 168
comments powered by Disqus