This is part V of the tutorial, and covers how the Ext JS client app can consume the server Node.js API
By now we have a working back-end with Node, and a working
front-end with Sencha. Now we are ready to modify our Sencha app,
so we can consume our back-end data and see it all in action! It’s
a simple client application with CRUD functionality for the Users
model. With other words, we can create (
users, read users and user details (
existing users (
PUT), and remove a user (
I’ve added the codebase to Github, so let’s go through it, file by
file. We will focus on the Classic Desktop view first, later we
will create a mobile phone view. # Classic https://github.com/savelee/docker-ext-client/blob/master/classic/src/Application.js
The application doesn’t auto create a viewport. Instead I’ve
created a custom launch function, which either creates a login view
(with the viewport plugin enabled), or the main interface with the
viewport plugin enabled. It depends on the authorization token, if
you have one on the device, it will auto login. Take a look into
the following files:
Here you can see the login panel. It’s actually a non-closable,
non-draggable window, locked in the middle of the screen. The user
can enter the username and password, which will be posted to the
Node Express server. In case the username and password match with
what’s in the database, it will return a token. In the success
callback, we will save the token to the browser local
storage. Notice that we created two ViewControllers.
One which will be shared by the classic and modern view. (This one
contains the functionality to communicate with the back-end, since
that’s view irrelevant.) The other ViewController, extends from the
shared VC. This is the VC that contains an
is bound to the classic view. Note that although we Bcrypt the
passwords in the database. It’s not secure to send passwords over
HTTP. An attacker could very easily sniff the username and password
that will be in the
POST. Therefore enter: https://letsencrypt.org/.
You could very easily create a free SSL certificate. You can find a
guide here: https://letsencrypt.org/getting-started/
so you could set this up in no time. It’s actually very easy, as
long as you have console access to your webserver. Let’s dive
further into our Ext JS code:
That’s the main viewport. It’s pretty much the same as the generated one from Sencha Cmd. We’ve just added a logout button. (which will destroy the main viewport, and remove the token from the localstorage.)
This is just a view with a grid. It shows a grid column for the
action column to remove the user from the grid.
The functionality for this can be found in:
onRemovemakes an AJAX call with the
DELETEmethod, it makes a call to a URL that contains a user id.
When you click on a row in the grid, it will open a popup window,
which contains the form. I’ve implemented a
which will hold the selected record. That way, as soon as
the window will be created, and you run
the form, it will run
updateRecord() and load the
record in the form, since the model fields map the form fields.
When you submit the form, you will get into the
method. Here we just determine if the form contains a hidden form
field, which contains the user URL. If it does, it means, the form
contains data, so every change made will be a
request. If the form is empty, we will add a new user, and
POST to the /users overview URL.
The AJAX request itself, can be found in the shared user VC. And
that’s it for the desktop view.
The mobile view re-uses most of the functionality that’s already there. What is new, are the mobile (phone) views:
- https://github.com/savelee/docker-ext-client/blob/master/modern/src/Application.js If there’s a token available, it will add the main view to the viewport, else it adds a login view.
The login view is a container, which centers a login form in the
middle of the screen. It calls the login view controller, for the
onLogin() method. This method uses the
method from the shared login view controller, which
contains the AJAX
POST call, to request a token. Once
logged in, it will add the token to the local storage, and
it will remove the login view from the viewport, and instead add
the main view to the viewport.
The main view is just a tabpanel, with for now, just one
tab. It contains a hidden back button, which will be enabled once
you are in a form. And it contains a logout button, which calls
onLogout()method, which removes the token, and resets the views. It contains a user tab, which has a
cardlayout. It can switch between a grid view which list all the users, or a form, to edit one user.
This is the list view. It contains an
password. Once you tap an item, it slides in the userform.
This form contains also a toolbar with a Delete button.
This toolbar will be hidden, when you open the form via the Add
button. But when you tap an item, it’s visible, and the form will
be prefilled with data. It contains similar functionality as in the
classic toolkit. It holds a
config with the record.
updateRecord() will be called, every time when you run
setRecord(). Feel free to download the code base and
play around with it.
By the end of this part of the tutorial, you will understand how the Sencha Ext JS client can consume the Node.js server API. In the next blog posts we will focus on getting familiar with Docker.