add extjs 6.0.1 sources

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

/**\r
 * A DataItem is a container for records inside of {@link Ext.dataview.DataView} with useComponents: true.\r
 * It ties together {@link Ext.data.Model records} to its contained Components. Consider the following example:\r
 *\r
 *      @example phone portrait preview\r
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! MODEL\r
 *\r
 *     Ext.define('TestModel', {\r
 *         extend: 'Ext.data.Model',\r
 *         config: {\r
 *             fields: [{\r
 *                 name: 'val1'\r
 *             }, {\r
 *                 name: 'val2'\r
 *             }]\r
 *         }\r
 *     });\r
 *\r
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! STORE\r
 *\r
 *     Ext.define('TestStore', {\r
 *         extend: 'Ext.data.Store',\r
 *         config: {\r
 *             data: [{\r
 *                 val1: 'A Button',\r
 *                 val2: 'with text'\r
 *             }, {\r
 *                 val1: 'The Button',\r
 *                 val2: 'more text'\r
 *             }, {\r
 *                 val1: 'My Button',\r
 *                 val2: 'My Text'\r
 *             }],\r
 *             model: 'TestModel',\r
 *             storeId: 'TestStore'\r
 *         }\r
 *     });\r
 *\r
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA ITEM\r
 *\r
 *     Ext.define('MyDataItem', {\r
 *         extend: 'Ext.dataview.component.DataItem',\r
 *         alias: 'widget.mydataitem',\r
 *         config: {\r
 *             padding: 10,\r
 *             layout: {\r
 *                 type: 'hbox'\r
 *             },\r
 *             defaults: {\r
 *                 margin: 5\r
 *             },\r
 *             items: [{\r
 *                 xtype: 'button',\r
 *                 text: 'Val1'\r
 *             }, {\r
 *                 xtype: 'component',\r
 *                 flex: 1,\r
 *                 html: 'val2',\r
 *                 itemId: 'textCmp'\r
 *             }]\r
 *         },\r
 *         updateRecord: function(record) {\r
 *             var me = this;\r
 *\r
 *             me.down('button').setText(record.get('val1'));\r
 *             me.down('#textCmp').setHtml(record.get('val2'));\r
 *\r
 *             me.callParent(arguments);\r
 *         }\r
 *     });\r
 *\r
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA VIEW\r
 *\r
 *     Ext.define('MyDataView', {\r
 *         extend: 'Ext.dataview.DataView',\r
 *         config: {\r
 *             defaultType: 'mydataitem',\r
 *             useComponents: true\r
 *         }\r
 *     });\r
 *\r
 *     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! RUN\r
 *\r
 *     Ext.create('MyDataView', {\r
 *         fullscreen: true,\r
 *         store: Ext.create('TestStore')\r
 *     });\r
 *\r
 * Another way to accomplish this is via a {@link #dataMap dataMap} configuration.\r
 *\r
 * For example, lets say you have a `text` configuration which, when applied, gets turned into an instance of an\r
 * Ext.Component. We want to update the {@link #html} of a sub-component when the 'text' field of the record gets\r
 * changed.\r
 *\r
 * As you can see below, it is simply a matter of setting the key of the object to be the getter of the config\r
 * (getText), and then give that property a value of an object, which then has 'setHtml' (the html setter) as the key,\r
 * and 'text' (the field name) as the value. You can continue this for a as many sub-components as you wish.\r
 *\r
 *     dataMap: {\r
 *         // When the record is updated, get the text configuration, and\r
 *         // call {@link #setHtml} with the 'text' field of the record.\r
 *         getText: {\r
 *             setHtml: 'text'\r
 *         },\r
 *\r
 *         // When the record is updated, get the userName configuration, and\r
 *         // call {@link #setHtml} with the 'from_user' field of the record.\r
 *         getUserName: {\r
 *             setHtml: 'from_user'\r
 *         },\r
 *\r
 *         // When the record is updated, get the avatar configuration, and\r
 *         // call `setSrc` with the 'profile_image_url' field of the record.\r
 *         getAvatar: {\r
 *             setSrc: 'profile_image_url'\r
 *         }\r
 *     }\r
 */\r
\r
Ext.define('Ext.dataview.component.DataItem', {\r
    extend: 'Ext.Container',\r
    xtype : 'dataitem',\r
\r
    config: {\r
        baseCls: Ext.baseCSSPrefix + 'data-item',\r
\r
        defaultType: 'component',\r
\r
        /**\r
         * @cfg {Ext.data.Model} record The model instance of this DataItem. It is controlled by the Component DataView.\r
         * @accessor\r
         */\r
        record: null,\r
\r
        /**\r
         * @cfg {String} itemCls\r
         * An additional CSS class to apply to items within the DataView.\r
         * @accessor\r
         */\r
        itemCls: null,\r
\r
        /**\r
         * @cfg dataMap\r
         * The dataMap allows you to map {@link #record} fields to specific configurations in this component.\r
         *\r
         * For example, lets say you have a `text` configuration which, when applied, gets turned into an instance of an Ext.Component.\r
         * We want to update the {@link #html} of this component when the 'text' field of the record gets changed.\r
         * For example:\r
         *\r
         *      dataMap: {\r
         *          getText: {\r
         *              setHtml: 'text'\r
         *          }\r
         *      }\r
         *\r
         * In this example, it is simply a matter of setting the key of the object to be the getter of the config (`getText`), and then give that\r
         * property a value of an object, which then has `setHtml` (the html setter) as the key, and `text` (the field name) as the value.\r
         */\r
        dataMap: {},\r
\r
        /**\r
         * @private dataview\r
         */\r
        dataview: null,\r
\r
        width: '100%',\r
\r
        items: [{\r
            xtype: 'component'\r
        }]\r
    },\r
\r
    updateBaseCls: function(newBaseCls, oldBaseCls) {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
    },\r
\r
    updateItemCls: function(newCls, oldCls) {\r
        if (oldCls) {\r
            this.removeCls(oldCls);\r
        }\r
        if (newCls) {\r
            this.addCls(newCls);\r
        }\r
    },\r
\r
    doMapData: function(dataMap, data, item) {\r
        var componentName, component, setterMap, setterName;\r
\r
        for (componentName in dataMap) {\r
            setterMap = dataMap[componentName];\r
            component = this[componentName]();\r
            if (component) {\r
                for (setterName in setterMap) {\r
                    if (data && component[setterName] && data[setterMap[setterName]] !== undefined && data[setterMap[setterName]] !== null) {\r
                        component[setterName](data[setterMap[setterName]]);\r
                    }\r
                }\r
            }\r
        }\r
\r
        if (item) {\r
            // Bypassing setter because sometimes we pass the same object (different properties)\r
            item.updateData(data);\r
        }\r
    },\r
\r
    /**\r
     * Updates this container's child items, passing through the `dataMap`.\r
     * @param {Ext.data.Model} newRecord\r
     * @private\r
     */\r
    updateRecord: function(newRecord) {\r
        if (!newRecord) {\r
            return;\r
        }\r
        this._record = newRecord;\r
\r
        var me = this,\r
            dataview = me.dataview || this.getDataview(),\r
            data = dataview.prepareData(newRecord.getData(true), dataview.getStore().indexOf(newRecord), newRecord),\r
            items = me.getItems(),\r
            item = items.first(),\r
            dataMap = me.getDataMap();\r
\r
        if (!item) {\r
            return;\r
        }\r
        if (dataMap) {\r
            this.doMapData(dataMap, data, item);\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