TemplateDataPanel

TemplateDataPanel

The TemplateDataPanel is a DataPanelLeaf controller and as such inherits all its base class' capabilities. For example, you can put ToolViews in a TemplateDataPanel. This controller is similar to a GridPanel, but it showa the records as "cards" in a provided HTML template. Use this controller for higher flexibility when displaying small amounts of record in a data view.

You can put a template data panel inside a List controller. It supports standard operations (such as add, view/edit, delete and refresh) and optional custom actions.

Configuration

You need to define a separate HTML template to be used for the data display. The yaml definition may include custom css classes, as in the following example:

Controller: List
  CenterController: TemplateDataPanel
    TemplateFileName: DollsCard.html
    TemplateView:
      Id: images-view
      SelectorClass: div.thumb-wrap
      OverClass: x-view-over

Field order equals the order of view table fields.

Templates

The HTML file referenced in the yaml definition must reside inside the Resources directory.

Here is an example of a template:

<style type="text/css">
...styles as required, such as thumb-wrap, thumb, etc.
</style>
<tpl for=".">
  <div class="thumb-wrap" id="{Doll_Id}">
    <div class="thumb"><img src="{Picture}" title="{Doll_Name}"></img></div>
    <span>{Doll_Name}</span>
    <span>Date Bought: {Date_Bought:date}</span><span>{Hair} hair</span><span>Dress size: {Dress_Size}</span>
  </div>
</tpl>

As you can see, you can iterate through the records with the tag and expand field values by enclosing field names in {}. For more information about ExtJS templating capabilities surfaced in Kitto, look here.