/** * A simple header component for grouped lists. List headers are created automatically * by {@link Ext.dataview.List Lists} and should not be directly instantiated. */Ext.define('Ext.dataview.ItemHeader', { extend: 'Ext.Component', xtype: 'itemheader', mixins: [ 'Ext.mixin.Toolable', 'Ext.dataview.Pinnable' ], isItemHeader: true, config: { /** * @cfg {Ext.dataview.ListGroup} group * The `ListGroup` instance for the this group. * * NOTE: Prior to version 7.0, this was the {@link Ext.data.Group collection} * of {@link Ext.data.Model records} in the group. Instead of `getGroup()` now * returning the collection of records, use `getGroup().data`. * * @readonly * @since 6.5.0 */ group: null, contentWidth: null }, /** * @cfg {String/String[]/Ext.XTemplate} tpl * This is the normal {@link Ext.Component#cfg!tpl tpl} config but in this context, * this {@link Ext.XTemplate template} has access to a specialized data object. * The data object available to the template provides the following properties: * * * `name` The grouping string of the {@link Ext.data.Store#groupField groupField} * for the group header. This string is the string produced by grouper's * {@link Ext.util.Grouper#groupFn groupFn}. * * `value` The value of the {@link Ext.data.Store#groupField groupField} * for the group header being rendered. * * `columnName` The column header associated with the field being grouped * by *if there is a column for the field*, falls back to the `groupField`. * * `groupField` The field name being grouped by. * * `html` The rendering of the `value` as handled by the cell (for a grid, * otherwise the same as `name`). * * `children` An array containing the child records for the group. **This is not * available if the store is a {@link Ext.data.BufferedStore BufferedStore}.** * * @since 6.5.0 */ html: '\xA0', classCls: Ext.baseCSSPrefix + 'itemheader', inheritUi: true, toolDefaults: { ui: 'itemheader' }, template: [{ reference: 'bodyElement', cls: Ext.baseCSSPrefix + 'body-el', uiCls: 'body-el' }], setGroup: function(group) { var me = this, was = me._group; // We short-circuit the change detection because the content of the group // can change but yet the reference is the same... me._group = group; me.updateGroup(group, was); return me; }, updateGroup: function(group, oldGroup) { var me = this, data, grouper, html, list, tpl; if (oldGroup && group !== oldGroup && oldGroup.getHeader() === me) { oldGroup.setHeader(null); } if (group) { group.setHeader(me); list = me.parent; grouper = list.getStore().getGrouper(); // See if the grouper belongs to this list and has a headerTpl override // in place (see Ext.grid.Column). tpl = (grouper && grouper.owner === list && grouper.headerTpl) || me.getTpl(); if (tpl) { data = me.getGroupHeaderTplData(); html = tpl.apply(data); } } me.setHtml(html || '\xa0'); }, getScrollerTarget: function() { return this.el; }, doDestroy: function() { this.mixins.toolable.doDestroy.call(this); this.callParent(); }, privates: { augmentToolHandler: function(tool, args) { // args = [ itemHeader, tool, ev ] ==> [ list, info ] var info = args[1] = { event: args.pop(), group: this.getGroup(), itemHeader: args[0], tool: args[1] }; args[0] = info.list = this.parent; }, getGroupHeaderTplData: function(skipHtml) { var group = this.getGroup(), list = this.parent, collection = group && group.data, data = collection && { name: collection.getGroupKey(), group: group, groupField: list.getStore().getGrouper().getProperty(), children: collection.items, count: collection.length }; if (data && collection.getCount()) { data.value = collection.items[0].data[data.groupField]; } if (!skipHtml) { data.html = Ext.htmlEncode(data.name); } // For Classic compat: data.groupValue = data.value; return data; }, getList: function() { return this.parent; // backward compat }, onToggleCollapse: function() { this.getGroup().toggleCollapsed(); }, updateContentWidth: function(width) { var el = this._toolDockWrap || this.bodyElement; if (el) { el.setWidth(width ? width : null); } } }});