This recipe describes the usage of the SegmentedButton
component, which is generally a part of the toolbar and is useful in switching between different views.
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
Create and open a new file named
ch06_09.js
and paste the following code in it:Ext.setup({ onReady: function() { var segmentedButton = new Ext.SegmentedButton({ renderTo: Ext.getBody(), items: [ { text: 'Album' }, { text : 'About', pressed: true }, { text: 'Help' } ], listeners: { toggle: function(container, button, pressed){ console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off')); } } }); } });
Update the
index.html
file.Deploy and access it from the browser. You may also run...