DevConnections Orlando, Build Advanced Web UIs with a Rich JavaScript UI Language

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.

image

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'
});

});

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. Pia Sarwary says:

    I am completely boggled by the fact that Amazon’s cloud drive doesn’t use folders as well. I could see using it to store a few movies or other large (1-2 GB) files, sort-of. But that’s about it. As a place to back-up data (in my case thousands of .txt and .doc files, I’m a writer) it is far too time intensive to be useful. Especially compared to an easy drag-n-drop solution like dropbox.

  2. tablette graphique wacom says:

    Hey! Good post! Please do keep us posted when we can see a follow up!

  3. The .NET project does not work.

Your Comments

*

Protected with IP Blacklist CloudIP Blacklist Cloud

Follow

Get every new post delivered to your Inbox

Join other followers: