Sencha Touch Toolbar Button Alignment Example

In this example we are trying to align some buttons to the left, some to the right and some in the middle of the toolbar. This can be done very easily with the help of a spacer. By default the the flex configuration for the spacer is set to 1 but you can also specify a fixed width.

Sencha Touch Toolbar Button Alignment Example
<!DOCTYPE html>
<html>
<head>
<title>Sencha Touch Button Alignment Example</title>
<link rel="stylesheet"
 href="sencha-touch/resources/css-debug/sencha-touch.css"
 type="text/css">
<script type="text/javascript"
 src="sencha-touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({ 
 enabled: true 
});

Ext.application({
    
 name: 'myApp',
 
    launch: function() {
     console.log('Application launch');
     Ext.create('Ext.Container', {
      fullscreen: true,
      layout: 'vbox',
         items: [{
                xtype : 'toolbar',
                docked: 'top',
                items: [
     {
        xtype: 'button',
         text: 'Left Button',
         ui: 'back'
     }, { 
                    xtype: 'spacer'    
     }, {
        xtype: 'segmentedbutton',
         ui: 'normal',
         items: [
                 {
                     text: 'Button 1'
                 },
                 {
                     text   : 'Button 2',
                     pressed: true
                 },
                 {
                     text: 'Button 3'
                 }
             ]
     }, { 
                    xtype: 'spacer'
                   }, {
                       xtype: 'button',
                        text: 'Right Button',
                        ui: 'forward'
                    }]
            },{
          flex: 1,
          xtype: 'panel',
          html: 'This is a just a Panel'
            }]
     });
    }
    
});
</script>
</head>
<body>
</body>
</html>