In this article, I’m explaining the vbox layout in sencha touch.
The VBox (short for vertical box) layout makes the position items vertically in the container. It can size items based on a fixed width.
Example
Ext.define('MyApp.view.VBoxContainer', {
extend: 'Ext.Container',
config: {
fullscreen: true,
id: 'vboxContainer',
layout: {
align: 'start',
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'VBox Layout'
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'container',
html: 'Pack:',
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: 'toolbar',
docked: 'top',
items: [
{
xtype: 'container',
html: 'Align:',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
items: [
{
xtype: 'button',
pressed: true,
itemId: 'mybutton6',
text: 'Start'
},
{
xtype: 'button',
itemId: 'mybutton7',
text: 'Center'
},
{
xtype: 'button',
itemId: 'mybutton8',
text: 'End'
},
{
xtype: 'button',
itemId: 'mybutton9',
text: 'Stretch'
}
]
}
]
},
{
xtype: 'button',
margin: 2,
text: 'Btn 1'
},
{
xtype: 'button',
margin: 2,
text: 'Btn 2'
},
{
xtype: 'button',
margin: 2,
text: 'Btn 3'
}
],
listeners: [
{
fn: 'onStartPackTap',
event: 'tap',
delegate: '#mybutton3'
},
{
fn: 'onCenterPackTap',
event: 'tap',
delegate: '#mybutton4'
},
{
fn: 'onEndPackTap',
event: 'tap',
delegate: '#mybutton5'
},
{
fn: 'onStartAlignTap',
event: 'tap',
delegate: '#mybutton6'
},
{
fn: 'onCenterAlignTap',
event: 'tap',
delegate: '#mybutton7'
},
{
fn: 'onEndAlignTap',
event: 'tap',
delegate: '#mybutton8'
},
{
fn: 'onStretchAlignTap',
event: 'tap',
delegate: '#mybutton9'
}
]
},
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 in both pack and align section:
When you clicks/tap on center button in pack section and end button in align section:
When you clicks/tap on center button in pack section and stretch button in align section:
Leave a Comment
1 Comments