/** * 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. * * Overwrite the `updateRecord()` method to set a sub-component's value. * the framework calls `updateRecord()` whenever the data in the list updates. * * The `updatedata` event fires after `updateRecord()` runs. * * *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('Twitter.view.TweetListItem', { * extend: 'Ext.dataview.ListItem', * xtype : 'tweetlistitem', * requires: [ * 'Ext.Img' * ], * config: { * userName: { * cls: 'username' * }, * text: { * cls: 'text' * }, * avatar: { * docked: 'left', * xtype : 'image', * cls : 'avatar', * width: '48px', * height: '48px' * }, * layout: { * type: 'vbox' * } * }, * * applyUserName: function(config) { * return Ext.factory(config, Ext.Component, this.getUserName()); * }, * * updateUserName: function(newUserName) { * if (newUserName) { * this.insert(0, newUserName); * } * }, * * applyText: function(config) { * return Ext.factory(config, Twitter.view.TweetListItemText, this.getText()); * }, * * updateText: function(newText) { * if (newText) { * this.add(newText); * } * }, * * applyAvatar: function(config) { * return Ext.factory(config, Ext.Img, this.getAvatar()); * }, * * updateAvatar: function(newAvatar) { * if (newAvatar) { * this.add(newAvatar); * } * }, * * updateRecord: function(record) { * if (!record) { * return; * } * * this.getUserName().setHtml(record.get('username')); * this.getText().setHtml(record.get('text')); * this.getAvatar().setSrc(record.get('avatar_url')); * this.callParent(arguments); * * } * }); * */Ext.define('Ext.dataview.ListItem', { extend: 'Ext.dataview.component.DataItem', alternateClassName: 'Ext.dataview.component.ListItem', xtype: 'listitem', requires: [ 'Ext.dataview.ListItemBody', 'Ext.dataview.ListItemDisclosure' ], config: { dataMap: null, body: { xtype: 'listitembody' }, disclosure: { xtype: 'listitemdisclosure', hidden: true, docked: 'right' }, header: { xtype: 'itemheader' }, tpl: null, items: null }, classCls: Ext.baseCSSPrefix + 'listitem', classClsRoot: true, initialize: function() { var me = this, body, disclosure; me.callParent(); this.syncUi(); body = me.getBody(); disclosure = me.getDisclosure(); if (body) { me.add(body); } if (disclosure) { me.add(disclosure); } }, applyBody: function(body) { if (body && !body.isComponent) { body = Ext.factory(body, Ext.Component, this.getBody()); } return body; }, updateBody: function(body, oldBody) { if (body && !this.isConfiguring) { this.add(body); } if (oldBody) { oldBody.destroy(); } }, applyHeader: function(header) { if (header && !header.isComponent) { header = Ext.factory(header, Ext.Component, this.getHeader()); } return header; }, updateHeader: function(header, oldHeader) { if (oldHeader) { oldHeader.destroy(); } }, applyDisclosure: function(disclosure) { if (disclosure && !disclosure.isComponent) { disclosure = Ext.factory(disclosure, Ext.Component, this.getDisclosure()); } return disclosure; }, updateDisclosure: function(disclosure, oldDisclosure) { if (disclosure && !this.isConfiguring) { this.add(disclosure); } if (oldDisclosure) { oldDisclosure.destroy(); } }, updateTpl: function(tpl) { this.getBody().setTpl(tpl); }, updateUi: function(ui, oldUi) { this.callParent([ui, oldUi]); if (!this.isConfiguring) { this.syncUi(); } }, updateRecord: function(record) { var me = this, dataview = me.dataview || this.getDataview(), data = record && dataview.prepareData(record.getData(true), dataview.getStore().indexOf(record), record), dataMap = me.getDataMap(), body = this.getBody(), disclosure = this.getDisclosure(); me._record = record; if (dataMap) { me.doMapData(dataMap, data, body); } else if (body) { body.updateData(data || null); } if (disclosure && record && dataview.getOnItemDisclosure()) { var disclosureProperty = dataview.getDisclosureProperty(); disclosure[(data.hasOwnProperty(disclosureProperty) && data[disclosureProperty] === false) ? 'hide' : 'show'](); } /** * @event updatedata * Fires whenever the data of the DataItem is updated. * @param {Ext.dataview.component.DataItem} this The DataItem instance. * @param {Object} newData The new data. */ me.fireEvent('updatedata', me, data); }, doDestroy: function() { Ext.destroy(this.getHeader()); this.callParent(); }, privates: { syncUi: function() { var me = this, ui = me.getUi(), body = me.getBody(), disclosure = me.getDisclosure(); if (body) { body.setUi(ui); } if (disclosure) { disclosure.setUi(ui); } } }});