/** * A base class for a calendar panel that allows switching between views. * * @private */Ext.define('Ext.calendar.panel.AbstractPanel', { extend: 'Ext.Panel', requires: [ 'Ext.layout.Fit', 'Ext.SegmentedButton', 'Ext.Toolbar', 'Ext.Sheet' ], layout: 'fit', config: { compactOptions: { createButton: { xtype: 'button', text: null, iconCls: Ext.baseCSSPrefix + 'fa fa-plus' } }, createButton: { ui: 'action' }, /** * @cfg {Object} menuButton * The configuration for the menu button in {@link #compact} mode. */ menuButton: { xtype: 'button', iconCls: Ext.baseCSSPrefix + 'fa fa-bars' }, sideBar: { docked: 'left', autoSize: null, ui: 'light' }, /** * @cfg {Object} sheet * The configuration for the sheet in {@link #compact} mode. */ sheet: { xtype: 'sheet', reference: 'sheet', cls: Ext.baseCSSPrefix + 'calendar-panel-sheet', centered: false, enter: 'left', exit: 'left', hideOnMaskTap: true, stretchY: true, ui: 'light', header: { border: false, title: 'Calendars' } }, titleBar: { docked: 'top' } }, items: [{ xtype: 'panel', reference: 'mainContainer', flex: 1, layout: 'fit' }], autoSize: false, /** * @method getMenuButton * @hide */ /** * @method setMenuButton * @hide */ /** * @method getSheet * @hide */ /** * @method setSheet * @hide */ initialize: function() { var me = this, ct = me.lookup('mainContainer'); if (!me.getCompact()) { me.addSideBar(); } me.addTitleBar(); ct.add(me.createView()); me.refreshCalTitle(); me.callParent(); }, // Appliers/Updaters updateCompact: function(compact) { if (!this.isConfiguring) { this.reconfigureItems(); } }, updateCreateButtonPosition: function() { var me = this, sheet = me.lookup('sheet'), vis; if (!me.isConfiguring) { vis = sheet && sheet.isVisible(); me.reconfigureItems(); if (vis) { me.showSheet(); } } }, updateSwitcherPosition: function() { var me = this, sheet = me.lookup('sheet'), vis; if (!me.isConfiguring) { vis = sheet && sheet.isVisible(); me.reconfigureItems(); if (vis) { me.showSheet(); } } }, privates: { addSideBar: function() { var cfg = this.createSideBar(); if (cfg) { this.add(cfg); } }, addTitleBar: function() { var me = this, cfg = me.getCompact() ? me.createCompactTitleBar() : me.createNormalTitleBar(); if (cfg) { me.lookup('mainContainer').add(cfg); } }, createCompactTitleBar: function() { var me = this; return me.createTitleBar([Ext.apply({ scope: me, handler: 'onMenuButtonTap' }, me.getMenuButton()), me.createDateTitle({ listeners: { element: 'element', scope: me, tap: 'onTodayTap' } }), { xtype: 'component', flex: 1 }, me.createCreateButton()]); }, createNormalTitleBar: function() { var me = this, items = []; if (me.getCreateButtonPosition() === 'titleBar') { items.push(me.createCreateButton({ margin: '0 10 0 0' })); } items.push(me.createTodayButton(), { xtype: 'segmentedbutton', allowToggle: false, items: [me.createPreviousButton(), me.createNextButton()] }, me.createDateTitle()); if (me.getSwitcherPosition() === 'titleBar') { items.push({ xtype: 'component', flex: 1 }, me.createSwitcher()); } return me.createTitleBar(items); }, createTitleBar: function(items) { var cfg = this.getTitleBar(); if (!cfg) { return null; } return this.createContainerWithChildren({ reference: 'titleBar' }, cfg, items); }, createSheet: function() { return Ext.apply({ layout: { type: 'vbox', align: 'stretch' }, items: [ this.createCalendarList(), this.createSwitcher({ vertical: true }) ] }, this.getSheet()); }, createSideBar: function() { var me = this, cfg = this.getSideBar(), items = []; if (!cfg) { return null; } if (me.getCreateButtonPosition() === 'sideBar') { items.push({ xtype: 'container', margin: '0 0 10 0', autoSize: null, layout: { type: 'hbox', pack: 'center' }, items: me.createCreateButton() }); } items.push(me.createCalendarList()); if (me.getSwitcherPosition() === 'sideBar') { items.push(me.createSwitcher({ vertical: true })); } return this.createContainerWithChildren({ reference: 'sideBar', layout: 'vbox' }, cfg, items); }, onMenuButtonTap: function() { this.showSheet(); }, onSwitcherChange: function(btn, value) { var sheet = this.lookup('sheet'); if (sheet && this.getCompact()) { sheet.hide(); } this.doSetView(value, true); }, reconfigureItems: function() { var me = this; Ext.destroy(me.lookup('sheet'), me.lookup('titleBar'), me.lookup('sideBar')); me.addTitleBar(); if (!me.getCompact()) { me.addSideBar(); } me.refreshCalTitle(); }, setSwitcherValue: function(value) { var switcher = this.lookup('switcher'); if (switcher) { switcher.setValue(value); } else { this.setView(value, true); } }, showSheet: function() { var me = this, sheet = me.lookup('sheet'); if (!sheet) { sheet = me.add(me.createSheet()); } sheet.show(); } }});