add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / dataview / component / ListItem.js

/**\r
 * A ListItem is a container for {@link Ext.dataview.List} with \r
 * useSimpleItems: false. \r
 * \r
 * ListItem configures and updates the {@link Ext.data.Model records} for  \r
 * the sub-component items in a list. \r
 *   \r
 * Overwrite the `updateRecord()` method to set a sub-component's value. \r
 * the framework calls `updateRecord()` whenever the data in the list updates.\r
 *\r
 * The `updatedata` event fires after `updateRecord()` runs.\r
 *\r
 * *Note*: Use of ListItem increases overhead since it generates more markup than\r
 * using the List class with useSimpleItems: true. This overhead is more\r
 * noticeable in Internet Explorer. If at all possible, use\r
 * {@link Ext.dataview.component.SimpleListItem} instead.\r
 * \r
 * The following example shows how to configure and update sub-component items\r
 * in a list:\r
 *\r
 *     Ext.define('Twitter.view.TweetListItem', {\r
 *         extend: 'Ext.dataview.component.ListItem',\r
 *         xtype : 'tweetlistitem',\r
 *         requires: [\r
 *             'Ext.Img'\r
 *         ],\r
 *         config: {\r
 *             userName: {\r
 *                 cls: 'username'\r
 *             },\r
 *             text: {\r
 *                 cls: 'text'\r
 *             },\r
 *             avatar: {\r
 *                 docked: 'left',\r
 *                 xtype : 'image',\r
 *                 cls   : 'avatar',\r
 *                 width: '48px',\r
 *                 height: '48px'\r
 *             },\r
 *             layout: {\r
 *                 type: 'vbox'\r
 *             }\r
 *         },\r
 *     \r
 *         applyUserName: function(config) {\r
 *             return Ext.factory(config, Ext.Component, this.getUserName());\r
 *         },\r
 *     \r
 *         updateUserName: function(newUserName) {\r
 *             if (newUserName) {\r
 *                 this.insert(0, newUserName);\r
 *             }\r
 *         },\r
 *     \r
 *         applyText: function(config) {\r
 *             return Ext.factory(config, Twitter.view.TweetListItemText, this.getText());\r
 *         },\r
 *     \r
 *         updateText: function(newText) {\r
 *             if (newText) {\r
 *                 this.add(newText);\r
 *             }\r
 *         },\r
 *     \r
 *         applyAvatar: function(config) {\r
 *             return Ext.factory(config, Ext.Img, this.getAvatar());\r
 *         },\r
 *     \r
 *         updateAvatar: function(newAvatar) {\r
 *             if (newAvatar) {\r
 *                 this.add(newAvatar);\r
 *             }\r
 *         },\r
 *     \r
 *         updateRecord: function(record) {     \r
 *             if (!record) {\r
 *                 return;\r
 *             }\r
 *\r
 *             this.getUserName().setHtml(record.get('username'));\r
 *             this.getText().setHtml(record.get('text'));\r
 *             this.getAvatar().setSrc(record.get('avatar_url'));\r
 *             this.callParent(arguments);\r
 *\r
 *         }\r
 *     });\r
 *\r
 */\r
Ext.define('Ext.dataview.component.ListItem', {\r
    extend: 'Ext.dataview.component.DataItem',\r
    xtype : 'listitem',\r
\r
    config: {\r
        baseCls: Ext.baseCSSPrefix + 'list-item',\r
\r
        dataMap: null,\r
\r
        body: {\r
            xtype: 'component',\r
            cls: 'x-list-item-body'\r
        },\r
\r
        disclosure: {\r
            xtype: 'component',\r
            cls: 'x-list-disclosure',\r
            hidden: true,\r
            docked: 'right'\r
        },\r
\r
        header: {\r
            xtype: 'component',\r
            cls: 'x-list-header',\r
            html: ' '\r
        },\r
\r
        tpl: null,\r
        items: null\r
    },\r
\r
    applyBody: function(body) {\r
        if (body && !body.isComponent) {\r
            body = Ext.factory(body, Ext.Component, this.getBody());\r
        }\r
        return body;\r
    },\r
\r
    updateBody: function(body, oldBody) {\r
        if (body) {\r
            this.add(body);\r
        } else if (oldBody) {\r
            oldBody.destroy();\r
        }\r
    },\r
\r
    applyHeader: function(header) {\r
        if (header && !header.isComponent) {\r
            header = Ext.factory(header, Ext.Component, this.getHeader());\r
        }\r
        return header;\r
    },\r
\r
    updateHeader: function(header, oldHeader) {\r
        if (oldHeader) {\r
            oldHeader.destroy();\r
        }\r
    },\r
\r
    applyDisclosure: function(disclosure) {\r
        if (disclosure && !disclosure.isComponent) {\r
            disclosure = Ext.factory(disclosure, Ext.Component, this.getDisclosure());\r
        }\r
        return disclosure;\r
    },\r
\r
    updateDisclosure: function(disclosure, oldDisclosure) {\r
        if (disclosure) {\r
            this.add(disclosure);\r
        } else if (oldDisclosure) {\r
            oldDisclosure.destroy();\r
        }\r
    },\r
\r
    updateTpl: function(tpl) {\r
        this.getBody().setTpl(tpl);\r
    },\r
\r
    updateRecord: function(record) {\r
        var me = this,\r
            dataview = me.dataview || this.getDataview(),\r
            data = record && dataview.prepareData(record.getData(true), dataview.getStore().indexOf(record), record),\r
            dataMap = me.getDataMap(),\r
            body = this.getBody(),\r
            disclosure = this.getDisclosure();\r
\r
        me._record = record;\r
\r
        if (dataMap) {\r
            me.doMapData(dataMap, data, body);\r
        } else if (body) {\r
            body.updateData(data || null);\r
        }\r
\r
        if (disclosure && record && dataview.getOnItemDisclosure()) {\r
            var disclosureProperty = dataview.getDisclosureProperty();\r
            disclosure[(data.hasOwnProperty(disclosureProperty) && data[disclosureProperty] === false) ? 'hide' : 'show']();\r
        }\r
\r
        /**\r
         * @event updatedata\r
         * Fires whenever the data of the DataItem is updated.\r
         * @param {Ext.dataview.component.DataItem} this The DataItem instance.\r
         * @param {Object} newData The new data.\r
         */\r
        me.fireEvent('updatedata', me, data);\r
    },\r
\r
    destroy: function() {\r
        Ext.destroy(this.getHeader());\r
        this.callParent();\r
    }\r
});\r