In this article, I’m explaining the toolbar in sencha touch.
Toolbar is most commonly used docked items in the container or panel. Toolbar can be docked either top or bottom through docked configuration.
ToolBar Example
Firstly drag-n-drop the container to hold the toolbar.
Next add a toolbar to the project.
Ext.define('MyApp.view.OuterContainer', {
extend: 'Ext.Container',
config: {
layout: {
pack: 'center',
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'My ToolBar'
},
{
xtype: 'container',
items: [
{
xtype: 'button',
itemId: 'mybutton',
margin: '10 10 0 10',
ui: 'confirm-round',
text: 'Toggle Docked'
},
{
xtype: 'button',
itemId: 'mybutton1',
margin: '10 10 0 10',
ui: 'action-round',
text: 'Toggle UI'
},
{
xtype: 'button',
itemId: 'mybutton2',
margin: '10 10 0 10',
ui: 'confirm-round',
text: 'Change Title'
}
]
}
],
listeners: [
{
fn: 'onToggleDockedTap',
event: 'tap',
delegate: '#mybutton'
},
{
fn: 'onToggleUITap',
event: 'tap',
delegate: '#mybutton1'
},
{
fn: 'onChangeTitleTap',
event: 'tap',
delegate: '#mybutton2'
}
]
},
onToggleDockedTap: function(button, e, eOpts) {
var toolbar = Ext.ComponentQuery.query('toolbar')[0],
newDocked = (toolbar.getDocked() === 'top') ? 'bottom' : 'top';
toolbar.setDocked(newDocked);
},
onToggleUITap: function(button, e, eOpts) {
var toolbar = Ext.ComponentQuery.query('toolbar')[0],
newUi = (toolbar.getUi() === 'light') ? 'dark' : 'light';
toolbar.setUi(newUi);
},
onChangeTitleTap: function(button, e, eOpts) {
var toolbar = Ext.ComponentQuery.query('toolbar')[0],
titles = ['My Toolbar', 'Ext.Toolbar', 'Configurations are awesome!'],
title = toolbar.getTitle().getTitle(),
newTitle = titles[titles.indexOf(title) + 1] || titles[0];
toolbar.setTitle(newTitle);
}
});Add one more container to the project to hold the buttons and add three buttons Toggle Docked, Toggle UI and Change Title, next add tap events to the buttons.
Output
When you click/tap on the Toogle Docked button:
To change ui click/tap on Toggle UI button:
And when you click/tap on the Change Title button the title will change:
Leave Comment