In this article, I’m explaining the hbox layout in sencha touch.
The HBox ( short for horizontal box ) layout makes the position items horizontally in the container. It can size items based on a fixed width.
Example
Ext.define('MyApp.view.HBoxContainer', {
extend: 'Ext.Container',
config: {
fullscreen: true,
id: 'hboxContainer',
layout: {
align: 'start',
type: 'hbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'HBox Layout'
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'container',
html: 'Pack: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
ui: '',
items: [
{
xtype: 'button',
pressed: true,
itemId: 'mybutton',
text: 'Start'
},
{
xtype: 'button',
itemId: 'mybutton1',
text: 'Center'
},
{
xtype: 'button',
itemId: 'mybutton2',
text: 'End'
}
]
}
]
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'container',
html: 'Align:',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
items: [
{
xtype: 'button',
pressed: true,
itemId: 'mybutton3',
text: 'Start'
},
{
xtype: 'button',
itemId: 'mybutton4',
text: 'Center'
},
{
xtype: 'button',
itemId: 'mybutton5',
text: 'End'
},
{
xtype: 'button',
itemId: 'mybutton6',
text: 'Stretch'
}
]
}
]
},
{
xtype: 'button',
margin: 2,
text: 'btn 1'
},
{
xtype: 'button',
margin: 2,
text: 'btn 2'
},
{
xtype: 'button',
margin: 3,
text: 'btn 3'
}
],
listeners: [
{
fn: 'onStartPackTap',
event: 'tap',
delegate: '#mybutton'
},
{
fn: 'onCenterPackTap',
event: 'tap',
delegate: '#mybutton1'
},
{
fn: 'onEndPackTap',
event: 'tap',
delegate: '#mybutton2'
},
{
fn: 'onStartAlignTap',
event: 'tap',
delegate: '#mybutton3'
},
{
fn: 'onCenterAlignTap',
event: 'tap',
delegate: '#mybutton4'
},
{
fn: 'onEndAlignTap',
event: 'tap',
delegate: '#mybutton5'
},
{
fn: 'onStretchAlignTap',
event: 'tap',
delegate: '#mybutton6'
}
]
},
onStartPackTap: function(button, e, eOpts) {
this.getLayout().setPack('start');
},
onCenterPackTap: function(button, e, eOpts) {
this.getLayout().setPack('center');
},
onEndPackTap: function(button, e, eOpts) {
this.getLayout().setPack('end');
},
onStartAlignTap: function(button, e, eOpts) {
this.getLayout().setAlign('start');
},
onCenterAlignTap: function(button, e, eOpts) {
this.getLayout().setAlign('center');
},
onEndAlignTap: function(button, e, eOpts) {
this.getLayout().setAlign('end');
},
onStretchAlignTap: function(button, e, eOpts) {
this.getLayout().setAlign('stretch');
}
});
Output
When you clicks/tap on center button of both pack and align:
When you tap on end button in pack section and center button in align section:
Stretch button in align section will stretch the button like this:
Leave a Comment