ExtJS tricks: 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

Download ExtJS from: http://www.sencha.com/products/extjs/download/
Extract it into a folder locally (350MB+)
Rename the generated folder to "extjs" (in my case the folder name was too long: "ext-4.2.1.883").
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

2 comments:

Unknown17/09/2015, 13:20
Fabulous Post! This blog is very nice,must be readable post. i really appreciated to blogger, regarding plumbing. Thank you so much for sharing this kind of info, love it - Anatomy Mobile App Development
uiliocihrke03/03/2022, 19:43
The 14 Best Casinos in The US - Mapyro
Best casino 군산 출장샵 in the US. Rank, Country, 오즈포탈 Games, Address. 목포 출장샵 Address. 4227 Upl, Md. 28919; United States. Casino. Casinos · 의정부 출장샵 Las Vegas, 천안 출장안마 NV. Casinos. MGM Resorts International

ExtJS tricks

14/04/2014

Basic Anatomy

2 comments:

Labels