Sencha Ext JSJavaScript Framework

Michele Rosica

Release 1.0.0 - October 2013

Contents

1 Introduction 3

2 JSDoc Toolkit 3

2.1 Template for JSDoc Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2 Command line options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.3 DocExamples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Extjs 3.4.0 4

3.1 Library includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3.2 ArrayStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3.3 data.Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3.4 JsonStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.5 ComboBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.5.1 Simple array store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.5.2 ComboBox sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.6 TreePanel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.7 Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3.7.1 Simple JSON response in PHP . . . . . . . . . . . . . . . . . . . . . . . 10

3.8 Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

1

4 Extjs 4.2.1 12

4.1 Compatibility with ExtJS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.2 Library includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.3 ArrayStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.4 data.Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.4.1 Local Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.4.2 Dynamic Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4.5 JsonStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4.5.1 Properties for proxy (actionMethods) . . . . . . . . . . . . . . . . . . . . 14

4.6 JsonPStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.7 TreeStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.8 ComboBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.8.1 ComboBox sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.9 TreePanel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.10 Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.11 Grouping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.11.1 Grouping sample (Local Loading) . . . . . . . . . . . . . . . . . . . . . . 18

4.11.2 Grouping sample (Dynamic Loading) . . . . . . . . . . . . . . . . . . . . 19

4.12 Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.13 InputFields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.13.1 Custom Trigger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4.13.2 Custom Vtype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2

Figure 1: Screenshots (version 1.1.2).

1 Introduction

Ext JS [1] is a pure JavaScript application framework for building interactive web applications[2] using techniques such as Ajax, DHTML and DOM scripting.Originally built as an add-on library extension of YUI by Jack Slocum, Ext JS includes in-teroperability with jQuery and Prototype. Beginning with version 1.1, Ext JS retains nodependencies on external libraries, instead making their use optional.

2 JSDoc Toolkit

JsDoc Toolkit [4] is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation fromcommented JavaScript source code.Based on the JSDoc.pm project, this was renamed ”Jsdoc Toolkit” during development as itgrew into more than a simple version upgrade.

2.1 Template for JSDoc Toolkit

HTML template for the JavaScript documentation tool JSDoc, which is now free for download(http://www.thebrightlines.com/2010/05/06/new-template-for-jsdoctoolkit-codeview/).It is tested in IE6 to IE9, FF3.6, Chrome 5 and Safari 4.

2.2 Command line options

• Set title -D=”title:Estate Library”

• Remove global -D=”noGlobal:true”

3

• Make ”Files” the homepage instead of ”Classes” -D=”index:files”

Example:

java -jar jsdoc-toolkit\jsrun.jar jsdoc-toolkit\app\run.js

-d=Documentation\ -D="noGlobal:true" -D="title:Estate Library" -D="index:files"

-t=jsdoc-toolkit\templates\codeview -p -v Javascript\Estate\Source\Estate*.js

From Fig. 1 we note the result.

2.3 DocExamples

1 /**

2 * @namespace Log.

3 *

4 * @description

5 * Simple Logger

6 */

7 Log: function(x, tag) {

8 var d = new Date();

9 var time = d.getHours () + ’:’ + d.getMinutes () + ’:’ + d.getSeconds ();

10 if (!tag) tag = ’INFO’;

11 console.log(’[’+tag+’ ’+time+’] ’ + x);

12 }

If a parameter is expected to have a certain named property, you can document that with the@config tag, so-called because it is useful for functions (and constructors) that are designed toreceive a configuration object.

1 /**

2 * Modify the details of the employee.

3 * @param {object} employee The employee.

4 * @param {integer} newDetails

5 * @config {string} [title] The new job title.

6 * @config {number} [salary] The new salary.

7 */

8 function modify(employee , newDetails) {

9 if (newDetails.title != undefined) employee.title = newDetails.title;

10 if (newDetails.salary != undefined) employee.salary = newDetails.salary;

11 }

3 Extjs 3.4.0

docs: http://docs.sencha.com/extjs/3.4.0/examples: http://dev.sencha.com/deploy/ext-3.4.0/examples/release-notes: http://dev.sencha.com/deploy/ext-3.4.0/release-notes.html

3.1 Library includes

4

1 <script type="text/javascript"

2 src="http ://dev.sencha.com/deploy/ext -3.4.0/ adapter/ext/ext -base.js">

3 </script >

4 <script type="text/javascript"

5 src="http ://dev.sencha.com/deploy/ext -3.4.0/ext -all.js">

6 </script >

7 <script type="text/javascript"

8 src="http ://dev.sencha.com/deploy/ext -3.4.0/ examples/form/states.js">

9 </script >

10 <link rel="stylesheet" type="text/css"

11 href="http :// dev.sencha.com/deploy/ext -3.4.0/ resources/css/ext -all.css" />

3.2 ArrayStore

Formerly known as ”SimpleStore”.Small helper class to make creating Ext.data.Stores from Array data easier. An ArrayStorewill be automatically configured with a Ext.data.ArrayReader.

A store configuration would be something like:

1 var store = new Ext.data.ArrayStore ({

2 // store configs

3 autoDestroy: true ,

4 storeId: ’myStore ’,

5 // reader configs

6 idIndex: 0,

7 fields: [

8 ’company ’,

9 {name: ’price ’, type: ’float ’},

10 {name: ’change ’, type: ’float ’},

11 {name: ’pctChange ’, type: ’float ’},

12 {name: ’lastChange ’, type: ’date’, dateFormat: ’n/j h:ia’}

13 ]

14 });

Ext.data.ArrayStore: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.ArrayStore

3.3 data.Store

The Store class encapsulates a client side cache of Record objects which provide input data forComponents such as the GridPanel, the ComboBox, or the DataView.

1 // create a Record constructor:

2 var rt = Ext.data.Record.create ([

3 {name: ’fullname ’},

4 {name: ’first’}

5 ]);

6 var myStore = new Ext.data.Store({

7 // explicitly create reader

8 reader: new Ext.data.ArrayReader(

9 {

10 idIndex: 0 // id for each record will be the first element

11 },

12 rt // recordType

13 )

14 });

5

Ext.data.Store: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store

3.4 JsonStore

Small helper class to make creating Ext.data.Stores from JSON [3] data easier. A JsonStorewill be automatically configured with a Ext.data.JsonReader.

A store configuration would be something like:

1 var store = new Ext.data.JsonStore ({

2 // store configs

3 autoDestroy: true ,

4 url: ’get -images.php’,

5 storeId: ’myStore ’,

6 // reader configs

7 root: ’images ’,

8 idProperty: ’name’,

9 fields: [’name’, ’url’, {name:’size’, type: ’float’}, {name:’lastmod ’,

type:’date’}]

10 });

Ext.data.JsonStore: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.JsonStore

3.5 ComboBox

Docs: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBoxExample: http://dev.sencha.com/deploy/ext-3.4.0/examples/form/combos.html

A combobox control with support for autocomplete, remote-loading, paging and many otherfeatures.

3.5.1 Simple array store

1 // simple array store

2 var store = new Ext.data.ArrayStore ({

3 fields: [’abbr’, ’state’, ’nick’],

4 data : Ext.exampledata.states // from states.js

5 });

Listing 1: Simple array store

1 // some data used in the examples

2 Ext.namespace(’Ext.exampledata ’);

34 Ext.exampledata.states = [

5 [’AL’, ’Alabama ’, ’The Heart of Dixie ’],

6 [’AK’, ’Alaska ’, ’The Land of the Midnight Sun’],

7 [’AZ’, ’Arizona ’, ’The Grand Canyon State ’],

8 [’AR’, ’Arkansas ’, ’The Natural State ’],

9 [’CA’, ’California ’, ’The Golden State ’],

10 [’CO’, ’Colorado ’, ’The Mountain State ’],

6

11 [’CT’, ’Connecticut ’, ’The Constitution State ’],

12 [’DE’, ’Delaware ’, ’The First State ’]

13 ];

Listing 2: states.js

3.5.2 ComboBox sample

1 Ext.onReady(function (){

2 Ext.QuickTips.init();

34 // simple array store

5 var store = new Ext.data.ArrayStore ({

6 fields: [’abbr’, ’state’, ’nick’],

7 data : Ext.exampledata.states // from states.js

8 });

910 var combo = new Ext.form.ComboBox ({

11 store: store ,

12 displayField:’state’,

13 typeAhead: true ,

14 mode: ’local’,

15 forceSelection: true ,

16 triggerAction: ’all’,

17 emptyText:’Select a state ...’,

18 selectOnFocus:true ,

19 applyTo: ’local -states ’ // divHtmlID

20 });

2122 });

3.6 TreePanel

Docs: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.tree.TreePanel

The TreePanel provides tree-structured UI representation of tree-structured data. TreeNodesadded to the TreePanel may each contain metadata used by your application in their attributesproperty.

A TreePanel must have a root node before it is rendered. This may either be specified usingthe root config option, or using the setRootNode method.

1 var TPanel = new Ext.tree.TreePanel ({

2 renderTo: ’tree -div’,

3 useArrows: true ,

4 autoScroll: true ,

5 animate: true ,

6 enableDD: true ,

7 containerScroll: true ,

8 border: false ,

9 // auto create TreeLoader

10 dataUrl: ’get -nodes.php’,

1112 root: {

13 nodeType: ’async ’,

14 text: ’Ext JS’,

15 draggable: false ,

16 id: ’source ’

7

17 }

18 });

1920 TPanel.getRootNode ().expand ();

The example above would work with a data packet similar to this:

1 [{

2 "text": "adapter",

3 "id": "source \/ adapter",

4 "cls": "folder"

5 }, {

6 "text": "dd",

7 "id": "source \/dd",

8 "cls": "folder"

9 }, {

10 "text": "debug.js",

11 "id": "source \/ debug.js",

12 "leaf": true ,

13 "cls": "file"

14 }]

3.7 Grid

Docs: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.PagingToolbar

As the amount of records increases, the time required for the browser to render them increases.Paging is used to reduce the amount of data exchanged with the client. Note: if there are morerecords/rows than can be viewed in the available screen area, vertical scrollbars will be added.

Paging is typically handled on the server side (see exception below). The client sends parametersto the server side, which the server needs to interpret and then respond with the appropratedata.

Ext.PagingToolbar is a specialized toolbar that is bound to a Ext.data.Store and providesautomatic paging control. This Component loads blocks of data into the store by passingparamNames used for paging criteria.

PagingToolbar is typically used as one of the Grid’s toolbars. The following is an example:

12 Ext.onReady(function () {

34 Ext.QuickTips.init(); // to display button quicktips

5 var serviceUrl = ’./ paging.php’;

6 var itemsPerPage = 2; // set the number of items you want per page

78 var store = new Ext.data.JsonStore ({

9 totalProperty: ’TotalItems ’,

10 root: ’geonames ’,

11 remoteSort: true ,

12 autoLoad: false ,

13 method: ’POST’,

14 // baseParams: baseParams ,

15 /*

16 paramNames: {

17 start: ’skip ’,

8

18 limit: ’take ’,

19 sort: ’sort ’,

20 dir: ’sortDir ’

21 },

22 */

23 url: serviceUrl ,

24 mode: ’local’,

25 fields: [

26 { name: ’username ’},

27 { name: ’password ’},

28 { name: ’data’}

29 ]

30 });

3132 var pagingtoolbar = new Ext.grid.GridPanel ({

33 // renderTo: ’topic -grid ’,

34 width :500,

35 height :300,

36 frame:true ,

37 title:’ExtJS.com - Users ’,

38 trackMouseOver:false ,

39 autoExpandColumn:’username ’,

40 store: store ,

4142 columns: [

43 new Ext.grid.RowNumberer ({ width: 30}),

44 {

45 id: ’username ’,

46 header: "Username",

47 dataIndex: ’username ’,

48 width: 120,

49 // renderer: renderUsername ,

50 sortable:true

51 },{

52 header: "Password",

53 dataIndex: ’password ’,

54 width: 100,

55 align: ’right ’,

56 sortable:true

57 },{

58 id: ’last’,

59 header: "Date",

60 dataIndex: ’data’,

61 width: 120,

62 // renderer: renderData ,

63 sortable:true

64 }],

65 bbar: new Ext.PagingToolbar ({

66 store: store ,

67 pageSize: itemsPerPage ,

68 displayInfo:true

69 })

70 });

7172 // specify segment of data you want to load using params

73 store.load({

74 params :{

75 start:0,

76 limit: itemsPerPage

77 }

9

Figure 2: Simple PagingToolbar.

78 });

7980 pagingtoolbar.render(Ext.get(’pagingtoolbar ’));

8182 });

Listing 3: Simple PagingToolbar

From Fig. 2 we note the result.

3.7.1 Simple JSON response in PHP

The following code will show a json response:

1 header("Content -type: application/json");

2 $method = $_SERVER[’REQUEST_METHOD ’];

3 if ($method == ’POST’) $_GET = $_POST;

45 // Create connection

6 $conn=mysqli_connect("localhost", "root", "", "test");

78 // Check connection

9 if (mysqli_connect_errno($conn))

10 {

11 echo "Failed to connect to MySQL: " . mysqli_connect_error ();

12 return;

13 }

1415 $start = 0; $limit = 30; $page = 1;

16 if (isset($_GET[’start’])) { $start = trim($_GET[’start’]); }

17 if (isset($_GET[’limit’])) { $limit = trim($_GET[’limit’]); }

18 if (isset($_GET[’page’])) { $page = trim($_GET[’page’]); } // not used ...

1920 $query = "SELECT * FROM users LIMIT ".$start.", ".$limit;

2122 // Perform queries

23 $result = mysqli_query($conn , $query);

2425 // looping through all results

26 // products node

27 while ($row = mysqli_fetch_array($result))

10

28 {

29 $entry = array(

30 //’id ’=>$row[’userID ’],

31 ’username ’=>$row[’username ’],

32 ’password ’=>$row[’password ’],

33 ’data’=>$row[’data’]

34 );

35 $jsonData[’geonames ’][] = $entry;

36 }

3738 $query = "SELECT COUNT (*) Tot FROM users";

39 $result = mysqli_query($conn , $query);

40 $row = mysqli_fetch_array($result);

41 $jsonData[’TotalItems ’] = $row[’Tot’];

4243 echo json_encode($jsonData);

3.8 Chart

The Ext.chart package provides the capability to visualize data with flash based charting. Eachchart binds directly to an Ext.data.Store enabling automatic updates of the chart.

Available since: Ext JS 3.4.0

12 var CHART_URL = ’./ resources/charts.swf’;

34 var store = new Ext.data.JsonStore ({

5 fields :[’name’, ’visits ’, ’views’],

6 data: [

7 {name:’Jul 07’, visits: 245000 , views: 3000000} ,

8 {name:’Aug 07’, visits: 240000 , views: 3500000} ,

9 {name:’Sep 07’, visits: 355000 , views: 4000000} ,

10 {name:’Oct 07’, visits: 375000 , views: 4200000} ,

11 {name:’Nov 07’, visits: 490000 , views: 4500000} ,

12 {name:’Dec 07’, visits: 495000 , views: 5800000} ,

13 {name:’Jan 08’, visits: 520000 , views: 6000000} ,

14 {name:’Feb 08’, visits: 620000 , views: 7500000}

15 ]

16 });

1718 // simple chart

19 var chart = new Ext.Panel({

20 iconCls:’chart’,

21 title: ’ExtJS.com Visits Trend , 2007/2008 (Simple styling)’,

22 frame:true ,

23 // renderTo: ’container ’,

24 width :500,

25 height :300,

26 layout:’fit’,

2728 items: {

29 xtype: ’linechart ’,

30 store: store ,

31 url: CHART_URL ,

32 xField: ’name’,

33 yField: ’visits ’,

34 yAxis: new Ext.chart.NumericAxis ({

35 displayName: ’Visits ’,

11

36 labelRenderer : Ext.util.Format.numberRenderer(’0,0’)

37 }),

38 tipRenderer : function(chart , record){

39 return Ext.util.Format.number(record.data.visits , ’0,0’) + ’

visits in ’ + record.data.name;

40 }

41 }

42 });

Ext.chart.Chart: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.chart.Chart

4 Extjs 4.2.1

docs: http://docs.sencha.com/extjs/4.2.1/examples: http://dev.sencha.com/deploy/ext-4.0.0/examples/release-notes: http://cdn.sencha.io/ext/gpl/4.2.1/release-notes.html

4.1 Compatibility with ExtJS 3

The backward compatibility is maintained in the vast majority of objects as said by the devel-opers of Sencha.

Ext 4 is by far the most comprehensive update to Ext JS that we’ve ever produced,and many changes were required that are not compatible with Ext 3. However, we’vegone to great lengths to provide as much backwards-compatibility as possible.

4.2 Library includes

1 <script type="text/javascript"

2 src="http :// docs.sencha.com/extjs /4.2.0/ extjs/ext -all.js">

3 </script >

4 <link rel="stylesheet" type="text/css"

5 href="http :// dev.sencha.com/deploy/ext -4.1.0 - gpl/resources/css/ext -all.css

" />

4.3 ArrayStore

Small helper class to make creating Ext.data.Stores from Array data easier. An ArrayStorewill be automatically configured with a Ext.data.reader.Array.A store configuration would be something like:

1 var store = Ext.create(’Ext.data.ArrayStore ’, {

2 // store configs

3 storeId: ’myStore ’,

4 // reader configs

5 fields: [

6 ’company ’,

7 {name: ’price ’, type: ’float ’},

8 {name: ’change ’, type: ’float ’},

9 {name: ’pctChange ’, type: ’float ’},

12

10 {name: ’lastChange ’, type: ’date’, dateFormat: ’n/j h:ia’}

11 ]

12 });

Ext.data.ArrayStore: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.ArrayStore

4.4 data.Store

The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy,and also provide functions for sorting, filtering and querying the model instances containedwithin it.Creating a Store is easy - we just tell it the Model and the Proxy to use for loading and savingits data:

1 // Set up a model to use in our Store

2 Ext.define(’User’, {

3 extend: ’Ext.data.Model’,

4 fields: [

5 {name: ’firstName ’, type: ’string ’},

6 {name: ’lastName ’, type: ’string ’},

7 {name: ’age’, type: ’int’},

8 {name: ’eyeColor ’, type: ’string ’}

9 ]

10 });

1112 var myStore = Ext.create(’Ext.data.Store’, {

13 model: ’User’, // optional

14 proxy: {

15 type: ’ajax’,

16 url: ’/users.json’,

17 reader: {

18 type: ’json’,

19 root: ’users ’

20 }

21 },

22 autoLoad: true

23 });

Ext.data.Store: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store

4.4.1 Local Loading

Array of Model instances or data objects to load locally.

1 var myStore = Ext.create(’Ext.data.Store’, {

2 fields: [’Key’, ’Value’],

3 data : [

4 {"Key": 0, "Value": LocalizedStrings.Common.Yes},

5 {"Key": 1, "Value": LocalizedStrings.Common.No}

6 ]

7 });

13

4.4.2 Dynamic Loading

Stores can be dynamically updated by calling the load method:

1 store.load({

2 params: {

3 group: 3,

4 type: ’user’

5 },

6 callback: function(records , operation , success) {

7 // do something after the load finishes

8 },

9 scope: this

10 });

Here a bunch of arbitrary parameters is passed along with the load request and a callbackfunction is set up to do something after the loading is over.

4.5 JsonStore

Small helper class to make creating Ext.data.Stores from JSON [3] data easier. A JsonStorewill be automatically configured with a Ext.data.reader.Json.A store configuration would be something like:

1 //var store = new Ext.data.JsonStore ({

2 var store = Ext.create(’Ext.data.JsonStore ’, {

3 // store configs

4 storeId: ’myStore ’,

56 proxy: {

7 type: ’ajax’,

8 url: ’get -images.php’,

9 reader: {

10 type: ’json’,

11 root: ’images ’,

12 idProperty: ’name’

13 }

14 },

1516 // alternatively , a Ext.data.Model name can be given (see Ext.data.Store

for an example)

17 fields: [’name’, ’url’, {name:’size’, type: ’float’}, {name:’lastmod ’,

type:’date’}]

18 });

Ext.data.JsonStore: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.JsonStore

4.5.1 Properties for proxy (actionMethods)

Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to’GET’ for ’read’ actions and ’POST’ for ’create’, ’update’ and ’destroy’ actions. The @linkExt.data.proxy.Rest maps these to the correct RESTful methods.

14

1 proxy: {

2 type: ’ajax’,

3 url: ’get -images.php’,

4 actionMethods: { // default GET

5 create : ’POST’,

6 read : ’GET’,

7 update : ’POST’,

8 destroy: ’POST’

9 },

10 reader: {

11 type: ’json’,

12 root: ’images ’,

13 idProperty: ’name’

14 }

15 }

4.6 JsonPStore

Small helper class to make creating Ext.data.Stores from different domain JSON data easier.A JsonPStore will be automatically configured with a Ext.data.reader.Json and a JsonPProxy.A store configuration would be something like:

1 var store = new Ext.data.JsonPStore ({

2 // store configs

3 storeId: ’myStore ’,

45 // proxy configs

6 url: ’get -images.php’,

78 // reader configs

9 root: ’images ’,

10 idProperty: ’name’,

11 fields: [’name’, ’url’, {name:’size’, type: ’float’}, {name:’lastmod ’,

type:’date’}]

12 });

Ext.data.JsonPStore: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.JsonPStore

4.7 TreeStore

The TreeStore is a store implementation that is backed by by an Ext.data.Tree. It providesconvenience methods for loading nodes, as well as the ability to use the hierarchical tree struc-ture combined with a store. This class is generally used in conjunction with Ext.tree.Panel.This class also relays many events from the Tree for convenience.A store configuration would be something like:

1 var store = Ext.create(’Ext.data.TreeStore ’, {

2 root: {

3 expanded: true ,

4 children: [

5 { text: "detention", leaf: true },

6 { text: "homework", expanded: true , children: [

7 { text: "book report", leaf: true },

8 { text: "algebra", leaf: true}

15

9 ] },

10 { text: "buy lottery tickets", leaf: true }

11 ]

12 }

13 });

Ext.data.TreeStore: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.TreeStore

4.8 ComboBox

Docs: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBoxExample: http://docs.sencha.com/extjs/4.2.1/#!/example/form/combos.html

A combobox control with support for autocomplete, remote loading, and many other features.The selection list’s options are populated from any Ext.data.Store 4.4, including remote stores.The data items in the store are mapped to each option’s displayed text and backing value viathe valueField and displayField configurations, respectively.

If your store is not remote, i.e. it depends only on local data and is loaded up front, you shouldbe sure to set the queryMode to ’local’, as this will improve responsiveness for the user.

4.8.1 ComboBox sample

1 Ext.onReady(function () {

23 // The data store containing the list of states

4 var states = Ext.create(’Ext.data.Store’, {

5 fields: [’abbr’, ’name’],

6 data : [

7 {"abbr":"AL", "name":"Alabama"},

8 {"abbr":"AK", "name":"Alaska"},

9 {"abbr":"AZ", "name":"Arizona"}

10 //...

11 ]

12 });

1314 // Create the combo box , attached to the states data store

15 var ComboBox = Ext.create(’Ext.form.ComboBox ’, {

16 fieldLabel: ’Choose State ’,

17 store: states ,

18 queryMode: ’local ’,

19 displayField: ’name’,

20 valueField: ’name’,

21 // renderTo: Ext.getBody ()

22 });

2324 ComboBox.render(Ext.get(’local -states ’));

2526 });

4.9 TreePanel

Docs: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel

16

The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanelmust be bound to a Ext.data.TreeStore 4.7. TreePanel’s support multiple columns through thecolumns configuration.

Simple TreePanel using inline data:

1 var TPanel = Ext.create(’Ext.tree.Panel’, {

2 title: ’Simple Tree’,

3 width: 200,

4 height: 150,

5 store: store ,

6 rootVisible: false ,

7 renderTo: Ext.getBody ()

8 });

4.10 Grid

Docs: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.Paging

Ext.toolbar.Paging is a specialized toolbar that is bound to a Ext.data.Store and providesautomatic paging control. This Component loads blocks of data into the store by passingparameters used for paging criteri

The column Ext.grid.RowNumberer is no longer supported (version 3.4.0), in later versions youuse:

columns: [{xtype: ’rownumberer’}]

The following is an example:

1 Ext.onReady(function () {

2 var serviceUrl = ’./ paging.php’;

3 var itemsPerPage = 2; // set the number of items you want per page

45 var store = Ext.create(’Ext.data.Store’, {

6 id:’simpsonsStore ’,

7 autoLoad: false ,

8 fields :[’username ’, ’password ’, ’data’],

9 pageSize: itemsPerPage , // items per page

10 proxy: {

11 type: ’ajax’,

12 url: serviceUrl , // url that will load data with respect to

start and limit params

13 reader: {

14 type: ’json’,

15 root: ’geonames ’,

16 totalProperty: ’TotalItems ’

17 }

18 }

19 });

2021 // specify segment of data you want to load using params

22 store.load({

23 params :{

24 start:0,

17

25 limit: itemsPerPage

26 }

27 });

2829 var pagingtoolbar = Ext.create(’Ext.grid.Panel’, {

30 title: ’Simpsons ’,

31 store: store ,

32 columns: [

33 {xtype: ’rownumberer ’},

34 { header: ’Username ’, dataIndex: ’username ’ },

35 { header: ’Password ’, dataIndex: ’password ’, flex: 1 },

36 { header: ’Data’, dataIndex: ’data’ }

37 ],

38 width: 400,

39 height: 280,

40 dockedItems: [{

41 xtype: ’pagingtoolbar ’,

42 store: store , // same store GridPanel is using

43 dock: ’bottom ’,

44 displayInfo: true

45 }],

46 // renderTo: Ext.getBody ()

47 });

4849 pagingtoolbar.render(Ext.get(’pagingtoolbar ’));

5051 });

4.11 Grouping

Docs: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.feature.Grouping

This feature allows to display the grid rows aggregated into groups as specified by theExt.data.Store.groupers specified on the Store. The group will show the title for the groupname and then the appropriate records for the group underneath. The groups can also beexpanded and collapsed.

4.11.1 Grouping sample (Local Loading)

1 var store = Ext.create(’Ext.data.Store’, {

2 storeId:’employeeStore ’,

3 fields :[’name’, ’seniority ’, ’department ’],

4 groupField: ’department ’,

5 data: {’employees ’:[

6 { "name": "Michele Rosica", "seniority": 7, "department": "

Management" },

7 { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },

8 { "name": "Jim Halpert", "seniority": 3, "department": "Sales" },

9 { "name": "Kevin Malone", "seniority": 4, "department": "

Accounting" },

10 { "name": "Angela Martin", "seniority": 5, "department": "

Accounting" }

11 ]},

12 proxy: {

13 type: ’memory ’,

18

14 reader: {

15 type: ’json’,

16 root: ’employees ’

17 }

18 }

19 });

2021 Ext.create(’Ext.grid.Panel’, {

22 title: ’Employees ’,

23 store: Ext.data.StoreManager.lookup(’employeeStore ’),

24 columns: [

25 { text: ’Name’, dataIndex: ’name’ },

26 { text: ’Seniority ’, dataIndex: ’seniority ’ }

27 ],

28 features: [{ftype:’grouping ’}],

29 width: 200,

30 height: 275,

31 renderTo: Ext.getBody ()

32 });

4.11.2 Grouping sample (Dynamic Loading)

1 var config = {

2 serviceUrl: serviceUrl ,

3 fields: [’name’, ’seniority ’, ’department ’],

4 root: ’employees ’,

5 autoLoad: true ,

6 groupField: ’department ’

7 };

8 var store = getJsonStore(config);

910 var grid = Ext.create(’Ext.grid.Panel’, {

11 title: ’Employees ’,

12 store: store ,

13 columns: [

14 { text: ’Name’, dataIndex: ’name’ },

15 { text: ’Seniority ’, dataIndex: ’seniority ’ }

16 ],

17 features: [{ftype:’grouping ’}],

18 width: 340,

19 height: 275,

20 // renderTo: Ext.getBody ()

21 });

2223 grid.render(Ext.get(’Grouping ’));

getJsonStore

1 function getJsonStore(config)

2 {

3 if (! config.fields) return null;

4 if (! config.root) config.root = ’Items’;

5 if (! config.autoLoad) config.autoLoad = false;

67 var store = Ext.create(’Ext.data.JsonStore ’, {

8 // storeId: ’myStore ’,

9 model: config.model ,

10 groupField: config.groupField ,

11 proxy: {

12 type: ’ajax’,

19

13 url: config.serviceUrl ,

14 reader: {

15 type: ’json’,

16 root: config.root ,

17 idProperty: config.idProperty

18 }

19 },

20 fields: config.fields ,

21 autoLoad: config.autoLoad

22 });

2324 return store;

25 }

4.12 Chart

Charts provide a flexible way to achieve a wide range of data visualization capablitities. EachChart gets its data directly from a Store, and automatically updates its display whenever datain the Store changes. In addition, the look and feel of a Chart can be customized using Themes.

1 var store = Ext.create(’Ext.data.JsonStore ’, {

2 fields: [’name’, ’data1’, ’data2’, ’data3’, ’data4’, ’data5’],

3 data: [

4 {name: Ext.Date.monthNames [0], data1: 101, data2: 2344, data3: 7832,

data4: 493 , data5: 564},

5 {name: Ext.Date.monthNames [1], data1: 501, data2: 9344, data3: 7632,

data4: 990 , data5: 56},

6 {name: Ext.Date.monthNames [2], data1: 1300, data2: 544, data3: 29,

data4: 543 , data5: 765},

7 {name: Ext.Date.monthNames [3], data1: 5643, data2: 3323, data3:

3242, data4: 2600 , data5: 1500}

8 ]

9 });

1011 // simple chart

12 var chart = Ext.create(’widget.panel’, {

13 width: 600,

14 height: 300,

15 title: ’ExtJS.com Visits Trends , 2007/2008 (No styling)’,

16 // renderTo: Ext.getBody (),

17 layout: ’fit’,

18 items: {

19 xtype: ’chart ’,

20 animate: false ,

21 store: store ,

22 insetPadding: 30,

23 axes: [{

24 type: ’Numeric ’,

25 minimum: 0,

26 position: ’left’,

27 fields: [’data1’],

28 title: false ,

29 grid: true ,

30 label: {

31 renderer: Ext.util.Format.numberRenderer(’0,0’),

32 font: ’10px Arial’

33 }

34 }, {

35 type: ’Category ’,

36 position: ’bottom ’,

20

37 fields: [’name’],

38 title: false ,

39 label: {

40 font: ’11px Arial’,

41 renderer: function(name) {

42 if (name)

43 return name.substr(0, 3) + ’ 07’;

44 }

45 }

46 }],

47 series: [{

48 type: ’line’,

49 axis: ’left’,

50 xField: ’name’,

51 yField: ’data1’,

52 listeners: {

53 itemmouseup: function(item) {

54 Ext.example.msg(’Item Selected ’, item.value [1] + ’ visits

on ’ + Ext.Date.monthNames[item.value [0]]);

55 }

56 },

57 tips: {

58 trackMouse: true ,

59 width: 80,

60 height: 40,

61 renderer: function(storeItem , item) {

62 this.setTitle(storeItem.get(’name’) + ’<br />’ +

storeItem.get(’data1 ’));

63 }

64 },

65 style: {

66 fill: ’#38 B8BF’,

67 stroke: ’#38 B8BF’,

68 ’stroke -width ’: 3

69 },

70 markerConfig: {

71 type: ’circle ’,

72 size: 4,

73 radius: 4,

74 ’stroke -width ’: 0,

75 fill: ’#38 B8BF’,

76 stroke: ’#38 B8BF’

77 }

78 }]

79 }

80 });

Ext.chart.Chart: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.Chart

4.13 InputFields

This example accepts only numeric characters.

1 var InputField1 = Ext.create(’Ext.form.FormPanel ’, {

2 title: ’Form with TriggerField ’,

3 bodyPadding: 5,

4 width: 350,

5 renderTo: Ext.getBody (),

21

6 items :[{

7 xtype: ’numberfield ’, // or textfield

8 fieldLabel: ’Sample Trigger ’,

9 emptyText: ’enter the password ’

10 }]

11 });

This example accepts only alphanumeric characters.

1 var InputField2 = Ext.create(’Ext.form.FormPanel ’, {

2 title: ’Form with TriggerField ’,

3 bodyPadding: 5,

4 width: 350,

5 renderTo: Ext.getBody (),

6 items :[{

7 xtype: ’textfield ’,

8 fieldLabel: ’Sample Trigger ’,

9 emptyText: ’enter the username ’,

10 maskRe: /^[0 -9a-zA -Z-_]+$/

11 }]

12 });

4.13.1 Custom Trigger

This example defines a trigger handler.

1 Ext.define(’Ext.ux.CustomTrigger ’, {

2 extend: ’Ext.form.field.Trigger ’,

3 alias: ’widget.customtrigger ’,

45 // override onTriggerClick

6 onTriggerClick: function () {

7 //Ext.Msg.alert(’Status ’, ’You clicked my trigger!’);

8 },

910 // override onChange

11 onChange: function(key) {

12 //Ext.Msg.alert(’Status ’, ’onChange event!’);

13 console.log(key);

14 }

15 });

1617 var InputField3 = Ext.create(’Ext.form.FormPanel ’, {

18 title: ’Form with TriggerField ’,

19 bodyPadding: 5,

20 width: 350,

21 renderTo: Ext.getBody (),

22 items :[{

23 xtype: ’customtrigger ’,

24 fieldLabel: ’Sample Trigger ’,

25 emptyText: ’click the trigger ’

26 }]

27 });

4.13.2 Custom Vtype

This is a singleton object which contains a set of commonly used field validation functionsand provides a mechanism for creating reusable custom field validations. The following field

22

validation functions are provided out of the box:

• alpha

• alphanum

• email

• url

This example shows how to define a new type.

1 // custom Vtype for vtype:’number ’

2 var pattern = /^[0 -9]+([ ,][0 -9]+)?$/;

3 Ext.apply(Ext.form.field.VTypes , {

4 // vtype validation function

5 number: function(val , field) {

6 return pattern.test(val);

7 },

8 // vtype Text property: The error text to display when the validation

function returns false

9 numberText: ’Not a valid id. Must be in the format "12345". ’,

10 // vtype Mask property: The keystroke filter mask

11 numberMask: pattern

12 });

1314 var FormPanel = Ext.create(’Ext.form.Panel’, {

15 title: ’Contact Info’,

16 width: 300,

17 bodyPadding: 10,

18 renderTo: Ext.getBody (),

19 items: [{

20 xtype: ’textfield ’,

21 name: ’number ’,

22 fieldLabel: ’ContactID ’,

23 allowBlank: false , // requires a non -empty value

24 vtype: ’number ’

25 }, {

26 xtype: ’textfield ’,

27 name: ’name’,

28 fieldLabel: ’Name’,

29 allowBlank: false // requires a non -empty value

30 }, {

31 xtype: ’textfield ’,

32 name: ’email’,

33 fieldLabel: ’Email Address ’,

34 vtype: ’email ’ // requires value to be a valid email address format

35 }]

36 });

References

[1] “Sencha Ext JS”, http://www.sencha.com/, September 2013

[2] “Web application”, http://en.wikipedia.org/wiki/Web_application, October 2013

[3] “JSON”, http://en.wikipedia.org/wiki/JSON, October 2013

[4] “jsdoc-toolkit”, https://code.google.com/p/jsdoc-toolkit/, October 2013

23