In this article, I’m explaining the spacer in sencha touch and how to use it.
Spacer component is generally used to put space between items in toolbar or titlebar component.
Example
Firstly drag-n-drop a container and named it SpacerContainer add a toolbar to the container.Next add two buttons and a spacer to the toolbar. We use one more container to hold the ChangeSpacerWidth button and add a tap event to the ChangeSpacerWidth button.
Ext.define('MyApp.view.SpacerContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
text: 'Button1'
},
{
xtype: 'spacer',
width: 50
},
{
xtype: 'button',
text: 'Button2'
}
]
},
{
xtype: 'container',
height: 152,
items: [
{
xtype: 'button',
docked: 'bottom',
itemId: 'mybutton2',
text: 'Change Spacer Width'
}
]
}
],
listeners: [
{
fn: 'onChangeSpacerWidthTap',
event: 'tap',
delegate: '#mybutton2'
}
]
},
onChangeSpacerWidthTap: function(button, e, eOpts) {
var spacer = Ext.ComponentQuery.query('spacer')[0],
from = 10,
to = 450;
spacer.setWidth(Math.floor(Math.random() * (to - from + 1) + from));
}
});Tap event of the ChangeSpacerWidth button set the width dynamically based on Math.floor and Math.random functions.
Output
When you click/tap the Change Spacer Width button, the width of the spacer will change randomly like this:
Leave Comment