/** * This is a container that holds configurator fields. */Ext.define('Ext.pivot.plugin.configurator.Container', { extend: 'Ext.panel.Panel', requires: [ 'Ext.pivot.plugin.configurator.Column' ], mixins: [ 'Ext.mixin.FocusableContainer' ], alias: 'widget.pivotconfigcontainer', childEls: ['innerCt'], handleSorting: false, handleFiltering: false, position: 'top', border: false, enableFocusableContainer: true, isConfiguratorContainer: true, cls: Ext.baseCSSPrefix + 'pivot-grid-config-container-body', dockedTopRightCls: Ext.baseCSSPrefix + 'pivot-grid-config-container-body-tr', dockedBottomLeftCls: Ext.baseCSSPrefix + 'pivot-grid-config-container-body-bl', hintTextCls: Ext.baseCSSPrefix + 'pivot-grid-config-container-hint', config: { /** * @cfg {String} fieldType * Possible values: * * - `all` = the container is the "all fields" area; * - `aggregate` = the container is the "values" area; * - `leftAxis` = the container is the "row values" area; * - `topAxis` = the container is the "column values" area; * */ fieldType: 'all', dragDropText: ' ' }, initComponent: function() { var me = this; if (me.position === 'top' || me.position === 'bottom') { Ext.apply(me, { style: 'overflow:hidden', layout: 'column', height: 'auto' }); } else { Ext.apply(me, { layout: { type: 'vbox', align: 'stretch' } }); } if (me.position === 'top' || me.position === 'right') { me.cls += ' ' + me.dockedTopRightCls; } else { me.cls += ' ' + me.dockedBottomLeftCls; } me.callParent(arguments); }, destroy: function() { this.infoEl = Ext.destroy(this.infoEl); this.callParent(); }, afterRender: function() { var me = this; me.callParent(); me.infoEl = me.innerCt.createChild({ cls: me.hintTextCls, html: me.getDragDropText() }); me.setInfoElVisibility(); }, /** * This is used for firing the 'configchange' event * */ applyChanges: function(field, force) { if (this.getFieldType() !== 'all' || force === true) { this.fireEvent('configchange', field || this); } }, /** * This is used for adding a new config field to this container. * @return {Ext.pivot.plugin.configurator.Column} The new configurator field. * * @private */ addField: function(config, pos, notify) { var me = this, cfg = { xtype: 'pivotconfigfield', field: config, header: config.getHeader(), // These are drag/droppable, so need // panning disabled. touchAction: { panX: false, panY: false } }, newCol; config.isAggregate = (me.getFieldType() === 'aggregate'); if (pos !== -1) { newCol = me.insert(pos, cfg); } else { newCol = me.add(cfg); } if (notify === true) { me.applyChanges(newCol); } return newCol; }, onAdd: function(column) { this.setInfoElVisibility(); column.setFieldType(this.getFieldType()); this.callParent(arguments); }, onRemove: function() { this.setInfoElVisibility(); }, /** * This is used for moving a field inside this container. * * @private */ moveField: function(from, to, position) { var me = this; if (Ext.isString(from)) { from = me.items.getByKey(from); } if (Ext.isString(to)) { to = me.items.getByKey(to); } if (from !== to) { me['move' + Ext.String.capitalize(position)](from, to); me.applyChanges(from); } }, /** * This is used to remove a field inside this container and apply changes * * @param {Ext.pivot.plugin.configurator.Column} field * * @private */ removeField: function(field) { this.remove(field); this.applyChanges(); }, /** * The container has an info text displayed inside. This function makes it visible or hidden. * * @private */ setInfoElVisibility: function() { var el = this.infoEl; if (!el) { return; } if (this.items.getCount() === 0) { el.show(); } else { el.hide(); } }});