/** * @private */Ext.define('Ext.grid.HeaderGroup', { extend: 'Ext.Container', xtype: ['headergroup', 'gridheadergroup'], isHeaderGroup: true, config: { /** * @cfg {String} text * The header text to be used as innerHTML (html tags are accepted) to display in the Grid. */ text: ' ', /** * @cfg {Object[]} columns * The columns in this group. */ columns: null, // Default items to undefined here so that we get processed initially, allows // us to check the columns config. items: undefined, defaultType: 'column', /** * We hide the HeaderGroup by default, and show it when any columns are added to it. * @hide */ hidden: true, layout: { type: 'hbox', align: 'stretch' } }, classCls: Ext.baseCSSPrefix + 'headergroup', headerCls: Ext.baseCSSPrefix + 'gridcolumn', getElementConfig: function() { return { reference: 'element', children: [{ // This markup intentionally mimics that of a gridcolumn for styling reasons. // This header element can be styled using column uis (see updtateUi) reference: 'headerElement', classList: [ this.headerCls, Ext.baseCSSPrefix + 'align-center' ], children: [{ reference: 'titleElement', className: Ext.baseCSSPrefix + 'title-el', children: [{ reference: 'textElement', className: Ext.baseCSSPrefix + 'text-el' }] }] }, { reference: 'innerElement', className: Ext.baseCSSPrefix + 'inner' }] }; }, applyItems: function(items, collection) { if (!items) { items = this.getColumns(); } this.callParent([items, collection]); }, updateText: function(text) { this.textElement.setHtml(text); }, initialize: function() { var me = this; me.on({ add: 'doVisibilityCheck', remove: 'doVisibilityCheck', show: 'onColumnShow', hide: 'onColumnHide', delegate: '> column', scope: 'this' }); me.on({ show: 'onShow', scope: 'this' }); me.textElement.on({ tap: 'onHeaderGroupTap', longpress: 'onHeaderGroupLongPress', scope: this }); me.callParent(); me.doVisibilityCheck(); }, onHeaderGroupTap: function(e) { this.fireEvent('tap', this, e); }, onHeaderGroupLongPress: function(e) { this.fireEvent('longpress', this, e); }, onColumnShow: function(column) { if (this.getVisibleCount() > 0) { this.show(); } }, onColumnHide: function(column) { if (this.getVisibleCount() === 0) { this.hide(); } }, onShow: function() { var toShow; // No visible subcolumns, then show the first child. if (!this.getVisibleCount()) { toShow = this.getComponent(0); if (toShow) { toShow.show(); } } }, doVisibilityCheck: function() { var me = this, columns = me.getInnerItems(), ln = columns.length, i, column; for (i = 0; i < ln; i++) { column = columns[i]; if (!column.isHidden()) { if (me.isHidden()) { if (me.initialized) { me.show(); } else { me.setHidden(false); } } return; } } me.hide(); }, doDestroy: function() { this.setColumns(null); this.callParent(); }, updateUi: function(ui, oldUi) { var me = this, headerCls = me.headerCls, headerElement = me.headerElement; if (oldUi) { headerElement.removeCls(oldUi, headerCls); } if (ui) { headerElement.addCls(ui, headerCls); } me.callParent([ui, oldUi]); }, privates: { getVisibleCount: function() { var columns = this.getInnerItems(), len = columns.length, count = 0, i; for (i = 0; i < len; ++i) { if(columns[i].isHeaderGroup){ count += columns[i].getVisibleCount(); }else { count += columns[i].isHidden() ? 0 : 1; } } return count; } }});