Clear Up
SharpKit Reference

Spacer Class

Namespace: Ext

Base Types

System.Object

Constructors

Properties

Name Description
alias 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: @example preview 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: @example preview 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 (to - from + 1) + from)); } } ] } ] }); You can also insert multiple {@link Ext.Spacer}'s: @example preview 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' } ] } ] });
extend 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: @example preview 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: @example preview 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 (to - from + 1) + from)); } } ] } ] }); You can also insert multiple {@link Ext.Spacer}'s: @example preview 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' } ] } ] });
© Copyright 2005-2011 SharpKit. All rights reserved.