/** * This is a container that holds configurator fields. */Ext.define('Ext.pivot.plugin.configurator.Container', { extend: 'Ext.dataview.List', alias: 'widget.pivotconfigcontainer', requires: [ 'Ext.pivot.plugin.configurator.Column', 'Ext.pivot.plugin.configurator.DragZone', 'Ext.pivot.plugin.configurator.DropZone' ], handleSorting: false, handleFiltering: false, isConfiguratorContainer: true, useSimpleItems: false, disableSelection: true, defaultType: 'pivotconfigfield', deferEmptyText: false, touchAction: { panX: false, pinchZoom: false, doubleTapZoom: false }, store: { type: 'array', fields: [ {name: 'text', type: 'string'}, {name: 'field', type: 'auto'} ] }, items: [{ docked: 'top', xtype: 'titlebar', titleAlign: 'left' }], config: { /** * 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', title: null }, initialize: function() { var me = this; me.callParent(); me.dragZone = new Ext.pivot.plugin.configurator.DragZone(me); me.dropZone = new Ext.pivot.plugin.configurator.DropZone(me); if (me.getFieldType() !== 'all') { me.container.element.on({ delegate: '.' + Ext.baseCSSPrefix + 'pivot-grid-config-column-btn', tap: 'handleColumnBtnTap', scope: me }); me.container.element.on({ delegate: '.' + Ext.baseCSSPrefix + 'listitem-body', tap: 'handleColumnTap', scope: me }); } }, destroy: function(){ Ext.destroyMembers(this, 'storeListeners', 'dragZone', 'dropZone'); this.callParent(); }, updateTitle: function(title){ var titleBar = this.down('titlebar'); if(titleBar){ titleBar.setTitle(title); } }, updateFieldType: function(type){ if(type !== 'all'){ this.setUserCls(Ext.baseCSSPrefix + 'pivot-grid-config-container'); } }, updateStore: function(store){ var me = this; Ext.destroy(me.storeListeners); if(store){ me.storeListeners = store.on({ datachanged: me.applyChanges, scope: me }); } }, /** * This is used for firing the 'configchange' event * */ applyChanges: function(){ if(this.getFieldType() !== 'all') { this.fireEvent('configchange', this); } }, /** * This is used for adding a new config field to this container. * * @private */ addField: function(config, pos){ var me = this, store = me.getStore(), fieldType = me.getFieldType(), cfg = {}; config.isAggregate = (fieldType === 'aggregate'); Ext.apply(cfg, { field: config, text: config.getFieldText() }); if(pos >= 0){ store.insert(pos, cfg); }else{ store.add(cfg); } }, removeField: function(record){ this.getStore().remove(record); record.set('field', null); }, moveField: function(record, pos){ var store = this.getStore(), index = store.indexOf(record); if(pos === -1 && index === store.getCount() - 1){ // nothing to do here; // the record is already on the last position in the store return; } store.remove(record); if(pos >= 0){ store.insert(pos, record); }else{ store.add(record); } }, handleColumnBtnTap: function(e){ var me = this, target = Ext.fly(e.currentTarget), item = target.up('.' + me.getBaseCls() + 'item').component, record = me.getStore().getAt(item.$dataIndex); if(!record){ return; } if(target.hasCls(Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-delete')){ me.fireEvent('removefield', me, item, record); return; } if(target.hasCls(Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-tools')){ me.fireEvent('toolsbtnpressed', me, item); return; } }, handleColumnTap: function(e){ var me = this, target = Ext.fly(e.currentTarget), item = target.up('.' + me.getBaseCls() + 'item').component, record = me.getStore().getAt(item.$dataIndex); if(!record){ return; } me.fireEvent('toolsbtnpressed', me, item); } });