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.
<!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>
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.