Now that you have a basic understanding of how to handle events, it's time we began working with components and widgets. First of all, we will go for buttons. In order to create buttons, we will need to use the Ext.button.Button class. This class will handle all the "ins and outs" of a single button.

Let's create the code for our first button:

var myButton = Ext.create('Ext.button.Button', {
  text:'My first button',
  tooltip:'Click me...!',
  renderTo:Ext.getBody()
});

In this code, we create an instance of the Button class and passed some configurations. Usually, a button has many more configurations, but for the moment, these are enough.

The text property will set the text shown when the button is rendered on the document (using Document Object Model (DOM)).

The renderTo property will allow us to set the place where the document body is going to be created/inserted (using DOM). Here, the button will be placed in the document's body.

Let's run the sample in the browser...