In this tutorial you will learn how to create a .NET server-side handler for a Sencha Touch store. Let’s begin by defining a sample Sencha Touch application with a “Hotels” store that contains data about a number of fictitious hotels. Our goal is to build the server-side .NET code that will work with the store in order to read, create, update and delete hotels information saved in a database.

To start, you will need to create a Visual Studio or WebMatrix project with the following directories:

The index.html file of the Sencha Touch app will look like this:

[Read more...]

In this tutorial you are going to learn how to edit and save changes to the fields of a Sencha Touch Model instance, and under which conditions you can revert these changes. You will also learn how and when to query a Sencha Touch data store to obtain the records that have been updated.

The code that you will write in this tutorial is based on the application used in the Sencha Touch stores tutorial. This is a demo app that contains a Hotels Store loaded with instances of the Hotel model.

To start, you need to create the app’s directories:

[Read more...]

In this tutorial I will show you how to create a Roles class that you can use to implement authentication and authorization in a Sencha Touch application.

This is a continuation of the authentication and authorization series we started with the How to Add a Login Screen to a Sencha Touch Application article, from which we will borrow the sample application that we will use in this tutorial.

Our demo application has a couple of views called Login and MainMenu. It also has a controller, which will handle the login operations and receive a server response containing the roles assigned to a given user.

[Read more...]

In this second part of my tutorial on How to add a Login Screen to Sencha Touch application, you will continue building a small Sencha Touch app that demonstrates how to implement a very basic login feature.

You created the app’s Login view with its main components in the first part of the tutorial, and gave the Login view the ability to fire the signInCommand application event when a user taps the Login button.

Creating the MainMenu View

Now you will create the app’s MainMenu view. You will take users to this view after a successful authentication.

You need to place the view’s code in the view/MainMenu.js file. Here is the skeleton of the view:

Ext.define('Sample.view.MainMenu', {
    extend: 'Ext.Panel',
    requires: ['Ext.TitleBar'],
    alias: 'widget.mainmenuview',
    config: {
        layout: {
            type: 'fit'
        },
	 items:[]
    }
});

[Read more...]

In this tutorial you will learn how to add a Login screen and Login controller to a Sencha Touch application. The sample application you will build will have two views: The Login view and the MainMenu view. This is a popular setup in mobile applications, where you present users with a Login screen, and upon successful login, you display the application’s main menu:

[Read more...]

In this Sencha Touch tutorial you will learn how to add, remove and find records in a Sencha Touch store. The store methods you will learn about in this post are the following:

• add
• insert
• getAt
• getById
• removeAt
• removeAll
• getCount

Let’s create a simple Sencha Touch application with the following files:

The index.html file will look like this:

In the model/Hotel.js file, you will define a Hotels store like so:

Ext.define('App.store.Hotels', {
    extend: 'Ext.data.Store',
    config:{
        fields: [
            { name: 'id', type: 'int' },
            { name: 'name', type: 'string' },
            { name: 'address', type: 'string' },
            { name: 'status', type: 'int' }
        ],
        data: [
            [1, 'Siesta by the Ocean', '1 Ocean Front, Happy Island', 1],
            [2, 'Gulfwind', '25 Ocean Front, Happy Island', 1],
            [3, 'South Pole View', '1 Southernmost Point, Antarctica', 1]
        ]
    }
});

[Read more...]