/**
 * A ListItem is a container for {@link Ext.dataview.List} with 
 * useSimpleItems: false. 
 * 
 * ListItem configures and updates the {@link Ext.data.Model records} for  
 * the sub-component items in a list. 
 *
 * *Note*: Use of ListItem increases overhead since it generates more markup than
 * using the List class with useSimpleItems: true. This overhead is more
 * noticeable in Internet Explorer. If at all possible, use
 * {@link Ext.dataview.SimpleListItem} instead via the List's
 * {@link Ext.dataview.List#useSimpleItems useSimpleItems} config.
 *
 * The following example shows how to configure and update sub-component items
 * in a list:
 *
 *      Ext.define('App.view.twitter.TweetListItem', {
 *          extend: 'Ext.dataview.ListItem',
 *          xtype : 'tweetlistitem',
 *
 *          requires: [
 *              'Ext.Img'
 *          ],
 *
 *          layout: 'vbox',
 *
 *          items: [{
 *              xtype: 'component',
 *              cls: 'username',
 *              reference: 'userName'
 *          }, {
 *              xtype: 'component',
 *              cls: 'text',
 *              reference: 'textCmp'
 *          }, {
 *              xtype : 'image',
 *              reference: 'avatarImg',
 *              docked: 'left',
 *              cls: 'avatar',
 *              width: 48,
 *              height: 48
 *          }],
 *
 *          dataMap: {
 *              // Set "html" config of component w/reference "userName"
 *              // to the "username" field from the associated record.
 *              //
 *              userName: {
 *                  html: 'username'
 *              },
 *
 *              textCmp: {
 *                  html: 'text'
 *              },
 *
 *              avatarImg: {
 *                  src: 'avatar_url'
 *              }
 *          }
 *      });
 *
 */
Ext.define('Ext.dataview.ListItem', {
    extend: 'Ext.dataview.DataItem',
    alternateClassName: 'Ext.dataview.component.ListItem',
    xtype: 'listitem',
 
    requires: [
        'Ext.dataview.ItemHeader'
    ],
 
    mixins: [
        'Ext.dataview.Disclosable', // must come before Toolable
        'Ext.mixin.Toolable',
        'Ext.dataview.Pinnable'
    ],
 
    classCls: [
        // ListItem is classClsRoot so that it can opt out of inheriting styles from
        // DataItem, but it still needs to inherit container and component styles
        Ext.baseCSSPrefix + 'listitem',
        Ext.baseCSSPrefix + 'container',
        Ext.baseCSSPrefix + 'component'
    ],
 
    classClsRoot: true,
 
    inheritUi: true,
 
    items: null,  // base class has one item by default
 
    updateRecord: function(record) {
        var me = this;
 
        if (!me.destroying && !me.destroyed) {
            me.callParent([record]);
            
            me.syncDisclosure(record);
        }
    },
 
    doDestroy: function() {
        this.mixins.toolable.doDestroy.call(this);
        this.callParent();
    },
 
    privates: {
        invokeToolHandler: function(tool, handler, scope, args, e) {
            if (this.invokeDisclosure(tool, handler, e)) {
                return false;
            }
 
            return tool.invokeToolHandler(tool, handler, scope, args, e);
        }
    }
});