145 lines
3.8 KiB
JavaScript
145 lines
3.8 KiB
JavaScript
/**
|
|
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 miniphone 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
|
|
spacer.setWidth(Math.floor(Math.random() * (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'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
*/
|
|
Ext.define('Ext.Spacer', {
|
|
extend: 'Ext.Component',
|
|
alias : 'widget.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]);
|
|
}
|
|
});
|