Sencha Example

Getting Started‎ > ‎Language Examples‎ > ‎

To build a web app, you must build the server and the client. The following example shows how you can build your project as a Sencha app and connect it to a RESTful SQL server. You can build a complete RESTful server for SQL data, including logic and security using Live API Creator. The process is largely point-and-click, so you can build a server in minutes. This example uses a pre-built server, but you can adopt this process to your own database.

Verify Prerequisites

If you don't already have them, download and install the following:

Live API Creator. For more information, see Install Live API Creator.
Sencha Architect, which is a desktop utility that provides a designer to build web/mobile interfaces/apps, and run the installer. For more information about installing Sencha Architect, see the Sencha site.
Sencha Cmd, which provides testing services to deploy/run your application. For more information about Sencha Cmd, see the Sencha site.

Build a RESTful Server

You can create a project/database using the API Creator setup process. API Creator includes default API projects which we'll use for this example. It is called Demo (Customers, Orders, Items). At the completion of the signup process, ensure you are running the API Creator on this project (upper red box in the following diagram; it should be the default).

You can test your server using the Rest Lab. The following image shows the REST Lab:

Your REST URL (the middle red box) is shown in the URL field. This tutorial uses the Customers resource, which was predefined in the signup process. Issue the command and shows the JSON response by clicking GET.

Build a Server for your own Database

While it is not necessary for this exercise, you can adapt this to your own databases. Your base tables are REST Resources, and you can create additional ones using API Creator. The build servers, build REST Listeners (for example, Jersey), SQL, and JSON (for example, Jackson) are included out of the box.

Create a project.
Unzip the demonstration package based on Jetty.
Start and your server is running.
For databases on-premises, arrange for connectivity.

Build 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 Create > Model.

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.

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. The following image shows your RestSencha project in Sencha Architect:

Associate the Store to the Model

Select the store and then right-click and select the model. The following image shows your RestSencha project in Sencha Architect:

Configure the REST Proxy URL

Configure the REST proxy to use the URL of your Resource. You can obtain this from the REST Lab, a string such as http://server.acme/rest/default/demo/v1/Customers. Narrow the properties by filling in the first red box. The following image shows how to narrow the properties in your RestSencha project in Sencha Architect:

Configure the REST Proxy Headers

You must also configure the HTTP header. Select the Proxy > Headers > Edit . The code window opens. Paste in the following:

{
Accept: 'application/json',
Authorization: 'CALiveAPICreator demo_full:1'
}

The following image shows your RestSencha project in Sencha Architect:

(Optional) Create Container on View

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). The following image shows how to create a container on a view for your RestSencha project in Sencha Architect:

Create a Grid in the Container

Drag a grid onto the container. If you did not create a container, specify the grid width and height.

The following image shows how to create a grid in your RestSencha project in Sencha Architect:

Link the Grid to the Store

Select the grid's store property, and select the store. The following image shows how to link the grid to the store
in your RestSencha project in Sencha Architect:

Grid AutoColumns

Right-click the grid in the Navigator, and specify Auto columns. The columns appear in the Design view, as shown in the following image:

Retrieve your Data

You can retrieve your actual data by laying out your screen. Use the Sencha Architect live data. Alternatively, you can set the Store to AutoLoad. The following image shows the Load Data option in your RestSencha project in Sencha Architect:

Add a Toolbar and Buttons

Add a toolbar to your grid and two buttons to the Toolbar. Specify the text property you want to load, and then save your changes. The following image shows how to add a toolbar in your RestSencha project in Sencha Architect:

The following image shows how to add a button in your RestSencha project in Sencha Architect:

Add Button Event Code

Select a button, click the [+] on Event Bindings, and select the onButtonClick event. The following image shows how to add button event code in your RestSencha project in Sencha Architect:
Right-click the click event, and paste in the following code:
Save. Button click event

var custStore = Ext.getStore('CustomersDataStore');
custStore.sync();

Load - button click event

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

The following image shows where to paste the code in your RestSencha project in Sencha Architect:

Deploy your API Project

The API project is located in the following folder structure.

Create a sencha-pub folder. The following image shows the folder structure:
Register this in Sencha Architect on the Settings window, Project tab.

URL prefix
Enter http://localhost:1841/sencha/RestSencha.
Publish Path
Enter /Users/val/ABL/Frameworks/sencha/sencha-pub.
The following image shows the Settings window in your RestSencha project in Sencha Architect:
Click Publish. 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

The following response is expected:

Run the Project

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

Next Steps

This example illustrates very basic connectivity to a RESTful server. You can download the project from the RESTSENCHA.zip file. API Creator provides services to support client applications, including:

Multi-table results. For example, 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.