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

Using List Views to Visualize Data

Page of 168

An instance of Ext.dataview.List

Instances of Ext.dataview.List (xtype: list) are always bound to an Ext.data.Store. It automatically loops through the store, generating markup by passing model data through an Ext.XTemplate.

The following example was used to generate the list view, depicted at right:

Ext.define('MyApp.view.beers.List', {
 extend: 'Ext.dataview.List',
 alias: 'widget.beerlist',

 config: {
  store: 'Beers',
  grouped: true,
  onItemDisclosure: true,
  variableHeights: false,
  itemHeight: 60,
  itemTpl: [
   '{name} {type} 
', '{country}' ] } });

You will typically configure the following Ext.dataview.List properties:

Config
Property
Description
store Required Ext.data.Store. Supplies the data to generate the output markup.
itemTpl Required Ext.XTemplate. An Ext.XTemplate that is invoked for each model instance in the store, outputting markup to each item in the Ext.List.
grouped Boolean. Whether to group items under a common heading.
onItemDisclosure Boolean/Function/Object. True to display a disclosure icon (right arrow).
variableHeights Boolean. Whether the list contains items of variable height (typical when items contain image elements or line breaks). Set variableHeights to false to improve scrolling performance.
itemHeight Integer. The height, in pixels, of each line in the list. Should be set if variableHeights is set to false.
Page of 168
comments powered by Disqus