Once we have known the basics about buttons and menus, we can move on to the next component, which is the toolbar. As is very common in applications that have toolbars in order to access our application modules, windows, and so on, the toolbar component acts as a container where we can arrange our buttons the way we need.

Since version Ext JS 4, it has been possible to define a toolbar in any of the four sides of our containers (north, south, east, and west). We can also add more toolbars to each side (more than one). It's important to mention that a toolbar is usually used on containers such as a panel, window, or grid, or on subclasses of containers on which it can be placed.

Let's start creating a basic example of a toolbar at the top of a panel. So, let's create an HTML file, set the reference to the Ext JS library, and write the following code in the DOM ready callback:

var myPanel = Ext.create( 'Ext.panel.Panel' ,{
  title: 'My first toolbar...',
  width: 450,
  height: 200,...