src/src/dataview/component/ListItem.js

   1 /**
   2  * A ListItem is a container for {@link Ext.dataview.List} with
   3  * useSimpleItems: false.
   4  *
   5  * ListItem configures and updates the {@link Ext.data.Model records} for
   6  * the sub-component items in a list.
   7  *
   8  * Overwrite the `updateRecord()` method to set a sub-component's value.
   9  * Sencha Touch calls `updateRecord()` whenever the data in the list updates.
  10  *
  11  * The `updatedata` event fires after `updateRecord()` runs.
  12  *
  13  * *Note*: Use of ListItem increases overhead since it generates more markup than
  14  * using the List class with useSimpleItems: true. This overhead is more
  15  * noticeable in Internet Explorer. If at all possible, use
  16  * {@link Ext.dataview.component.SimpleListItem} instead.
  17  *
  18  * The following example shows how to configure and update sub-component items
  19  * in a list:
  20  *
  21  *     Ext.define('Twitter.view.TweetListItem', {
  22  *         extend: 'Ext.dataview.component.ListItem',
  23  *         xtype : 'tweetlistitem',
  24  *         requires: [
  25  *             'Ext.Img'
  26  *         ],
  27  *         config: {
  28  *             userName: {
  29  *                 cls: 'username'
  30  *             },
  31  *             text: {
  32  *                 cls: 'text'
  33  *             },
  34  *             avatar: {
  35  *                 docked: 'left',
  36  *                 xtype : 'image',
  37  *                 cls   : 'avatar',
  38  *                 width: '48px',
  39  *                 height: '48px'
  40  *             },
  41  *             layout: {
  42  *                 type: 'vbox'
  43  *             }
  44  *         },
  45  *
  46  *         applyUserName: function(config) {
  47  *             return Ext.factory(config, Ext.Component, this.getUserName());
  48  *         },
  49  *
  50  *         updateUserName: function(newUserName) {
  51  *             if (newUserName) {
  52  *                 this.insert(0, newUserName);
  53  *             }
  54  *         },
  55  *
  56  *         applyText: function(config) {
  57  *             return Ext.factory(config, Twitter.view.TweetListItemText, this.getText());
  58  *         },
  59  *
  60  *         updateText: function(newText) {
  61  *             if (newText) {
  62  *                 this.add(newText);
  63  *             }
  64  *         },
  65  *
  66  *         applyAvatar: function(config) {
  67  *             return Ext.factory(config, Ext.Img, this.getAvatar());
  68  *         },
  69  *
  70  *         updateAvatar: function(newAvatar) {
  71  *             if (newAvatar) {
  72  *                 this.add(newAvatar);
  73  *             }
  74  *         },
  75  *
  76  *         updateRecord: function(record) {
  77  *             if (!record) {
  78  *                 return;
  79  *             }
  80  *
  81  *             this.getUserName().setHtml(record.get('username'));
  82  *             this.getText().setHtml(record.get('text'));
  83  *             this.getAvatar().setSrc(record.get('avatar_url'));
  84  *             this.callParent(arguments);
  85  *
  86  *         }
  87  *     });
  88  *
  89  */
  90 Ext.define('Ext.dataview.component.ListItem', {
  91     extend: 'Ext.dataview.component.DataItem',
  92     xtype : 'listitem',
  93
  94     config: {
  95         baseCls: Ext.baseCSSPrefix + 'list-item',
  96
  97         dataMap: null,
  98
  99         body: {
 100             xtype: 'component',
 101             cls: 'x-list-item-body'
 102         },
 103
 104         disclosure: {
 105             xtype: 'component',
 106             cls: 'x-list-disclosure',
 107             hidden: true,
 108             docked: 'right'
 109         },
 110
 111         header: {
 112             xtype: 'component',
 113             cls: 'x-list-header',
 114             html: ' '
 115         },
 116
 117         tpl: null,
 118         items: null
 119     },
 120
 121     applyBody: function(body) {
 122         if (body && !body.isComponent) {
 123             body = Ext.factory(body, Ext.Component, this.getBody());
 124         }
 125         return body;
 126     },
 127
 128     updateBody: function(body, oldBody) {
 129         if (body) {
 130             this.add(body);
 131         } else if (oldBody) {
 132             oldBody.destroy();
 133         }
 134     },
 135
 136     applyHeader: function(header) {
 137         if (header && !header.isComponent) {
 138             header = Ext.factory(header, Ext.Component, this.getHeader());
 139         }
 140         return header;
 141     },
 142
 143     updateHeader: function(header, oldHeader) {
 144         if (oldHeader) {
 145             oldHeader.destroy();
 146         }
 147     },
 148
 149     applyDisclosure: function(disclosure) {
 150         if (disclosure && !disclosure.isComponent) {
 151             disclosure = Ext.factory(disclosure, Ext.Component, this.getDisclosure());
 152         }
 153         return disclosure;
 154     },
 155
 156     updateDisclosure: function(disclosure, oldDisclosure) {
 157         if (disclosure) {
 158             this.add(disclosure);
 159         } else if (oldDisclosure) {
 160             oldDisclosure.destroy();
 161         }
 162     },
 163
 164     updateTpl: function(tpl) {
 165         this.getBody().setTpl(tpl);
 166     },
 167
 168     updateRecord: function(record) {
 169         var me = this,
 170             dataview = me.dataview || this.getDataview(),
 171             data = record && dataview.prepareData(record.getData(true), dataview.getStore().indexOf(record), record),
 172             dataMap = me.getDataMap(),
 173             body = this.getBody(),
 174             disclosure = this.getDisclosure();
 175
 176         me._record = record;
 177
 178         if (dataMap) {
 179             me.doMapData(dataMap, data, body);
 180         } else if (body) {
 181             body.updateData(data || null);
 182         }
 183
 184         if (disclosure && record && dataview.getOnItemDisclosure()) {
 185             var disclosureProperty = dataview.getDisclosureProperty();
 186             disclosure[(data.hasOwnProperty(disclosureProperty) && data[disclosureProperty] === false) ? 'hide' : 'show']();
 187         }
 188
 189         /**
 190          * @event updatedata
 191          * Fires whenever the data of the DataItem is updated.
 192          * @param {Ext.dataview.component.DataItem} this The DataItem instance.
 193          * @param {Object} newData The new data.
 194          */
 195         me.fireEvent('updatedata', me, data);
 196     },
 197
 198     destroy: function() {
 199         Ext.destroy(this.getHeader());
 200         this.callParent(arguments);
 201     }
 202 });