/** * The {@link Ext.Spacer} component is generally used to put space between items in * {@link Ext.Toolbar} components. * ## Examples * * By default the {@link #flex} configuration is set to 1: * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.Container', { * fullscreen: true, * items: [ * { * xtype : 'toolbar', * docked: 'top', * items: [ * { * xtype: 'button', * text : 'Button One' * }, * { * xtype: 'spacer' * }, * { * xtype: 'button', * text : 'Button Two' * } * ] * } * ] * }); * ``` * * Alternatively you can just set the {@link #width} configuration which will get the * {@link Ext.Spacer} a fixed width: * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.Container', { * fullscreen: true, * layout: { * type: 'vbox', * pack: 'center', * align: 'stretch' * }, * items: [ * { * xtype : 'toolbar', * docked: 'top', * items: [ * { * xtype: 'button', * text : 'Button One' * }, * { * xtype: 'spacer', * width: 50 * }, * { * xtype: 'button', * text : 'Button Two' * } * ] * }, * { * xtype: 'container', * items: [ * { * xtype: 'button', * text : 'Change Ext.Spacer width', * handler: function() { * //get the spacer using ComponentQuery * var spacer = Ext.ComponentQuery.query('spacer')[0], * from = 10, * to = 250; * * //set the width to a random number * spacer.setWidth(Math.floor(Math.random() * (to - from + 1) + from)); * } * } * ] * } * ] * }); * ``` * * You can also insert multiple {@link Ext.Spacer}'s: * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.Container', { * fullscreen: true, * items: [ * { * xtype : 'toolbar', * docked: 'top', * items: [ * { * xtype: 'button', * text : 'Button One' * }, * { * xtype: 'spacer' * }, * { * xtype: 'button', * text : 'Button Two' * }, * { * xtype: 'spacer', * width: 20 * }, * { * xtype: 'button', * text : 'Button Three' * } * ] * } * ] * }); * ``` */Ext.define('Ext.Spacer', { extend: 'Ext.Component', xtype: 'spacer', config: { /** * @cfg {Number} flex * The flex value of this spacer. This defaults to 1, if no width has been set. * @accessor */ /** * @cfg {Number} width * The width of this spacer. If this is set, the value of {@link #flex} will be ignored. * @accessor */ }, /** * @private */ constructor: function(config) { config = config || {}; if (!config.width) { config.flex = 1; } this.callParent([config]); }});