Ext JS from Scratch – Part 1

Step 2: In the ‘launch’ function of the ‘app.js’ file, I have included code that is needed to call the addRowHandlers function. The key thing to understand here is that I only write the code in ‘app.js’. All of the ‘framework’ code in ‘Ext-lite.js’ is provided to me and allows me to focus on my application, not the inner workings of the framework.function launch() {
console.log(‘page is loaded’);
addRowHandlers(“ext-table1”, onSelect);
};

function onSelect(sender, record) {
var r = record[0].data;
var text = r.c0+’ – ‘+r.c1+’ – ‘+r.c2;
alert(text);
};

Refreshing the page and clicking on the row for Marge produces the following output:

addRowHandlers function – results

Finally, let’s tackle the issue of the static tags in the body. As I mentioned, with JavaScript you can completely construct the HTML on the page dynamically.

If you take a look at the structure of the static HTML, you essentially see a logical structure similar to this:

the viewport is common to each application, and the grid itself has just a few dynamic items:

• xtype (the type of an object, referred to as xtype in Ext JS)
• title (what goes in the header panel
• columns (description of all columns in the grid
• data (the data to populate the grid)
• listeners (the set of events the object is listening to)

What if we could remove all of the static HTML in the page (allowing the framework to create it dynamically with JavaScript) and just create a logical ‘grid’ in the launch function as a child of the viewport, with a definition of xtype, title, columns, data and events? Say something like this:{
  xtype: ‘grid’,
  title: ‘Users’,
  columns: [
    { name: ‘Name’ },
    { name: ‘Email’ },
    { name: ‘Phone number’ }
  ],
  data: data,
  listeners: {
    select: onSelect
  }
}

First, we add a few functions to ‘Ext-lite.js’ to handle the dynamic creation of the HTML – to see the code that was added, go to:

https://github.com/mgusmano/ExtJSFromScratch/blob/master/Part01/03/Ext-lite.js

You will notice that there is quite a bit of code in this file – this code represents the type of code that is in the Ext JS framework, and will be code that you will NOT have to write – the framework does all of this for you! We only have to write code in the ‘launch’ function of ‘app.js’ – you will see that below.

The ‘index.html’ file now looks like this (notice that now there are NO tags in the body):

Then, in ‘app.js’, we modify the ‘launch’ function so that it looks like this:function launch() {
Viewport.add({
xtype: ‘grid’,
title: ‘Users’,
columns: [
{text: ‘Name’, width: 100, dataIndex: ‘name’},
{text: ‘Email Address’, flex: 1, dataIndex: ’email’},
{text: ‘Phone Number’, width: 200, dataIndex: ‘phone’}
],
data: data,
listeners: {
select: onSelect
}
});
}

function onSelect(sender, record) {
var r = record[0].data;
var text = r.name+’ – ‘+r.email+’ – ‘+r.phone;
alert(text);
};

var data = [
{ name: ‘Lisa’, email: ‘lisa@simpsons.com’, phone: ‘555-111-1224’ },
{ name: ‘Bart’, email: ‘bart@simpsons.com’, phone: ‘555-222-1234’ },
{ name: ‘Homer’, email: ‘homer@simpsons.com’, phone: ‘555-222-1244’ },
{ name: ‘Marge’, email: ‘marge@simpsons.com’, phone: ‘555-222-1254’ }
]

So now I have a way to define WHAT I want the user interface to look like and should do, not having to worry about HOW the specific HTML is constructed. I would say that makes creating a web application a lot simpler – and that’s exactly what Ext JS is!

Using the Ext JS Framework to create our application

So now (finally!) let’s use the Ext JS Theme and Framework libraries instead of our own libraries – to see the final files, take a look here: https://github.com/mgusmano/ExtJSFromScratch/tree/master/Part01/05

For this example, I have a copy of the Ext JS 6.5.2 framework in a folder called ‘ext-6.5.2’ – to try this, you can use your licensed version of Ext JS or get a trial of the framework at: https://staging.sencha.com/products/extjs/evaluate

First, lets look at the ‘index.html’ file. Line 5 is a link to one of the Ext JS themes, the ‘Material Theme’ (modeled after the Google Material specification). Line 6 is a link to the Ext JS ‘modern’ toolkit (this example refers to the entire framework – in future blog posts (as part of this series) we will look at better ways to include the Ext JS framework in your application). The resulting ‘index.html’ page now looks like this:

The only change in the ‘app.js’ file is that we wrap the launch function in an object parameter to an Ext.application instance (we will explain the reason for that in a future blog).Ext.application({
launch: function () {
Ext.Viewport.add({
xtype: ‘grid’,
title: ‘Users’,
columns: [
{text: ‘Name’, width: 100, dataIndex: ‘name’},
{text: ‘Email Address’, flex: 1, dataIndex: ’email’},
{text: ‘Phone Number’, width: 200, dataIndex: ‘phone’}
],
data: data,
listeners: {
select: onSelect
}
});
}
});

function onSelect(sender, record) {
var r = record[0].data;
var text = r.name+’ – ‘+r.email+’ – ‘+r.phone;
alert(text);
};

var data = [
{ name: ‘Lisa’, email: ‘lisa@simpsons.com’, phone: ‘555-111-1224’ },
{ name: ‘Bart’, email: ‘bart@simpsons.com’, phone: ‘555-222-1234’ },
{ name: ‘Homer’, email: ‘homer@simpsons.com’, phone: ‘555-222-1244’ },
{ name: ‘Marge’, email: ‘marge@simpsons.com’, phone: ‘555-222-1254’ }
]

and the app now looks like this:

Our first Ext JS application

That’s it – you now have an actual Ext JS application! And it is much more functional than the one we were creating from scratch. The Ext JS Grid has things like sorting, big data handling, column hiding, and much more! If you are curious about all that the Ext JS Grid can do, check out our Kitchen Sink Example at: http://examples.sencha.com/extjs/6.5.1/examples/kitchensink/?modern#grids

All you need to do is modify what is in the ‘launch’ function – the Ext JS framework does the rest.

I assume you’ll want to write a much more complex application that what we wrote here. We’ll have plenty more to cover in the series, but we’ve made a lot of progress so far. Stay tuned for Part 2 of the “Ext JS from Scratch” series, coming soon!