Sencha Ext JS - Altervistamycode.altervista.org/files/docs/Extjs-Release1.0.0.pdf · Ext JS [1] is a pure JavaScript application framework for building interactive web applications
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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.
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;
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.
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
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.
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
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.
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.
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 ’, {
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:
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
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.
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:
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:
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 ’, {
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.
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
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.
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.
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