ExtJS (Integration with ASP.NET and other languages & Call Center Case Study)

Agenda

What is ExtJS?
Setting up ExtJS
Ext data process diagram
Examples
- Drag-Drop View between two Grids
- GridView with XML
- GridView with Static content
- Alert, Confirmbox, Messagebox, Prompt (Single-Line and Multi-Line), Progress Dialog , Waiting Dialog and Custom Error Message with icons.
- Multi Selector & Item Selector
- Panels
- Resizable Examples with Multi-Line Textboxes and Images
- Custom Tabs

What is ExtJS?

Ext is a client-side, JavaScript frameworks for building web applications. In early 2006, Jack Slocum started working on a set of extention utilities for the Yahoo! User Interface (YUI) library. These extensions were quickly organized into as independent library of code and distributed under the name "yui-ext." In the fall of 2006 which truned out to be final version of the code under that name (and the open source BSD license). By the end of the year, the library had gained so much popularity that the name was changed simply to Ext, a reflection of its maturity and independance as a framework. A company was formed in early 2007, and Ext is now dual-licensed under the GPL and a commercial license. The library cfficially hot version11.0 on April 1, 2007.

Setting up ExtJS

Latest ExtJS version is 2.2
Including on a page:
<link href="ext-2.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-2.2/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-2.2/ext-all-debug.js" type="text/javascript"></script>
Include any Ext theme CSS file after the default ext-all.css

Ext data process diagram

Examples

Drag-Drop View between two Grids

Drag-Drop View between two Grids

Here we can drag and drop data from one GridPanel to another.

GridView with XML

GridView with XML

This grid loads data from XML file and also uses autoHeight and autoWidth to dynamically size to fit it's data and columns.

Note: Specify the column names and headers in xml-grid.js that comes from XML file and need to display in the grid.

Storing Data Setting Columns:

var store = new Ext.data.Store({
// load using HTTP
url: 'WorkLog.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Log',
id: 'WORKLOGID',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'WORKLOGDATE', mapping: 'WORKLOGDATE'},
'PROJECTNAME','COMPANYNAME', 'USERFNAME',
'USERLNAME', 'WORKHOURS', 'WORKLOGCOMMENT'
])
});

Creating Grids and Setting Column Headers

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "WORKLOGDATE", width: 100, dataIndex: 'WORKLOGDATE',
sortable: true},
{header: "PROJECTNAME", width: 115, dataIndex: 'PROJECTNAME',
sortable: true},
{header: "COMPANYNAME", width: 100, dataIndex: 'COMPANYNAME',
sortable: true},
{header: "USERFNAME", width: 100, dataIndex: 'USERFNAME', sortable: true},
{header: "USERLNAME", width: 100, dataIndex: 'USERLNAME', sortable: true},
{header: "WORKHOURS", width: 90, dataIndex: 'WORKHOURS', sortable: true},
{header: "WORKLOGCOMMENT", width: 240, dataIndex:
'WORKLOGCOMMENT', sortable: true}
],
renderTo:'grid-example',
width:850,
height:300
});

GridView with XML

This grid have paging and also uses autoHeight and autoWidth to dynamically size to fit it's data and columns.

Note: Specify the column names and headers in sliding-pager.js that comes from XML file and need to display in the grid.

Storing Data Setting Columns

var store = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(myData),
remoteSort:true,
sortInfo: {field:'price', direction:'ASC'},
reader: new Ext.data.ArrayReader({
fields: [
{name: 'WORKLOGDATE', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'PROJECTNAME'},
{name: 'COMPANYNAME'},
{name: 'USERFNAME'},
{name: 'USERLNAME'},
{name: 'WORKHOURS'},
{name: 'WORKLOGCOMMENT'}
]
})
});

Creating Grids and Setting Column Headers

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "WORKLOGDATE", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'WORKLOGDATE'},
{id:'PROJECTNAME',header: "PROJECTNAME", width: 115, sortable: true, dataIndex: 'PROJECTNAME'},
{header: "COMPANYNAME", width: 100, dataIndex: 'COMPANYNAME', sortable: true},
{header: "USERFNAME", width: 100, dataIndex: 'USERFNAME', sortable: true},
{header: "USERLNAME", width: 100, dataIndex: 'USERLNAME', sortable: true},
{header: "WORKHOURS", width: 90, dataIndex: 'WORKHOURS', sortable: true},
{header: "WORKLOGCOMMENT", width: 240, dataIndex: 'WORKLOGCOMMENT', sortable: true}],
stripeRows: true,
autoExpandColumn: 'PROJECTNAME',
height:300,
width:850,
frame:true,
title:'Sliding Pager',
plugins: new Ext.ux.PanelResizer({ minHeight: 100 }),
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true
})
});
grid.render('grid-example');
store.load({params:{start:0, limit:10}});
});