/**
 * @class Ext.dataview.List
 * @extend Ext.dataview.Component
 * @xtype list
 *
 * List is a custom styled DataView which allows Grouping, Indexing, Icons, and a Disclosure.
 *
 *     @example packages=[reactor]
 *     import React, { Component } from 'react'
 *     import { ExtReact, List } from '@sencha/ext-react';
 *
 *     export default class MyExample extends Component {
 *
 *         store = new Ext.data.Store({
 *             data: [
 *                 {title: 'Item 1'},
 *                 {title: 'Item 2'},
 *                 {title: 'Item 3'},
 *                 {title: 'Item 4'}
 *             ]
 *         });
 *
 *         render() {
 *             return (
 *                 <ExtReact>
 *                     <List
 *                         itemTpl="{title}"
 *                         store={this.store} 
 *                     />
 *                 </ExtReact>
 *             )
 *         }
 *     }
 *
 * A more advanced example showing a list of people grouped by last name:
 *
 *     @example packages=[reactor]
 *     import React, { Component } from 'react'
 *     import { ExtReact, List, Button } from '@sencha/ext-react';
 *
 *     export default class MyExample extends Component {
 *
 *         store = new Ext.data.Store({
 *             data: [{
 *                 firstName: 'Peter',
 *                 lastName: 'Venkman'
 *             }, {
 *                 firstName: 'Raymond',
 *                 lastName: 'Stantz'
 *             }, {
 *                 firstName: 'Egon',
 *                 lastName: 'Spengler'
 *             }, {
 *                 firstName: 'Winston',
 *                 lastName: 'Zeddemore'
 *             }],
 *
 *             sorters: 'lastName',
 *
 *             grouper: {
 *                 groupFn: function(record) {
 *                     return record.get('lastName')[0];
 *                 }
 *             }
 *         });
 *
 *         render() {
 *             return (
 *                 <ExtReact>
 *                     <List
 *                         itemTpl="{firstName} {lastName}"
 *                         store={this.store} 
 *                         grouped
 *                     />
 *                 </ExtReact>
 *             )
 *         }
 *     }
 *
 * If you want to dock items to the bottom or top of a List, you can use the scrollDock configuration on child items in this List. The following example adds a button to the bottom of the List.
 *
 *     @example packages=[reactor]
 *     import React, { Component } from 'react'
 *     import { ExtReact, List, Button } from '@sencha/ext-react';
 *
 *     export default class MyExample extends Component {
 *
 *         store = new Ext.data.Store({
 *             data: [{
 *                 firstName: 'Peter',
 *                 lastName: 'Venkman'
 *             },
 *             {
 *                 firstName: 'Raymond',
 *                 lastName: 'Stantz'
 *             },
 *             {
 *                 firstName: 'Egon',
 *                 lastName: 'Spengler'
 *             },
 *             {
 *                 firstName: 'Winston',
 *                 lastName: 'Zeddemore'
 *             }]
 *         });
 *
 *         render() {
 *             return (
 *                 <ExtReact>
 *                     <List
 *                         itemTpl="{firstName} {lastName}"
 *                         store={this.store} 
 *                     >
 *                         <Button
 *                             scrollDock="bottom"
 *                             docked="bottom"
 *                             text="load more..."
 *                         />
 *                     </List>
 *                 </ExtReact>
 *             )
 *         }
 *     }
 */
 
/**
 * @method onNavigate
 * This method is called by the {@link #cfg!navigationModel} when navigation events are
 * detected within this DataView.
 *
 * It may be overridden to control the linkage of navigation events such as
 * taps, clicks or keystrokes detected by the {@link #cfg!navigationModel} to
 * the {@link #cfg!selectionModel}.
 *
 * `callParent` if you wish selection to proceed from the passed event.
 * @param {Ext.event.Event} e The UI event which caused the navigation.
 */
 
/**
 * @event disclose
 * @preventable
 * Fires whenever a disclosure is handled
 * @param {Ext.dataview.List} this The List instance
 * @param {Ext.data.Model} record The record associated to the item
 * @param {HTMLElement} target The element disclosed
 * @param {Number} index The index of the item disclosed
 * @param {Ext.EventObject} e The event object
 */
 
/**
 * @method getItem
 * Gets a list item by record.
 * @param {Ext.data.Model} record The record
 * @return {Ext.dataview.component.(Simple)ListItem} The list item, if found.
 * `null` if no matching item exists.
 */
 
/**
 * @method getScrollDockedItems
 * Returns all the items that are docked in the scroller in this list.
 * @return {Ext.Component[]} An array of the scrollDock items
 */
 
/**
 * @method scrollToRecord
 * Scrolls the list so that the specified record is at the top. <-- NO. Scroll *into view*.
 *                                                              === TODO: fix scrollTo API
 * @param {Ext.data.Model} record Record in the store to scroll to.
 * @param {Boolean} [animate=false] Determines if scrolling is animated.
 * @param {Boolean} [overscroll=true] Determines if list can be overscrolled.
 */
 
/**
 * @cfg {Object} container
 * This config is used to control the internal {@link Ext.Container} created to
 * manage this list's items. One common use for this is to apply a {@link #userCls}
 * to the item container.
 *
 *      {
 *          xtype: 'list',
 *          container: {
 *              userCls: 'mylist-cls'
 *          },
 *          ...
 *      }
 *
 * @accessor
 * @since 6.0.1
 */
 
/**
 * @cfg {Boolean/Object} [indexBar=false]
 * Set to `true` to render an alphabet IndexBar docked on the right. This can also
 * be a config object for the {@link Ext.dataview.IndexBar IndexBar} component.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [preventSelectionOnDisclose=true]
 * `true` to prevent the item selection when the user
 * taps a disclose icon.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [pinHeaders=true]
 * Whether or not to pin headers on top of item groups while scrolling for an iPhone native list experience.
 * @accessor
 */
 
/**
 * @cfg {Object} pinnedHeader
 * A config object for the pinned header.  Only applicable when {@link #pinHeaders}
 * is `true`.
 */
 
/**
 * @cfg {Boolean} [grouped=null]
 * Whether or not to group items in the provided Store with a header for each item.
 * @accessor
 */
 
/**
 * @cfg {String/String[]/Ext.XTemplate} groupHeaderTpl
 * A single string or an array of strings (optionally followed by an
 * object containing template methods) used to create an `Ext.XTemplate`, or an
 * `Ext.XTemplate` instance.
 *
 * A single string:
 *
 *       groupHeaderTpl: 'Group: {name}'
 *
 * Using a string array (followed by an options object):
 *
 *       groupHeaderTpl: [
 *           'Group: ',
 *           '<div>{name:this.formatName}</div>',
 *           {
 *               formatName: function(name) {
 *                   return Ext.String.trim(name);
 *               }
 *           }
 *       ]
 *
 * The data object available to the template provides the following properties:
 *
 *  * `name` The grouping string of the {@link Ext.data.Store#groupField groupField}
 *    for the group header. This string is the string produced by grouper's
 *    {@link Ext.util.Grouper#groupFn groupFn}.
 *  * `value` The value of the {@link Ext.data.Store#groupField groupField}
 *    for the group header being rendered.
 *  * `columnName` The column header associated with the field being grouped
 *    by *if there is a column for the field*, falls back to the `groupField`.
 *  * `groupField` The field name being grouped by.
 *  * `html` The rendering of the `value` as handled by the cell (for a grid,
 *    otherwise the same as `name`).
 *  * `children` An array containing the child records for the group. **This is not
 *    available if the store is a {@link Ext.data.BufferedStore BufferedStore}.**
 *
 * @accessor
 * @since 6.5.0
 */
 
/**
 * @cfg {Boolean/Function/String/Object} [onItemDisclosure=null]
 * `true` to display a disclosure icon on each list item.
 * The list will still fire the disclose event, and the event can be stopped before itemtap.
 * By setting this config to a function, the function passed will be called when the disclosure
 * is tapped.
 * Finally you can specify an object with a 'scope' and 'handler'
 * property defined. This will also be bound to the tap event listener
 * and is useful when you want to change the scope of the handler.
 * @accessor
 * @controllable
 */
 
/**
 * @cfg {String} [disclosureProperty='disclosure']
 * A property to check on each record to display the disclosure on a per record basis.  This
 * property must be false to prevent the disclosure from being displayed on the item.
 * @accessor
 */
 
/**
 * @cfg {Boolean} useComponents
 * @hide
 */
 
/**
 * @cfg {String} [defaultType=undefined]
 * The xtype used for the component based DataView. Defaults to dataitem.
 * Note this is only used when useComponents is true.
 * @accessor
 */
 
/**
 * @cfg {Number} [itemHeight=null]
 * This allows you to set the default item height and is used to roughly calculate the amount
 * of items needed to fill the list. By default items are around 50px high.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [refreshHeightOnUpdate=true]
 * Set this to false if you make many updates to your list (like in an interval), but updates
 * won't affect the item's height. Doing this will increase the performance of these updates.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [infinite=false]
 * Set this to false to render all items in this list, and render them relatively.
 * Note that this configuration can not be dynamically changed after the list has instantiated.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [useSimpleItems=true]
 * Set this to true if you just want to have the list create simple items that use the itemTpl.
 * These simple items still support headers, grouping and disclosure functionality but avoid
 * container layouts and deeply nested markup. For many Lists using this configuration will
 * drastically increase the scrolling and render performance.
 * @accessor
 */
 
/**
 * @cfg {String} [scrollDock=null]
 * The dock position of a list's child items relative to the list itself. Can be `top` or `bottom`.
 *
 *     Ext.create('Ext.List', {
 *          fullscreen: true,
 *          itemTpl: '{firstName}',
 *          data: [
 *              { firstName: 'Peter'},
 *              { firstName: 'Raymond'},
 *              { firstName: 'Egon'},
 *              { firstName: 'Winston'}
 *          ],
 *          items: [{
 *               xtype: 'component',
 *               html: 'Docked!',
 *               docked: 'top'
 *          },{
 *               xtype: 'component',
 *               html: 'Scroll Docked!',
 *               scrollDock: 'top'
 *          }]
 *      });
 *
 * @accessor
 */
 
/**
 * @cfg {Number} [bufferSize=20]
 * The amount of items we render additionally besides the ones currently visible.
 * We try to prevent the rendering of items while scrolling until the next time you stop scrolling.
 * If you scroll close to the end of the buffer, we start rendering individual items to always
 * have the {@link #minimumBufferSize} prepared.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [striped=false]
 * Set this to true if you want the items in the list to be zebra striped, alternating their
 * background color.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [rowLines=null]
 * Set this to `false` to suppress the borders in between the items in this list.
 * By default the presence of borders in between the items is determined by the stylesheet.
 * @accessor
 */
 
/**
 * @cfg {Object[]} [data=null]
 * An array of records to display. Use in place of {@link #store} when fetching data directly
 * or using static data rather than fetching data with an ExtReact proxy.
 * 
 *      <List 
 *          data={[
 *              { name: 'Apple', symbol: 'AAPL' },
 *              { name: 'Microsoft', symbol: 'MSFT' },
 *              { name: 'Oracle', symbol: 'ORCL' }
 *          ]}
 *          itemTpl={data => (
 *              <div>
 *                  <div style={{ fontWeight: 'bold' }}>{data.name}</div>
 *                  <div>{data.symbol}</div>
 *              </div>
 *          )}   
 *      />
 */
 
/**
 * @method getItemAt
 * Returns an item at the specified index.
 * @param {Number} index Index of the item.
 * @return {Ext.dom.Element/Ext.dataview.component.DataItem} item Item at the specified index.
 */
 
/**
 * @method getItemIndex
 * Returns an index for the specified item.
 * @param {Number} item The item to locate.
 * @return {Number} Index for the specified item.
 */
 
/**
 * @method getViewItems
 * Returns an array of the current items in the DataView.
 * @return {Ext.dom.Element[]/Ext.dataview.component.DataItem[]} Array of Items.
 */