Sencha Touch: Expense Tracker app development tutorial - Part1

In Part1 of this 'Expense Tracker app development tutorial' Post series, i am going to explain the list of models and stores that i created for the Expense Tracker App.  Totally i created two stores and two models here is the explanation.

Category Model:

This category model contains the following fields : id, name and price. Sencha Touch supports the various validations like Presence, Email, Inclusion, Format etc and these validations will be specified using validation configurations  for each model fields. You may notice the identifier configuration type is set as sequential, which will generate sequence integer values (1,2,3 etc) for id field.

Ext.define('ExpenseTracker.model.Category', {
    extend: 'Ext.data.Model',
    alias: 'model.category',

    requires: [
        'Ext.data.Field'
    ],

    config: {
        identifier: {
            type: 'sequential'
        },

        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'name',
            type: 'string'
        }, {
            defaultValue: 0.00,
            name: 'price',
            type: 'float'
        }],

        validations: [{
            type: 'presence',
            field: 'name'
        }, {
            type: 'presence',
            field: 'price'
        }]
    }
});

Expenses Model:

This Expense model contains the following fields : id, name, notes, categoryid, price and date. Sencha Touch supports the various validations like Presence, Email, Inclusion, Format etc and these validations will be specified using validation configurations  for each model fields. You may notice the identifier configuration type is set as sequential, which will generate sequence integer values (1,2,3 etc) for id field.

Ext.define('ExpenseTracker.model.Expense', {
    extend: 'Ext.data.Model',
    alias: 'model.expense',

    requires: [
        'Ext.data.Field'
    ],

    config: {
        identifier: {
            type: 'sequential'
        },

        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'name',
            type: 'string'
        }, {
            name: 'notes',
            type: 'string'
        }, {
            name: 'categoryid',
            type: 'int'
        }, {
            name: 'price',
            type: 'float'
        }, {
            dateFormat: 'Y-m-d',
            defaultValue: 'new Date()',
            name: 'date',
            type: 'date'
        }],

        validations: [{
            type: 'presence',
            field: 'name'
        }, {
            type: 'presence',
            field: 'categoryid'
        }, {
            type: 'presence',
            field: 'price'
        }, {
            type: 'presence',
            field: 'date'
        }]
    }
});

Categories Store:

This categories store will be associated with the category model that we created before using the model configuration. storeId configuration is mainly used to access the store in the Controller/View method using Ext.getStore(). Proxy type configuration is used to tell the store how to handle the data, localstorage will store the data using HTML5 Local Storage API.

Ext.define('ExpenseTracker.store.Categories', {
    extend: 'Ext.data.Store',
    alias: 'store.categories',

   requires: [
        'ExpenseTracker.model.Category',
        'Ext.data.proxy.LocalStorage'
    ],

    config: {
        autoLoad: true,
        model: 'ExpenseTracker.model.Category',
        storeId: 'Categories',

        proxy: {
           type: 'localstorage',
            id: 'categoryLocalStorage'
        }
    }
});

Expenses Store:

This Expenses store will be associated with the expense model that we created before using the model configuration. storeId configuration is mainly used to access the store in the Controller/View method using Ext.getStore(). Proxy type configuration is used to tell the store how to handle the data, localstorage will store the data using HTML5 Local Storage API. I will explain the grouper configuration later in the upcoming post.

Ext.define('ExpenseTracker.store.Expenses', {
    extend: 'Ext.data.Store',
    alias: 'store.expenses',

    requires: [
        'ExpenseTracker.model.Expense',
        'Ext.data.proxy.LocalStorage',
        'Ext.util.Grouper'
    ],

   config: {
        autoLoad: true,
        model: 'ExpenseTracker.model.Expense',
        storeId: 'Expenses',

        proxy: {
            type: 'localstorage',
            id: 'ExpenseLocalStorage'
        },

        grouper: {

            groupFn: function (item) {
                return '<div style="color:#fff;">' + Ext.Date.format(item.get('date'), 'F d, Y') + '</div>';
            },
            direction: 'DESC',
            sortProperty: 'date'
        }
    }
});

Hope, you enjoyed this Post. In Part2 of this post series, i will be explaining the view components that i created for this Expense Tracker App. Hope, see you soon..