To build fully-featured web applications that support complex interaction in a reasonable amount of time requires a high-end JavaScript library. Someday, maybe JQueryUI will be good for this, but for now, the choices are few and include ExtJS, Dojo, YUI and a handful of others. This session will use ExtJS as the example. We will use Microsoft’s ASP.NET MVC as the data / CRUD layer and from that, we will build a typical LOB (line of business) application using complex UI elements. Those elements include layout managers, data grids, extensive validation, spinner controls and other advanced UI features. To get an idea of what I’m talking about, spend five minutes looking at the examples on the ExtJS web site demonstrating these advanced web UI features http://www.sencha.com/products/js/. You will be convinced that spending hundreds of hours trying to build something not nearly as well done as this is a waste of time when there are such excellent libraries already built for you.
The source attached below for my demos.
Final ExtJS4 JavaScript (that didn’t quite work, but working now)
// Load dependencies
Ext.require([
'Ext.data.*',
'Ext.button.*',
'Ext.form.*'
]);
Ext.onReady(function () {
// Date renderer
var dateConvert = function (val, record) {
if (val.split('(').length == 2) {
var dateObj = new Date(parseInt(val.substr(6)));
return Ext.util.Date.format(dateObj, 'm/d/Y');
} else {
return val;
}
}
Ext.regModel('Users', {
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Username' },
{ name: 'CreationDate' },
{ name: 'FirstName' },
{ name: 'LastName' },
{ name: 'PlanExpirationDate' }
],
// Proxy
proxy: {
type: 'ajax',
url: '/Users/JsonData',
api: {
read : '/Users/JsonData',
create : '/Users/Create',
update : '/Users/Edit',
destroy : '/Users/Delete'
},
// Json Reader
reader: {
type: 'json',
idProperty: 'Id',
totalProperty: 'total',
root: 'data'
},
writer: {
type: 'json',
encode: false,
listful: true,
writeAllFields: true
},
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
}
});
var usersStore = new Ext.data.Store({
model: 'Users',
autoLoad: true,
pageSize: 10
});
var gridForm = Ext.create('Ext.form.FormPanel', {
id: 'userFormPanel',
frame: true,
title: 'Users Data',
store: usersStore,
bodyPadding: 5,
width: 910,
layout: 'column', // Specifies that the items will now be arranged in columns
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [{
columnWidth: 0.65,
xtype: 'gridpanel',
id: 'usersGrid',
store: usersStore,
height: 410,
title: 'Users',
headers: [
{
text: 'User Name',
flex: 1,
sortable: true,
dataIndex: 'Username'
},
{
text: 'CreationDate',
width: 100,
sortable: true,
renderer: dateConvert,
dataIndex: 'CreationDate'
},
{
text: 'First Name',
width: 100,
sortable: true,
dataIndex: 'FirstName'
},
{
text: 'Last Name',
width: 100,
sortable: true,
dataIndex: 'LastName'
},
{
text: 'Plan Expiration Date',
width: 120,
sortable: true,
renderer: dateConvert,
dataIndex: 'PlanExpirationDate'
}
],
listeners: {
selectionchange: function (model, records) {
if (records[0]) {
var recordToLoad = {
Username: records[0].data.Username,
CreationDate: dateConvert(records[0].data.CreationDate),
FirstName: records[0].data.FirstName,
LastName: records[0].data.LastName,
PlanExpirationDate: dateConvert(records[0].data.PlanExpirationDate)
}
this.up('form').getForm().setValues(recordToLoad);
}
}
},
bbar: new Ext.PagingToolbar({
store: usersStore
})
}, {
columnWidth: 0.35,
margin: '0 0 0 10',
bodyStyle: {
margin: '4px'
},
xtype: 'form',
id: 'userForm',
title: 'Add / Edit User Details',
defaults: {
width: 260,
labelWidth: 120,
margin: '7px'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'User Name',
name: 'Username'
}, {
xtype: 'datefield',
fieldLabel: 'Creation Date',
name: 'CreationDate'
}, {
fieldLabel: 'First Name',
name: 'FirstName'
}, {
fieldLabel: 'Last Name',
name: 'LastName'
}, {
xtype: 'datefield',
fieldLabel: 'Plan Expiration Date',
name: 'PlanExpirationDate'
}],
buttons: [{
text: 'Update Record',
scale: 'medium',
handler: function (btn, e) {
var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();
if (userSelectionModel.hasSelection()) {
// get the form
var formCmp = Ext.getCmp('userForm');
// get the form field values
var formValues = formCmp.getForm().getValues();
// get the selected record
var recordSelection = userSelectionModel.getLastSelected();
// update the record with the form fields
recordSelection.set(formValues)
// sync store
usersStore.sync();
}
}
}, {
text: 'Add As New Record',
scale: 'medium',
handler: function (btn, e) {
// get the form
var formCmp = Ext.getCmp('userForm');
// get the form field values
var formValues = formCmp.getForm().getValues();
// add to the the store
usersStore.add(formValues);
// sync with the store
usersStore.sync();
}
}, {
text: 'Delete Record',
scale: 'medium',
handler: function (btn, e) {
// get the user grid selection model
var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();
// check if there's a selection
if (userSelectionModel.hasSelection()) {
// remove the selected record
usersStore.remove(userSelectionModel.getLastSelected());
usersStore.sync();
}
}
}]
}],
renderTo: 'extjs-grid'
});
});