/** * This plugin can be added to component instances to process a `responsiveConfig`. For * example: * * Ext.create({ * xtype: 'panel', * layout: 'hbox', * * items: [{ * xtype: 'component', * plugins: 'responsive', * * responsiveConfig: { * 'width < 800': { * hidden: true * }, * * 'width >= 800': { * hidden: false * } * } * }, * ...] * }); * * For details see `{@link Ext.mixin.Responsive#responsiveConfig responsiveConfig}`. */Ext.define('Ext.plugin.Responsive', { extend: 'Ext.mixin.Responsive', alias: 'plugin.responsive', id: 'responsive', isPlugin: true, constructor: function (config) { //<debug> if (!config || !config.cmp) { Ext.raise('Responsive plugin must be constructed by Component'); } //</debug> var me = this, cmp = config.cmp, cmpConfig = cmp.initialConfig, c = Ext.apply({ responsiveConfig: cmpConfig.responsiveConfig, responsiveFormulas: cmpConfig.responsiveFormulas }, config), transformed; delete c.cmp; delete c.type; me.cmp = cmp; me.initConfig(c); transformed = me.transformed; // Push the evaluated responsiveConfig values back on to the component: if (transformed) { me.transformed = null; if (cmp.initConfig.$nullFn) { // Instance has already been through initConfig... This would only be // the case if this plugin was added after component construction. cmp.setConfig(transformed); } else { cmp.initialConfig = Ext.merge(Ext.merge({}, cmpConfig), transformed); } } }, init: Ext.emptyFn, privates: { transformInstanceConfig: function (config) { // Since the responsiveConfigs we manage are for the component and not for us, // we set them aside here to be picked up by the constructor. var transformed = this.callParent([config]), ret; this.transformed = transformed; ret = Ext.apply({}, config); delete ret.responsiveConfig; // already processed delete ret.responsiveFormulas; return ret; }, updateResponsiveState: function () { var config = this.getResponsiveState(); // Push the dynamic stuff back on to our component: this.cmp.setConfig(config); } }});