Creating a simple button

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 ...

Get Learning Ext JS - Fourth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.