Simplified

A Book by ~

Mohammad Imran Khan

Simplified
Introduction to Extjs For Beginners

EXTJS TUTORIAL INTRODUCTION TO EXTJS FOR BEGINNERS Introduction to ExtJS Javascript is one of the commonly used script language. To add value to it, an open source library is provided in Javascript. This open source library contains many APIs using which you can build web applications containing many user interface components like buttons, grids, and much more. This open source framework is known as ExtJS. This ExtJS tutorial will help you in understanding the basic concepts of ExtJS. Features of ExtJS As mentioned above, ExtJS is an open source framework or library in Javascript. Few of its highlighting features are mentioned below: ExtJS is faster than other open source frameworks. It provides high performance. The component model of ExtJS is expandable. Its UI widgets can be customized based on your need. Since it is an open source, you can download and use it without paying any cost. Using ExtJS, you can create web applications that are DHTML or AJAX based. ExtJS can run on all famous browsers including Internet Explorer and Mozilla Firefox. APIs of ExtJS is easy to use. It has jQuery interoperability. It supports prototype interoperability. Version History There are three major releases of ExtJS framework, skipping away the intermediate releases. Information about the version history is given below: ExtJS 1.1 This is the first stable release of ExtJS. ExtJS 2.0 This version got released on 04122007. This version provides many features that work similar to the desktop applications. ExtJS 2.0 doesnt have any backward compatibility with that of ExtJS 1.1. ExtJS 3.0 This version got released on 06072009. New UI components called ListView and Flash Charting are added in this release. ExtJS 3.0 code has backward compatibility with that of ExtJS 2.0. Sencha ExtJs got merged with Raphael and JQTouch thereby forming a platform that is named as Sencha. This change happened on 15062010. ExtJS 4.0 Installation of ExtJS To download ExtJS, go to the URL: www.sencha.com. In this URL, you can find a download option for ExtJS. Click on that and you will be taken to http://www.sencha.com/products/js/ URL and the download of ExtJS version 3.2.1 will happen automatically. Optionally, you can also use the URL www.extjs.com which will in turn redirect you to www.sencha.com. Components Provided by ExtJS ExtJS provides many components; most important among them are Grid, Grid Panels, Tab Panels, Toolbar, Button, Menu, Tree, Modal Windows, Slider, List Box, Combo Box, Radio Button, Check Box,

Text Field, Text Area Input and Chart. EXTJS GRID AN OPEN SOURCE LIBRARY Introduction to ExtJS Grid ExtJS is an open source library in javascript. Using ExtJS framework, you can create many user interface components for your application. One among such UI component is ExtJS Grid. Using ExtJS Grid, you can create grids which are nothing but tables with rows and columns in it. Based on the type of ExtJS Grid you use, you can print and edit the grid contents. Edit includes Add/Modify/Delete of a particular column/row in the table. ExtJS Grid also takes care of paging when the number of records is huge. Types of Grid Panels in ExtJS Grid: The grid components are available in Ext.grid namespace. There are three different grid components available inside this namespace. They are listed below: Grid Panel Using GridPanel you are allowed to show only the data on the Grid. No other transactions can be done on the Grid. Editor Grid Panel Editor Grid Panel extends or inherits from GridPanel. As mentioned above, GridPanel is not editable. Unlike Grid Panel, Editor Grid Panel allows you to configure a grid control that is editable. If any of the columns in the Editor Grid Panel has to be editable, then you can configure specific editor for that column. Property Grid Property Grid extends or inherits from EditorGridPanel. It is used to manage elements of the Grid as keyvalue pairs. Example with Illustration: For better understanding of ExtJS Grid, here is a simple example displaying employee records in a Grid of type EditorGridPanel.

<html> <head> <meta httpequiv=ContentType content=text/html; charset=iso88591 /> <title>ExtJS Grid</title> <link rel=stylesheet type=text/css href=resources/css/extall.css/> <script type=text/javascript src=adapter/ext/extbase.js></script> <script type=text/javascript src=extall.js></script> <script> function gridConstruction() { var empGridRec = [ [ 100, 'Jack', 'Supervisor',2000], [ 100, 'Jim', 'Manager',5000], [ 100, 'Nancy', 'Engineer',4000] ]; var empDatastore = new Ext.data.SimpleStore({ fields : [ { name: 'EmpNo', type: 'int' }, { name: 'EmpName', type: 'string' }, { name: 'EmpDesig', type: 'string' },

{ name: 'EmpSalary', type: 'float' } ], data: empGridRec }); var empColumnModel = new Ext.grid.ColumnModel ([{ header: 'Employee Number', readOnly: true, width: 100, sortable: true, dataIndex: 'EmpNo' }, { header: 'Name', readOnly: true, width: 150, sortable: false, dataIndex: 'EmpName', }, { header: 'Designation', readOnly: true, width: 100, sortable: true, dataIndex: 'EmpDesig', }, { header: 'Salary', readOnly: true, width: 75, sortable: true, dataIndex: 'EmpSalary', editor: new Ext.form.NumberField({ allowDecimals: true }) } ]); var empGrid = new Ext.grid.EditorGridPanel({ id: empGrid, store: empDataStore, cm: empColumnModel, clicksToEdit: 1,

enableColLock:false, }); var empWindow = new Ext.Window({ id: empWindow, title: Listing Employee Records, width:800, height:400, items: empGrid }); empDataStore.load(); empWindow.show(); } </script> </head> <body> <script> Ext.onReady( gridConstruction ); </script> </body> </html>
In this example, you have created a link to extall.css and added the script extbase.js. These two entries have to be included in all programs containing grids. The main part of the code is the javascript function named gridConstruction inside which you create a data store populated with data from empGridRec array. You then create a column model defining columns that have to be displayed in the Grid. You then create the EditorGridPanel to which you associate the data store and column model. You then display the grid inside the window. The grid construction actually happens when the Ext.onReady function is triggered with the function gridConstruction as parameter. EXTJS GRID WITH WORD WRAP Grid Example with wordwrap This tutorial explains you how to: 1. Add checkbox 2. Wrap content in grid header 3. Wrap content in grid cell 1. Add checkbox

ExtJs column model (cm shorthand) will have a CheckboxSelectionModel. Create a CheckboxSelectionModel var Checkbox = new Ext.grid.CheckboxSelectionModel(); Add this Checkbox in grids column model.
2. Wrap content in grid header Add the following to CSS.

.xgrid3hdinner{ whitespace:normal; }

3. Wrap content in grid cell Add the following to CSS.

.xgrid3cellinner { whitespace:normal; }
Note: In both the above cases, add following code to rearrange the grid & adjust the scroll bar.

grid.on(columnresize, function(columnIndex,newSize){ grid.syncSize(); });

Before Wrapping Grid: After applying Wrapping to Grid ( After adjusting the columns ): The complete code written by Imran is provided below. To CHAT LIVE and discuss the code with the Expert, visit Imran on eZdia.

<html> <head> <meta httpequiv=ContentType content=text/html; charset=utf8 /> <title id=title> Grid Example with wordwrap </title> <link rel=stylesheet type=text/css href=../resources/css/extall.css/> <script type=text/javascript src=../adapter/ext/extbase.js></script> <script type=text/javascript src=../extalldebug.js></script> <script type=text/javascript> Ext.BLANK_IMAGE_URL = ../resources/images/default/s.gif; </script> <style> .xgrid3hdinner, .xgrid3cellinner { whitespace:normal; } </style> <script type=text/javascript> Ext.onReady(function() { Ext.QuickTips.init(); var reader1 = new Ext.data.ArrayReader({}, [{ name: 'company' }, { name: 'address'}]); var Checkbox = new Ext.grid.CheckboxSelectionModel(); Ext.grid.dummyData1 = [ ['eZdia Inc', 'www.ezdia.com USA'], ['Tulsana LLC', 'www.tulsana.com USA'], ];

var grid = new Ext.grid.GridPanel({ store: new Ext.data.Store({ reader: reader1, data: Ext.grid.dummyData1 }), cm: new Ext.grid.ColumnModel({ defaults: { sortable: true }, columns: [ Checkbox, { id: 'company', header: "Company Name", dataIndex: 'company' }, { header: "Address", dataIndex: 'address' }] }), sm: Checkbox, columnLines: true, frame: true, autoHeight: true, title: Grid with wordwrap, iconCls: icongrid, width: 300, renderTo: document.body }); }); grid.on(columnresize, function(columnIndex,newSize){ grid.syncSize(); }); </script> </head> <body> </body> </html>
EXTJS GRID GROUPING WITH LOCAL JSON DATA This tutorial explains you how to:

 How to use a local JSON data in the ExtJs Create a Grouping store Create a ExtJs grouping grid 1. How to use a local JSON data in the ExtJs ExtJs grid will accept any type of data such as Array, Xml, JSON formats. Currently we can use a local JSON data and a JsonReader. For every type of data we have store & reader. Data:

Ext.grid.taskDummyData = { results: 1, root: [{ 'serialNo': '0', 'priority': 'Low', 'reminderDate': '4/2 12:00am', 'dueDate': '5/8 04:00pm', 'status': 'Open' }] };
Reader:

var taskReader = new Ext.data.JsonReader({ idProperty: serialNo, root: root, totalProperty: results, fields: [{ name: 'serialNo' }, { name: 'priority' }, { name: 'reminderDate', dateFormat: 'n/j h:ia', type: 'date' }, { name: 'dueDate', dateFormat: 'n/j h:ia', type: 'date' }, { name: 'status' }],

});
Get Registered for online training on extjs at an nominal price. Hurry Up limited Seats Available. ExjJs Online Training 2. Create Grouping store To group the data, we need a grouping store with available data. Grouping Store:

var taskStore = new Ext.data.GroupingStore({ reader: taskReader, data: xg.taskDummyData, sortInfo: { field: dueDate, direction: ASC }, groupField: status });
Note that in grouping store, you can see the default sortInfo and direction & default groupField. 3. Create a ExtJs grouping grid

var TaskGrid = new Ext.grid.GridPanel({ store: taskStore, columns: [.], view: new Ext.grid.GroupingView({ forceFit: true, groupTextTpl: {text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) }), frame: true, width: 700, height: 450, collapsible: true, animCollapse: false, title: Grouping Example, renderTo: document.body }); });
The above will create a group in grid. groupTextTpl is nothing but the values to be shown in the title of every group. Download absolutely free ExtJS Tutorials and complete training on ExtJS Grid, The Complete code is Provided Below :

<html> <head> <meta httpequiv=ContentType content=text/html; charset=utf8 /> <title id=title>

ExtJS grid grouping with local JSON data </title> <link rel=stylesheet type=text/css href=resources/css/extall.css /> <style> .taskoverdue .xgrid3cellinner { color:#fb223a; } .taskcompleted .xgrid3cellinner { textdecoration:linethrough; color:gray; } </style> <script type=text/javascript src=adapter/ext/extbase.js></script> <script type=text/javascript src=extalldebug.js></script> <script type=text/javascript> Ext.BLANK_IMAGE_URL = resources/images/default/s.gif; Ext.onReady(function() { Ext.QuickTips.init(); var xg = Ext.grid; Ext.grid.taskDummyData = { results: 7, root: [{ 'serialNo': '0', 'priority': 'Low', 'reminderDate': '4/2 12:00am', 'dueDate': '5/8 04:00pm', 'status': 'Open' }, { 'serialNo': '1', 'priority': 'Low', 'reminderDate': '4/2 12:00am', 'dueDate': '4/2 04:00pm', 'status': 'Close' }, { 'serialNo': '2', 'priority': 'High', 'reminderDate': '4/2 12:00am', 'dueDate': '4/2 04:00pm', 'status': 'Close' }, { 'serialNo': '3',

'priority': 'Medium', 'reminderDate': '4/2 12:00am', 'dueDate': '4/8 04:00am', 'status': 'Close' }, { 'serialNo': '4', 'priority': 'Medium', 'reminderDate': '5/2 12:00am', 'dueDate': '4/8 04:00am', 'status': 'Open' }, { 'serialNo': '4', 'priority': 'Medium', 'reminderDate': '5/2 12:00am', 'dueDate': '12/8 04:00am', 'status': 'Open' }] }; var taskReader = new Ext.data.JsonReader({ idProperty: serialNo, root: root, totalProperty: results, fields: [{ name: 'serialNo' }, { name: 'priority' }, { name: 'reminderDate', dateFormat: 'n/j h:ia', type: 'date' }, { name: 'dueDate', dateFormat: 'n/j h:ia', type: 'date' }, {

name: 'status' }], }); var taskStore = new Ext.data.GroupingStore({ reader: taskReader, data: xg.taskDummyData, sortInfo: { field: dueDate, direction: ASC }, groupField: status }); var TaskGrid = new xg.GridPanel({ store: taskStore, columns: [{ id: 'serialNo', header: "Serial No", width: 100, sortable: true, dataIndex: 'serialNo' }, { header: "Priority", width: 40, sortable: true, dataIndex: 'priority' }, { header: "Status", width: 40, sortable: true, dataIndex: 'status' }, { header: "Remainder Date", width: 60, sortable: true, dateFormat: 'Ymd', dataIndex: 'reminderDate' }, {

header: "Due Date", width: 60, sortable: true, dateFormat: 'Ymd', dataIndex: 'dueDate' }], view: new Ext.grid.GroupingView({ forceFit: true, getRowClass: function(r) { var d = r.data; if (d.status == Close) { return taskcompleted; } if (d.dueDate && d.dueDate.getTime() < new Date().clearTime().getTime()) { return taskoverdue; } return ; }, groupTextTpl: {text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) }), frame: true, width: 700, height: 450, collapsible: true, animCollapse: false, title: Grouping Example, tbar: ['>', { text: 'Group By', menu: { items: [{ text: 'Status', handler: function() { taskStore.groupBy('status'); } }, { text: 'Priority',

handler: function() { taskStore.groupBy('priority'); } } ] } }, , { text: Clear Grouping, iconCls: iconcleargroup, handler: function() { taskStore.clearGrouping(); } }], renderTo: document.body }); }); </script> </head> <body> </body> </html>
FOR MORE DETAILS VISIT http://www.ezdia.com/epad/extjstutorialintroductionext2beginners/2810/ http://www.ezdia.com/epad/extjsgriddatafiltertutorial/2819/ http://www.ezdia.com/epad/extjsgridwordwraptutorial/2275/

Mohammed Imran Khan

A trusted eZdia expert. http://www.ezdia.com/profile/mohammed.imran.khan