Ext.js Tutorial

ExtJS Tutorial

ExtJS stands for Extended JavaScript. It is a JavaScript framework and a product of Sencha, based on YUI (Yahoo User Interface). It is basically a desktop application development platform with modern UI. This tutorial gives a complete understanding of Ext JS. This reference will take you through simple and practical approaches while learning Ext JS.


This tutorial has been prepared for beginners to help them understand the concepts of ExtJS to build dynamic web UI.


For this tutorial, the reader should have prior knowledge of HTML, CSS, and JavaScript coding. It would be helpful if the reader knows the concepts of object-oriented programming and has a general idea on creating web applications.

Execute ExtJS Online

For most of the examples given in this tutorial you will find a Try it option. Make use of this option to execute your ExtJS programs on the spot and enjoy your learning.

Try the following example using the Try it option available at the top right corner of the following sample code box −

<!DOCTYPE html>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 100,
               width: 200,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
      <div id = "helloWorldPanel"></div>