Basic Anatomy

Constraints:
At the time of writing of this and consequent posts, the current open source version of ExtJS is 4.2.1.

Prerequisites:

Screenshot 1

1. Download ExtJS from: http://www.sencha.com/products/extjs/download/
2. Extract it into a folder locally (350MB+)
3. Rename the generated folder to "extjs" (in my case the folder name was too long: "ext-4.2.1.883").
4. Create index.html and app.js at the same level as the folder extjs (see screenshot on the right).
 

The html page serving an ExtJS application can be as stripped down as the code hereunder:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Test</title>
 <script src="extjs/ext-all-debug.js"></script>
 <script src="extjs/ext-theme-neptune.js"></script>
 <link rel="stylesheet" href="extjs/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
 <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js could then have the following stripped down anatomy:

Ext.application({
 name : 'MyApp',
 launch : function () {
 /* Put example code after this line */
  
 /* Put example code before this line */
 }
});

And finally, let us take the grid panel example code (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel) from the documentation and insert it into the foreseen place holder (it's the same code, formatted for convenience using notepad++):

Ext.application({
 name : 'MyApp',
 launch : function () {
 /* Put example code after this line */
  Ext.create('Ext.data.Store', {
   storeId : 'simpsonsStore',
   fields : ['name', 'email', 'phone'],
   data : {
    'items' : [{
      'name' : 'Lisa',
      "email" : "lisa@simpsons.com",
      "phone" : "555-111-1224"
     }, {
      'name' : 'Bart',
      "email" : "bart@simpsons.com",
      "phone" : "555-222-1234"
     }, {
      'name' : 'Homer',
      "email" : "home@simpsons.com",
      "phone" : "555-222-1244"
     }, {
      'name' : 'Marge',
      "email" : "marge@simpsons.com",
      "phone" : "555-222-1254"
     }
    ]
   },
   proxy : {
    type : 'memory',
    reader : {
     type : 'json',
     root : 'items'
    }
   }
  });

  Ext.create('Ext.grid.Panel', {
   title : 'Simpsons',
   store : Ext.data.StoreManager.lookup('simpsonsStore'),
   columns : [{
     text : 'Name',
     dataIndex : 'name'
    }, {
     text : 'Email',
     dataIndex : 'email',
     flex : 1
    }, {
     text : 'Phone',
     dataIndex : 'phone'
    }
   ],
   height : 200,
   width : 400,
   renderTo : Ext.getBody()
  });
 /* Put example code before this line */
 }
});

Loading index.html would then result in the following screenshot:

Screenshot 2