Sencha touch charts remove decimal values on axes

Hello,

If you have used sencha touch charts, you might have faced this issue. If you set minimum and maximum to chart axes, you might have decimal values in numeric axes. See the image below.

This occurs if you specify maximum and minimum on axes. See the code below.

minimum: 0,
maximum: 100,
majorTickSteps :5,
minorTickSteps :5

Here minimum defines minimum allowed value and maximum defines maximum allowed value on axes. Axes will not have value more than maximum. majorTickSteps defines number of steps on axes for example if you specify minimum to 0 and maximum to 100, 0 to 100 are divided in equal five steps according to axes data.

So if you have data in store which can not be distributed equally on axes. It will display decimal values with 10 decimal points. This is annoying when you are crating an application like dashboard and you are displaying more than one charts at a time in panel.

To overcome this problem, override Ext.chart.axis.Axis class method drawAxis as follow.


Ext.override(Ext.chart.axis.Axis, {
    drawAxis: function (init) {
    }
});

Search code of this function in touch-charts-debug.js and paste the same code here and do the following modifications.

Search for the following line in code

me.labels.push(+(me.labels[me.labels.length - 1] + step).toFixed(10));

Change parameter in toFixed function to 0

me.labels.push(+(me.labels[me.labels.length - 1] + step).toFixed(0));

That's it and you will have integer values in charts.

Sencha Touch Working with Models, Proxies, Stores

Data package is the important core part of sencha touch 1.x package. It enables application to persist data through application using models and proxies.

Model defines your business entity and proxy allows you to create CRUD (create, read, update, delete) functions for the models. Model is assigned to store. Here in this blog I am going to explain how to use models and proxy with store.

First define a proxy.


Ext.data.ProxyMgr.registerType("myProxy",
    Ext.extend(Ext.data.Proxy, {
        create: function (operation, callback, scope) {
             //Here goes your create logic
        },
        read: function (operation, callback, scope) {
             //Here goes your read logic
        },
        update: function (operation, callback, scope) {
             //Here goes your update logic
        },
        destroy: function (operation, callback, scope) {
             //Here goes your delete logic
        }
    })
);

This will create a new proxy with a name my proxy. Now create a model and assign proxy to it.


Ext.regModel('myModel', {
    fields: [
        {name : 'field1' , type : 'int'},
        {name : 'field2' , type : 'datetime'},
        {name : 'field3' , type : 'string'}    ],
    proxy: {
        type: "myProxy"
    }
});

Now assign model to a store.

var myStore= new Ext.data.Store({

    model: 'myModel'

});

Now to call the read function of proxy you can call store load method.

myStore.load()

To call create function of proxy you can add new item in store and call sync method.

var newModel = Ext.ModelMgr.create({ 'field1': value1,

            'field2': value2,

            'field3': value3

        }, 'myModel');

myStore.add(newModel);

myStore.sync();

To call update function of proxy you can update item in store as follow.

var updateModel = Ext.ModelMgr.create({ 'field1': value1,

            'field2': value2,

            'field3': value3

        }, 'myModel');

myStore.update(updateModel);

To call destroy method you have to explicitly call proxy destroy function since destroy method is not yet implemented for the store as follow.

var deleteModel= Ext.ModelMgr.create({ 'field1': value1,

            'field2': value2,

            'field3': value3

        }, 'myModel');

deleteModel.getProxy().destroy(new Ext.data.Operation({ action: 'destroy',records:deleteModel.data}));

Sencha Touch offline store

Hello,

This is my first blog post on Sencha Touch. Recently I tried sencha touch and I built an application which can work offline once loaded in browser. Here I will explain how can you get your data offline in sencha touch.

First of all define an offline store with following configuration.


myApp.stores.offlineWordStore = new Ext.data.JsonStore({
    model: 'myModel',
    proxy: {
        type: 'localstorage',
        id: 'myStore'
    }
});

Here is important thing is proxy configuration. It's defined with the type localstorage. When you define proxy with local storage it will use HTML 5 local storage to store data.

Now define your online store as follow.


myApp.stores.onlineWordStore = new Ext.data.Store({
    model: 'myModel',
    proxy: {      
        url: 'http://www.example.com',
        reader: {
            type: 'json',
            root: 'wordset'
        }
    },
    listeners: {
        load: function () {
            Ext.dispatch({
                controller: myApp.controllers.general,
                action: 'setOfflineStore',
                data : this
            });
        }
    }
});

Carefully check load listener, I am calling a function of a controller where I will add all the data of online store to offline store. This is necessary because offline store can not load data directly with configuration like url. Following is the function in controller.


setOfflineStore: function (options) {
        var store = options.data;
        myApp.stores.offlineWordStore.proxy.clear();
       myApp.stores.offlineWordStore.removeAll();
        store.each(function (record) {
                var word = myApp.stores.offlineWordStore.add(record.data)[0];
        });

        myApp.stores.offlineWordStore.sync();
}

That's it and your offline store is ready to work. Now you have to load online store and it will populate data inside offline store.

myApp.stores.onlineWordStore.load();