Sample Code :

<html>
  <head>
        <title>First ExtJs Example</title>
        <linkrel="stylesheet"type="text/css"
              href="lib/extjs/resources/css/ext-all.css"/>
        <script src="lib/extjs/adapter/ext/ext-base.js"></script>
        <script src="lib/extjs/ext-all-debug.js"></script>
  </head>
  <body>
       <!-- Nothing in the body -->
  </body>
</html>

We have included the following three files that Ext requires to run in our page:

ext-all.css:

  • A stylesheet file controls the look and feel of Ext widgets.
  • ext-all.css file must be added as it is. Do not Modify this file.
  • Any changes to the CSS in this file would break future upgrades.
  • We can Override existing functionality by writing another style sheet file.
  • Overwridden style-sheet should be included after the ext-all.css file.

ext-base.js:

  • Provides the Core functionality of Ext.
  • if we wanted to use another library, (such as jQuery, along with Ext) then we can modify this file.

ext-all-debug.js/ext-all.js:

  • This JavaScript File will contain all code necessary to load widgets .
  • The debug version is used for development, and then swapped out for the non-debug version for production.