Sencha Touch 2 : How to hide the Tab bar from Tab panel component

As requested by one of my reader, today we are going to see how we can hide tabbar from the tabpanel component. By setting setHidden(true) or setStyle('display:none'), it won't hide the tab bar.

First, lets create default tab panel with three tab bars (Tab1, Tab2, Tab3) with their respective configuration properties.

Access component DOM element in Sencha Touch 2 - Part1

In Sencha Touch 2, accessing DOM element for the components is really easy. You may ask? why i need to access DOM element. If you need to apply CSS styles, get the attributes for any HTML Tags and insert/modify HTML content for the existing HTML templates.

Let's take Ext.Component class for our demonstration purpose and we are going to see how to access DOM elements and modify CSS properties for html elements in Ext.Component class. Here is the Component class implementation with html configuration, followed by the browser output.

Add custom buttons for Message Box in Sencha Touch 2

Sencha Touch allows your application to your provide information to the users using alert(), confirm() and prompt() methods. Each methods differs with their features. But all these message boxes will display one or two buttons using the below configuration values.

Ext.MessageBox.OK: Display OK button.
Ext.MessageBox.CANCEL: Display Cancel button.
Ext.MessageBox.YES: Display Yes button.
Ext.MessageBox.NO: Display No button.

Various ways of creating component instance in Sencha Touch 2

In sencha touch 2, we can create instance for the component classes in various ways. Let's see each one with example

Option 1:

We can create instance for the sencha touch component classes using the constructor 'new' keyword, similar to creating objects in other Programming languages like (java, PHP). Let's see an example of creating Ext.Img class component instance using 'new' keyword.

Currency format utility method in Sencha Touch 2

In my project, i am looking for currency format function in Sencha Touch similar to Ext Js Ext.util.Format.currency method. But Sencha Touch doesn't support this currency format method by default. So with the help of Ext Js Code, i created my own currency format utility function for Sencha Touch.

How to access data from remote server API in Sencha Touch 2

Today, we are going to see how to access data from the remote server API using Sencha Touch 2. For our demonstration purpose, we are going to access weather report information using Local Weather API's from World Weather Online Site.

In order to access the weather reports using Local Weather API, you first need to create an account. After that, you need to create an application. By creating an application you will receive an API key. This API key needs to be passed as the request parameter in various Local Weather API's URL.

How to get all store records in Sencha Touch 2

In Sencha Touch 2, getData() method is used  to get all the model records instance from the store. Let's see the implementation with an example

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 generate unique numeric values for model field 'id' in Sencha Touch 2

In Sencha Touch 2, by default model field 'id' will be unique. but the generated unique id's will contains alpha numeric characters and dashes, but not numeric values. So we can't treat this field as the primary key.  Inorder to make 'id' field contains only numeric values, you need to configure the following properties in the Model Class.

How to make model field 'id' unique using Uuid identifier in Sencha Touch 2

In Sencha Touch 2, by default model field 'id' will be unique. but we can't ensure that unique id's will be generated. So we can't treat this field to be primary key.  Inorder to make 'id' field behave as a unique id, you need to configure the following properties in the Model Class.

Automatic browser refresh using LiveReload

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Getting Started:

Step 1: Get and install the app.

On a Mac:

• Download the latest version — Mavericks-friendly; provides an unlimited free trial and should recognize your Mac App Store license if you have one
• Purchase from the Mac App Store

On Windows:

• Download an alpha version  (browser refreshing; compilation into the same folder; evolving quickly)

Step 2: Add your project folder to LiveReload (via drag-n-drop or by clicking the “+” button).

Step 3: Depending on your workflow and personal preferences, either install browser extensions, or insert a JavaScript snippet, or use a framework-specific plugin. 

Now you should be all set. Open the site in your browser, change a file in your text editor and you should see the browser update. Change a stylesheet, and it should be applied live.

Click-to-call format detection in Mobile Phone browsers

In Mobile browsers (Safari, Opera, Chrome, IE etc) supports for 'click-to-call' number format detection  isn't that accurate. You will face  plenty of issues like invalid numbers get selected, like street addresses, ISBN numbers, and different types of numeric values that aren't phone numbers.

In order to avoid these kind of issues, it is necessary to add the following meta tag into the header section of your HTML page:

Book Review: Packt's Instant jQuery Boilerplate for Plugins by Jonathan Fielding

I have been reading Instant jQuery Boilerplate for Plugins book by Jonathan Fielding published by PACKT Publishing. Instant jQuery Boilerplate for Plugins is a guide to getting started with writing your first jQuery plugin using jQuery Boilerplate.

This book will explore the different options that the jQuery Boilerplate has to offer, and then go through several tutorials to get you comfortable with writing a plugin. I really enjoyed the way the author organized the chapters into projects by starting with Simple, followed by Intermeditate and finally ends with Advanced. One thing missing from my point  is the detailed explanations on these projects for begineers. I prefer this book for Intermediate and Advanced Plugin developers. My review for this book as follows.