Win a Free eBook copy : Sencha Architect App Development

I wrote a Book Review on Sencha Architect App Development by Loiane Groner in my Blog post.
The author is happy with my review and gave me 3 eBook copies which i like to give to my readers through Contest.

The three Winners will get the free eBook through the email. The Contest End Date is 31st  July 2013. If you need to win this free eBook. Following are the things you need to do

1) Subscribe to my Newsletter by visiting my Blog.

2) I would be happy, if you add me @sureshdotariya to your Twitter Account, Google Plus Account

3) I would be happy, if you share any of my blog post to your Facebook Account.

4) Tell me, why you need this free eBook through the comment form.

Hurry up, the contest ends by 31st July 2013 and winners will be announced on 1st August 2013 here. The Winners will receive the free eBook download link through the email.

Congrats to all the participants.

**Contest is Closed**

Book Review: Sencha Architect App Development By Loiane Groner

I have been reading Sencha Architect App Development book by Loiane Groner. This book is published by PACKT Publishing. I really enjoyed by reading this Book and i have learned lot of new and interesting things about Sencha Architect tool and we can develop rich HTML5 native Ext JS and Sencha Touch App Using Sencha Architect. This book contains 120 pages and my review for this book as follows.

Display Panel data on list item tap in Sencha Touch 2

As requested by one of my reader, they need to display the list and panel component in HBox layout. By tapping on any items in the list, their corresponding data needs to be displayed in the panel component in Sencha Touch 2. Let's see the implementation

How to add FB Like button to Sencha Touch

Today, we are going to see how to integrate facebook like button to the panel component in the Sencha touch 2. Facebook likes button is used to share the content to the facebook. Let's see the demonstration with the working example

How to fire an Application level events in Sencha Touch 2

Today, we are going to see how we can fire an application level events that any controllers in the Sencha Touch application can listen on it. Let's see the demontration with the working example

First, let's add the application level events code using fireevent() method, which will fire application level event with name 'globalevent'.

MyApp.app.fireEvent('globalevent');

This above code follows the following format {<application name>.<app folder name>.fireEvent(<global EventName>)}.

How to get Single record from Store in Sencha Touch 2

Today, we are going to see how to get single record from the Store in Sencha Touch 2.

Create a Model

First, let's create a model class with name UserModel with these fields Name, DateOfBirth and Age.

Ext.define('MyApp.model.UserModel', {
    extend: 'Ext.data.Model',
    alias: 'model.UserModel',

    config: {

        fields: [{
            name: 'Name',
            type: 'string'
        }, {
            name: 'DateOfBirth',
            type: 'string'
        }, {
            name: 'Age',
            type: 'string'
        }]
    }
});

How to detect the internet connection in Sencha Touch 2

Today we are going to see how to detect the mobile device is connected to internet or not in Sencha Touch 2. We are going to use Ext.device.Connection class that contains isOnline() method, which is used to check if the current device is currently online or not.  This method will return true, if you are currently online otherwise return false.

Advanced Layout Design in Sencha Touch 2 - Part3

Today, we are going to see how to design a more complex layout using hbox, vbox layouts in Sencha Touch 2. Here is the snapshot of the layout design

How to get child item reference in a container on Sencha Touch 2

My previous post explains how to get all the inner (child) elements in the container. Today, we are going to see how to get reference of the child items in the container using query() method.

This query() method will be used to get the reference of the child items present at any level in the parent tree.

how to get all child items in container on Sencha Touch 2

In my project, there came a situation to get all the child items in a container. After searching Sencha API documentation, I found the getInnerItems() method which i like to share here.

This method will returns all the inner items of a container. inner means that the item is not docked or floating.

Add Validation to form fields blur event in Sencha Touch

As requested by one of my reader, Today we are going to see how to add validation to form fields using blur event in Sencha Touch 2. For demonstration, we will be creating a form panel with two fields Username and Password and attach blur event to the two fields using the listeners configuration in order to do validation. Let's see the implementation

Select dropdown with dynamic values in Sencha Touch 2

Today, we are going to see how to display drop down field with dynamic Time Zone values in Sencha Touch 2.

Create a Time Zone Model

First, let's create a Time Zone model with two fields name and value using fields configuration.

Ext.define('MyApp.model.TimeZoneModel', {
    extend: 'Ext.data.Model',
    alias: 'model.TimeZoneModel',

    config: {
        fields: [{
            name: 'name',
            type: 'string'
        }, {
            name: 'value',
            type: 'string'
        }]
    }
});

Create a Time Zone Store

Now, we are going to create a Time Zone Store and associate the above model to the store using model Configuration. Then, we are going to assign static time zone array data using data configuration. you can also load this time zone array data from json file using store reader configuration.

Ext.define('MyApp.store.TimeZoneStore', {
    extend: 'Ext.data.Store',
    alias: 'store.TimeZoneStore',

    requires: [
        'MyApp.model.TimeZoneModel'
    ],

    config: {
        autoLoad: true,

        data: [{
            name: '--Please Select--',
            value: ''
        }, {
            name: 'America Chicago',
            value: 'America/Chicago'
        }, {
            name: 'America Jamaica',
            value: 'America/Jamaica'
        }, {
            name: 'America Mexico City',
            value: 'America/Mexico_City'
        }, {
            name: 'America New York',
            value: 'America/New_York'
        }, {
            name: 'America Panama',
            value: 'America/Panama'
        }, {
            name: 'America Port of Spain',
            value: 'America/Port_of_Spain'
        }, {
            name: 'America Los Angeles',
            value: 'America/Los_Angeles'
        }, {
            name: 'America Guyana',
            value: 'America/Guyana'
        }],

        model: 'MyApp.model.TimeZoneModel',
        storeId: 'TimeZoneStore'
    }
});

Create Select drop down field

Now, we are going to assign the above store to the Select drop down field using store configuration. displayField configuration will be mapped to the model field name and valueField configuration will be mapped to the model field value.

Ext.define('MyApp.view.FormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.FormPanel',

    config: {
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: 'Dynamic Select Demo'
        }, {
            xtype: 'selectfield',
            label: 'Select Time Zone',
            labelWrap: true,
            required: true,
            displayField: 'name',
            valueField: 'value',
            store: 'TimeZoneStore'
        }]
    }
});

Following is the output, when i run the above code in Google Chrome

Hope, you enjoyed this Post.

Add Search Field to Toolbar in Sencha Touch 2

Today, we are going to see how we can add search field to toolbar in Sencha Touch 2. In any Web and Mobile App, Search box plays an important role to find/search the information in the application very quickly and easily.

Let me demonstrate this by providing an example, by which search text will be shown as an alert message when search icon is clicked.