Skip to Content

Building SAP mobile apps with Sencha Touch – part 2

My previous blog provided an overview Sencha frameworks and tools to build mobile apps. In this post we’ll start coding an example mobile app that connects to SAP Gateway using OData. We will be using the SAP Gateway demo system

Hello world!

So let’s get started with the basics: an HTML page to load the Sencha Touch library and the app. The easiest way to get started with Sencha Touch is using the hosted library on

Create the following app.html file that includes Sencha Touch javascript library and stylesheet:

<!DOCTYPE html>
<title>Hello World</title>
<!-- include the Sencha Touch stylesheet -->
<link rel="stylesheet"
<!-- include the Sencha Touch library -->   
<script src=""></script>
<!-- include your app code -->
<script src="app.js"></script> 

Our application code is in app.js:

// Ext.application is entry point for a Sencha Touch application
  // launch function will be called when all code is loaded and DOM is ready
  launch: function () {
    // create and display a messagebox
    Ext.Msg.alert('Hello SAP SCN', 'Sencha Touch is ready action!');

Put these files on a local webserver and point your Chrome browser at app.html:


We’ve got our basic app running! We’re ready to take the next step.

Creating a list view

This step will introduce you to the class system that is at the heart of Sencha Touch (from now on abbreviated to ST). It provides inheritance, namespacing, mixins, dependency definitions and more.

In ST you typically create building blocks by defining classes that extend (i.e. inherit from) the classes offered by ST. This is shown in the next example. We define a new CarrierList class by extending the built-in Ext.dataview.List and create an instance of this class in the launch function (the DOM needs to be ready before we can insert a UI component).

// With Ext.define you can define a class
Ext.define('App.view.CarrierList', {
    // we want to inherit from the built-in Ext.dataview.List
    extend: 'Ext.dataview.List',
    config: {
        // this component should fill the whole screen (viewport)
        fullscreen: true,
        // we'll provide some inline data
        data: [
            { code: 'AB', name: 'Air Berlin' },
            { code: 'BA', name: 'British Airways' },
            { code: 'DE', name: 'Delta Airlines' }
        // define a template that is used to render each data record:
        itemTpl: '{code} - {name}',
        // define a titlebar at the top as a child item of the List container
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            title: 'Carriers'
    launch: function () {
        // Ext.create will create an instance of a class

If you put this code in your app.js, you’ll see:


A couple of thing to note here:

  • Ext.define() defines a class, Ext.create() creates an instance of a class
  • The titlebar is a child item of the CarrierList. The titlebar is an example of a UI component. Components that can contain other components (i.e. child items) are called Containers.
  • The titlebar is not instantiated immediately with Ext.create(). Instead it is configured using an xtype, which is a short alias for a UI component class, e.g.
    ‘titlebar’ refers to class Ext.TitleBar. ST will defer instantiation until the a CarrierList is created. This is called lazy instantiation.

Fetching data from SAP Gateway

In the previous example we used inline data. Now let’s get some data from SAP Gateway using OData.

We will use the TravelAgency collection from the Flight sample database on the SAP Gateway demo system and display the Travel Agencies in a List.


The screenshot below shows a part of the OData feed for the TravelAgency collection:


To access this SAP data from Sencha Touch, we first define a TravelAgency model.

// define the TravelAgency model
Ext.define('App.model.TravelAgency', {
    extend: '',
    config: {
        // list the fields, the default type is string
        fields: [
          { name: "TravelAgencyID" },
          { name: "Name" },
          { name: "Street" },
          { name: "POBox" },
          { name: "PostalCode" },
          { name: "City" },
          { name: "Country" },
          { name: "Region" },
          { name: "TelephoneNumber" },
          { name: "URL" },
          { name: "LanguageCode" },
          { name: "LocalCurrencyCode" }
        proxy: {
            type: 'odata',
            url: ''+
            withCredentials: true,
            username: 'GW@ESW',
            password: 'ESW4GW'

This Model defines the fields and also the proxy type to use. In Sencha Touch, a data proxy is the bridge between data on the server and data in the application. The proxy takes care of preparing requests (e.g. parameters, and payload) and transforming server responses into Model instances.

As a result of the partnership with SAP, Sencha made available the SAP OData connector, which contains a data proxy to communicate with SAP Gateway and other SAP OData sources (e.g. SAP HANA). Please download the SAP connector and include a script link to the OData.js file after the ST library and before your app.js in your html page.

For a list we actually want to fetch multiple records in one go. So we’ll define a Store, which can hold a collection of model instances.

// define a store to load a collection TravelAgency records
Ext.define('', {
    extend: '',
    config: {
        model: 'App.model.TravelAgency',
        // perform client-side sorting on field Name
        sorters: 'Name',
        // configure grouping
        grouper: {
            // group by the first letter of Name field
            groupFn: function (record) {
                return record.get('Name')[0];

As you can see the TravelAgencies Store is configured wth the TravelAgency Model. This way ST knows which proxy and fields to use when trying to load server data.

Please note that I included a grouper function. It returns the first letter of the Travel Ageny’s name and is used to build a grouped list, which we will define next

The List view lists the names of the agencies and groups them by first letter.

// define a List to display Travel Agencies
Ext.define('App.view.TravelAgencyList', {
    extend: 'Ext.dataview.List',
    config: {
        // we want a grouped list
        grouped: true,
        // just display the name of each TravelAgency
        itemTpl: '{Name}'

Finally, we use our building blocks to launch our application:

    launch: function () {
        // create a store.
        var store = Ext.create('');
       // load the records from the SAP Gateway
        // create a list view and bind it to the store
        Ext.create('App.view.TravelAgencyList', {
            fullscreen: true,
            store: store

Now, fire up your Chrome browser with the “disable-web-security” command line. This will suppress the Same Origin Policy which normally doesn’t allow you to do XHR request across domains:


Now you can view app.html in Chrome, showing the TravelAgencies fetched from SAP Gateway:


Time to wrap up: in this post we have seen models and views. In the part 3 we’re going to add a controller to coordinate between models and views. We will also cover how ST can create, update and delete data on SAP Gateway data.

Thanks for reading!

You must be Logged on to comment or reply to a post.
  • hi Luc,

    Excellent blog series again from your side. Thanks for sharing!

    BTW: Nice trick for testpurposes; disable-web-security in chrome.

    Looking forward to part 3.


    • I could not understand the OData connector part. Saved the OData.js file at the defined location. After doing this, should I be able to view OData as one of the Proxy options in Config area? If not, then how should I get the OData connection done? Pls help – I am desparate. I am new to Sencha Touch environment and programming.

      • Hi Jack,

        Do you have issues working with the example in the article or are you working with Sencha Architect? If you share some more details, perhaps I can offer further help. You can also send me a mail.

        • Hello Luke,

          Thanks for extending help. I am new to Sencha environment and have started on this environment only recently. Before trying this example, the only stuff that that I did was with Sencha Ext framework in Sencha Architech – I tried the “CarListings” example and it worked fine.

          With the example that you have explained here, I initially tried building the same using Sencha Architech with Sencha Touch enabled on the SDK. I was quick to figure that this application was not supposed to be created with the Architech SDK. The reason being that, the moment I press on the Save button on SDK, the code gets modified on the app.js file and I would not get the results like what is expected. So, I started adding the code that you have given in this example, directly into the files like app.html and app.js.

          It worked fine and I kept getting the results as desired in this example, upto the rendering of XML file here. However, I started facing issues since the time when model related code came into play. The first issue that I faced was that I was no more touching the Architect SDK. So I instead created a model folder within the app folder on the machine and copied a ( .js ) file from somewhere. I renamed this file AgencyTravel.js. Similarly, I worked with store and List View. Kindly let me know if I should work with Architech or otherwise.

          Also, i have downloaded the OData.js file and copied it and srcipt referenced it in the app.html file as suggested by you. However, when I tried to enquire into the OData.js file, the code written in it was also not suitable for our example. I references a different example and a different information ( Do we need to also change the Odata code? What else do we need to enable oData based access for SAP Netweaver gateway based data? Could you kindly illucidate the example, by explaining each and every step just like it is done in case of CarListing example provided by Sencha, so that dummies like me can understand better? The reason why I am asking you this is that your example seems to be the only credible example over the web on OData-Sencha-SAP based application development. Expanding this example in detail will open avenues for developers like me.


          • Hi Jack,

            Thanks for your clarification. As you have noticed, the example code in this article doesn’t require the use of Architect. I plan to do another post on how to use Architect to develop Sencha-SAP app.

            In the mean time, I hope you can get the example code running by just putting all the js code in the “Fetching data from SAP Gateway” section of this article in a single “app.js” file and include a script link to the OData.js file after the ST library and before your app.js in your html page. So in total you need 3 files: the html page, the OData.js file and the app.js file.

            Please feel free to contact me by mail if you need further help. You can find my email in my profile.



  • Hi Luke,

    How can we handle deep entity(Header & multiple items) set to read, create & update data using the Sencha Touch OData connector?

    This is a real world scenario but unable to get the OData connector to handle this.

    Any ideas?