Latest web development tutorials
 

ExtJS Tutorial



Basic Introduction

ExtJS stand for Extended JavaScript, is a JavaScript framework and product of sencha which is 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 approach while learning Ext JS.


Audience

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


Prerequisites

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


Execute ExtJS Online

For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your ExtJS programs at the spot and enjoy your learning.

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

<!DOCTYPE html>
<html>
   <head>
      <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'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel"></div>
   </body>
</html>