Docs‎ > ‎REST APIs‎ > ‎

Sencha Example

Building web apps takes time - time to build the Server,  time to build the client.  And it can be complex, so we provide this guide to help you get there fast.

In this example, we'll be building a Sencha App to a RESTful sql server, using the following 2 products:

  • Espresso enables you to build a complete RESTful server for SQL data, including logic and security.  The process is largely point and click, so you can literally build a server in minutes.  In this example, we'll be using a pre-built server, but you can adopt this process to your own database.
  • Sencha Architect provides a designer to build web apps.  While there's virtually no hand-written code, the configuration process can be tricky.  So, we provide this guide to show exactly how to build your project, and connect it to a RESTful server.


If you don't already have them, you will need to install the following.

Espresso Logic

Signup here (takes about 5 minutes).  Since Espresso is a service, it's just a registration process - there is nothing to install or configure.

Sencha Architect

Download Sencha Architect, a desktop utility for building web / mobile interfaces, and run the installer.

Sencha Command

You will also to download and install Sencha Command, which provides testing services to deploy / run your application.

Build a RESTful server

The Espresso signup process creates a project / database which we'll use for this example.  It is called Espresso Logic Demo (Customers, Orders, Items).  At the completion of the signup process, ensure you are running the Logic Designer on this project (upper red box in the diagram below; it should be the default).

Espresso consists of a cloud-based server (created during Signup), and a Browser-based Logic Designer for defining ResourcesLogic and Security.  The Logic Designer includes a Rest Lab you can use to test your server without having to write a program.  It's shown below.

Note this shows your REST URL (middle red box in the diagram shown below).  We will use the Customers Resource (predefined in the signup process) in this tutorial.

Click Send Request - this issues the command and shows the JSON response, like this:

Building a Server for your own database

While it is not necessary for this exercise, you can adapt this to your own databases, by following this simple procedure illustrated on the Espresso Home page.
  • Create a project, register your database... and your server is running.   For databases on-premise, you will need to arrange for connectivity.
  • Your base tables are REST Resources, and you can create additional ones with a simple point and click.  You do not need to build servers, build REST Listeners (e.g., Jersey), write SQL, convert it to JSON (e.g., Jackson), and so forth - that's all out of the box.

Building the Sencha App

Use Sencha Architect to create your application as described below.

Create Project

Create a New Project, and save it supplying the name RestSencha.

Create Model

Click the Create Model button as shown in the upper right.

Configure Model name, attributes

Specify the name of your Model (CustomersModel), and define the attributes (Name, CreditLimit, Balance) returned in the REST response.  Note you can determine these from the Rest lab, above.

Create a JSON Store and a REST Proxy

Click the upper [+] to create a new Store > Json Store.  

Transform the JSON Store to a REST Proxy

Select the Proxy, and right click to Transform > Rest Proxy

Associate the Store to the Model

Select the Store, right click and select the Model as shown below.

Configure the REST Proxy URL

You now need to configure the REST proxy to use the URL of your Resource.  You can obtain this from the Rest Lab in the Logic Designer, a string such as

You will see there are lots of properties.  You can narrow the properties as shown below by filling in the first red box.

Configure the REST Proxy Headers

You must also configure the HTTP header.  Select the Proxy > Headers > Edit - this will summon the code window.  Paste in the following:

    Accept: 'application/json',
    Authorization: 'Espresso demo_full:1'

Create Container on View (optional)

We can now create the visual elements of the form.  

Optionally, you can first create a Container (this is not necessary, but may facilitate organizing components for more complex forms):

Create a Grid in the Container

Drag a Grid onto the Container.  If you did not create a container above, you should also specify the grid width and height.

Link the Grid to the Store

Select the Grid's store property, and select the store as shown below.

Grid AutoColumns

Right click the grid in the Navigator, and specify Auto columns.  The columns should then appear in the Design view as shown below.

Store > Load Data

Sencha Architect provides a "live data" feature to assist in screen layout, where you can retrieve actual data.  Alternatively, you can set the Store to AutoLoad.

Add a ToolBar and 2 Buttons

A a Toolbar to your Grid, and 2 buttons to the Toolbar as shown below.  Specify the text property to be Load, Save.

Add Button Event Code

Select a button, and click the [+] on the Event Bindings - select the onButtonClick events.

Then, right click the click event, and paste in the code supplied below.

Save - button click event
var custStore = Ext.getStore('CustomersDataStore');

Load - button click event
var custStore = Ext.getStore('CustomerJsonStore');
if (custStore != null) {
    var customerStore = Ext.getStore("CustomerJsonStore");

    Ext.Msg.alert('Status', "REST Loaded successfully, store: " + customerStore);
    console.log("Load ok"); //logs go where??
} else {{
        title:'Load Failed',
        msg: 'Cannot find CustomerJsonStore',
        buttons: Ext.Msg.YESNOCANCEL,
        fn: processResult,
        animEl: 'elId'

Deploy Project

We have created the project in a folder structure as shown below.  Create a sencha-pub folder.
Register this in Sencha Architect: Settings > Project > 
URL Path = http://localhost:1841/sencha/RestSencha
Publish Path = /Users/val/ABL/Frameworks/sencha/sencha-pub

Now click the Publish button.  Check inside the sencha-pub folder to verify your project artifacts are created.

Start Sencha Web Server

Open a command window, and start the Web Server provided by Sencha Cmd with a command like this:

sencha fs web start -map /Users/val/ABL/Frameworks/sencha/sencha-pub

Which should result in the following:

Run Project

You can now run the project at URL http://localhost:1841/app.html.  The app should start - click the Load button to retrieve and display the data:

Next Steps

This has illustrated basic connectivity.  You can download the project by clicking the down arrow at the bottom of this page.

This exercise has illustrated very basic connectivity to a RESTful server.  Espresso provides a number of services to support client applications, including:
  • multi-table results - e.g., showing orders and line items for a customer
  • security - authentication and authorization, for row/column level security
  • pagination - scrolling over large result sets
  • filtering
  • update - sending update, with business logic enforcement and optimistic locking
  • update refresh - reflecting server-based computations on the client

Val Huber,
Sep 28, 2013, 9:02 PM