A new addition in version 5 is segmented buttons, and they give us the possibility to show buttons as part of a group. In fact, the use of segmented buttons is actually the use of a specific container for a group of buttons. For this, we need to use the Ext.button.Segmented class by treating it similar to any container (which was discussed in previous chapters).

Using the previous example files (button_04.js and button_04.html), let's create a duplicate of these files and save them with the names button_05.js and button_05.html. Now, let's change the title of the buttons, remove the iconAlign property, and add the following after the last line of the code:

var mySegmentedbuttons = Ext.create('Ext.button.Segmented',{
  renderTo:'segmentedbuttons',
  vertical:false,
  items:[{
    xtype: 'button', text:'1st button', iconCls:'addicon-16'
  },{
    text:'2nd button', iconCls:'addicon-16'
  },{
    text:'3th button', iconCls:'addicon-16'
  },{
    text:'4th button', iconCls:'addicon...