Sunday 28 April 2013

Add Phone Number Input Text Field in Sencha Touch 2

 In Sencha Touch 2, Adding Text Field to the Form will be done by using Ext.field.Text. In my project, i suppose to add a Phone number field with input type as telephone number. I found the following code which will display telephone keyboard when you focus on the text field component.
Ext.define('MyApp.view.MyFormPanel', {

    extend: 'Ext.form.Panel',
    alias: 'widget.myformpanel',

    config: {
        items: [
            {
                xtype: 'textfield',
                component: {
                    xtype: 'input',
                    type: 'tel'
                },
                label: 'Phone Number',
                labelWidth: '45%'
            }
        ]
    }
});
Hope, you enjoyed this Post.

Thursday 25 April 2013

Navigation View in Sencha Touch 2 Explained - Part1

In Sencha Touch 2, Navigation View allows you to Push and Pop views into the application. Its basically an  container with a card layout, so only one view can be visible at a time.

 In addition to that, it also allows applying animation when you are doing push from current active view to the new view, or the previous view by using pop.

 Let me demonstrate this by providing an example. We will be creating a Navigation View Component which contains Header Section, Body Section and Footer Section. We are going to see how we can push or pop views into body Section by swipe.

Tuesday 23 April 2013

How to fire Custom Events with Parameters in Sencha Touch 2

In Sencha Touch 2, Every view components supports the various list of events like initialize,activiate, painted,  tap, show, hide and so on. In  addition to that, Sencha Touch also supports for adding custom events by using fireEvent() function. This function accepts the following parameters
  • event Name: The name of the event to fire
  • args: variable number of parameters are paased to the event handler
This function will returns boolean (true/false).

Let me demonstrate this feature with example, which display the Toolbar with login button. By clicking on the login button, we will fire the custom event for the toolbar view component . We are also going to see, how the fired custom event will be mapped with the handler function in the controller.

How to add Date Model Validation in Sencha Touch 2

In Sencha Touch 2, Models have strong support for validating its data. In Modal, Validation Configuration follows the same format as the Field Configuration. It expects the field name and type of validation. Following are the validation types available (as per Sencha documentation)

1) presence -  Ensures that the field has a value. Zero counts as a valid value but empty strings do not.

2) length  - Ensures that a string is between a minimum and maximum length. Both constraints are optional.

3) format - Ensures that a string matches a regular expression format. In the example above we ensure that the age field is four numbers followed by at least one letter.

4) inclusion - Ensures that a value is within a specific set of values (for example, ensuring gender is either male or female).

5) exclusion - Ensures that a value is not one of the specific set of values (for example, blacklisting usernames like 'admin').

6) email - Ensures that the filed value matches with the format of an email address.

Monday 22 April 2013

How to display DataView component in Table Format on Sencha Touch 2

In Sencha Touch 2, DataView component is used to display the set of same component many times. For examples in apps like these:
  • List of messages in an email app
  • Showing latest news/tweets
  • Tiled set of albums in an HTML5 music player
DataView uses store for fetching the data and render it using itemTpl configuration. Today, we are going to see, how we are going to display the DataView component in Table Format.

Saturday 20 April 2013

How to add Space between items in Sencha Touch 2

Ext.Spacer component is generally used to put space between items in Ext.Toolbar components. By Default, it uses flex configuration option as 1.

Let me demonstrate applying space between buttons on ToolBar Component in Various Ways.

Thursday 18 April 2013

Using Ripple Emulator for Mobile Web Development

Ripple is a web based mobile environment emulator designed to enable rapid development of mobile web applications for various web application frameworks, such as Sencha Touch, Phonegap/Cordova and BlackBerry WebWorks etc. It can be paired with current web based mobile development workflows to decrease time spent developing and testing on real devices and/or simulators.

Ripple is available as Plugin from Google Chrome that turns your chrome browser into the ultimate device emulator. Ripple supports the following features
  •  Platform & Storage Setting
  •  Device and Network Settings
  •  Geo-Location Settings
  •  Allows to Change the device orientation
  •  Allows to trigger the accelerometer readings across different axes
  •  Allows to simulate camera capture by emulating native app functionality as if your app had been packaged using PhoneGap

Wednesday 17 April 2013

How to dynamically add items to TabPanel on Sencha Touch 2

In Sencha Touch2, Tab Panels are a great way to allow the users to switch between several pages that are all in full screen. Each Component in the Tab Panel will have its own Tab, which get displays when tapped/clicked on the Tab Panel Icons. Tabs can be positioned at the top or the bottom of the Tab Panel, and can optionally accept title and icon configurations.

Today, we are going to see how we can dynamically add components to Tab Panels.

Define a Tab Panel

Let me define a Tab Panel with class name as 'MyTabPanel' which extends Ext.tab.Panel and alias is set to 'mytabpanel'.Using tabBar config, we are positioning the tab panel to display at bottom of the screen. defaults config property is used to set the common config properties that will share across all the pages in the Tab Panel.

Tuesday 16 April 2013

Add Event Listeners to View Component in controllers on Sencha Touch 2

In Sencha Touch 2, adding any event listeners to View Component is easy. Sencha Touch controllers, provides control configuration which is used to map a Controller functions that should be called whenever certain view Component events are fired. This view Component must be specified using ComponentQuery Selectors.

We are going to create a ToolBar component which contains a login button. Using ComponentQuery Selectors, we are going to see the various ways that sencha touch allows to attach 'tap' event to login button.

Friday 12 April 2013

How to display Panel popup on Button tap in Sencha Touch 2

Today, we are going to see how we can display panel popup when user click/tap on button. For this, sencha touch provides showBy() function, which is used to shows a component by another component. The Component will appear in a rounded blackbox with a tip pointing to a reference component.This method accepts the following parameters
  • component: The target component to show by.
  • alignment: The specific alignmnet(optional).

Thursday 11 April 2013

How to get records from store using getRange in Sencha Touch 2

Today, i came across a handy function getRange(), which will returns the array of records from the store. This method accepts the following parameters.
  • startIndex : The starting index (Default to 0)
  • endIndex : The ending index (Default to the last Record in the Store).
Let me demonstrate this by providing examples  in various ways

Wednesday 10 April 2013

How to copy records from one Store to another in Sencha Touch 2

Today, we are going to see how we can copy records from one store to another. You may came across a situation, where you need to create a new store which contains the records from the existing store and in addition to that, you need to add one or more new records.

In that Scenario, let's demonstrate this with an example, which will copy the existing store records and add one new record. Then, we will merge both the existing records and the new one using Ext.Merge.object() and finally add it to the new Store.

How to set Local Library Path in Sencha Architect 2

For any Sencha Touch Projects, app.html/index.html acts as a entry point for your application. This html file will load the required Sencha Touch library files (sencha-touch-all.js, sencha-touch.css) from the internet. If you don't have internet connection or your internet connection lost, loading these library files will fails. This will impact your development.

Today we are going to see, how we can move these two Sencha Touch library files locally into the project folder.

How to validate date and time in Sencha Touch 2

Sencha Touch 2 provides lot of utility methods for managing date and time information using Ext.DateExtras Object. Ext.DateExtras class will not be included by default in Sencha Touch 2 Application. You need to add this class as the requires in which you wish to use them (Either Controller or Application). Inorder to use Ext.DateExtras, you need to use Ext.Date Object.

We are going to use isValid() function for validating date using the passed values. This might be handy when you are checking user input date in form. This method accepts the following parameters

Tuesday 9 April 2013

How to access view component inside controller in Sencha Touch 2

In order to access the view component inside controllers, sencha touch 2 provides refs config property. refs makes it easy to get reference of view component available in the page using collection of named ComponentQuery selectors.

Let's demonstrate this by creating a Panel Component and access the panel component in controller using different ways.

Monday 8 April 2013

How to show Alert Dialog Box in Sencha Touch 2

Displaying alert dialog box in Sencha Touch 2 is very easy. Today we are going to see how to display alert dialog box with 1 button('ok' button), 2 buttons ('Yes' and 'No'), 3 buttons ('Yes','No','Cancel').

Ext.Msg.show() function is used to displays the alert dialog with a specified configuration. All display functions (e.g. prompt, alert, confirm) on Ext.Msg Object call this function internally, although those calls are basic shortcuts and do not support all of the config options allowed here.

Sunday 7 April 2013

How to Parse Nested XML using Sencha Touch 2 - Part2

This Post is the continuation of where we left in Part1, If you haven't read, Please read first and continue reading this Post.

Define a Store

Now, Let's define a Store with Class name 'IssueStores' and storeId configuration as 'issuestores'. This Store will load the 'data.Issue.xml' file (defined in part1) configured in url config using Ajax Proxy config. This Ajax Proxy configuration also contains reader config which will read Nested XML using the rootProperty and record property configuration.

How to Parse Nested XML using Sencha Touch 2 - Part1

Sencha Touch 2 supports Parsing Nested XML using associations (hasMany, belongsTo). XML is used to exchange data between client Browser and Server.  Today, we will take the below Nested XML as our reference as parse it using Sencha Touch 2. Save the below XML content in file as 'Issue.xml' under data folder inside Project root folder.

Friday 5 April 2013

How to format date and time in Sencha Touch 2

Sencha Touch 2 provides lot of utility methods for managing date and time information using Ext.DateExtras Object. Ext.DateExtras class will not be included by default in Sencha Touch 2 Application. You need to add this class as the requires in which you wish to use them (Either Controller or Application). Inorder to use Ext.DateExtras, you need to use Ext.Date Object.

We are going to use format() function for fomating current date and time in various ways. This method accepts date and format as parameters and returns the formatted date string.

Documenting Sencha Touch 2 Application using JSDuck

Documentation plays an important role for any project, especially if you are working on big projects and if you want revisit the code that you wrote long back, document will helps you to understand your code. Also if any new developers join the team, this documentation helps them to grasp the code logic.

 JSDuck is an open source ExtJS 4 project developed by Sencha Team to help Javascript developers generate beautiful documentation viewable in a web browser. Based on JavaDoc, JSDuck parses documentation embedded in the source files of your project and generate HTML Files.

Convert Array to String in Sencha Touch 2

Today, we are going to see how we can convert array elements into String. Sencha Touch 2 provides join() which will join all the array elements into string using the supplied separator. This function accept separator as the only parameter and returns string.

 var arrayValues = [
  'Sencha Touch Supported Platform:',
  'IOS',
  'Android',
  'Blackberry',
  'Windows Phone 8'
 ];

 var output = arrayValues.join('<br/>');
 console.log(output);

  Output:   
  Sencha Touch Supported Platform:<br/>IOS<br/>Android<br/>Blackberry<br/>Windows Phone 8
 
 Important Note: if separator parameter not supplied, it will use the default seprator ','.

 Hope, you enjoyed this Post.

Thursday 4 April 2013

Remove Duplicate Values from Array in Sencha Touch 2

 Ext.Array.unique() is used to remove the duplicate (repeated values) from array. This method accept array as the parameter and returns new array with unique values.
 var arrayValues = [123,456,123,'whatever','test','whatever'];
 var uniqueArray = Ext.Array.unique(arrayValues);
 console.log(uniqueArray);
 Output : uniqueArray will print the following values [123,456,'whatever','test']

 Hope, you enjoyed this Post.

Wednesday 3 April 2013

Encode and Decode JSON Object using Sencha Touch 2

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is used primarily to transmit data between a server and web application, serving as an alternative to XML. Today, we are going to see how we can encode and decode Objects in Sencha Touch 2

Encode JSON Object

Ext.JSON.encode() is used to Encodes an Object, Array or other values. It accepts Object (the value to encode) as the parameter and returns JSON String.

Pass data from view to controller using fireEvent in Sencha Touch 2

This Post is the continuation of Create a Basic Form Post. If you haven't read it, please read first. Today, We are going to see how to pass form data from view to controller using fireEvent().

 Sencha Touch 2 application follows MVC architecture, so application logic needs to be added inside controller and only display logic and event attachment needs to be added inside views.

 First, let's add an Event listener to the 'Save' button using listeners property.

Tuesday 2 April 2013

How to create a basic form using Sencha Touch 2 - Part1

HTML Forms plays an important role in Web application. It adds user interactivity to the application and allows to collect user information. Data Flow between client browser and the server is done using HTML Forms.

Sencha Touch has a strong support for HTML Form and it provides various input fields like (Text, Email, Url and so on). Today, Let's see how to design a basic form using Sencha Touch 2

Monday 1 April 2013

How to define global functions in Sencha Touch 2

We have already seen how to declare global variables in Sencha Touch 2. Today, we are going to see how to define global functions in Sencha Touch 2. Before that, why you need a global functions.

Global functions are defined once and access it anywhere in your application. If you need to modify it, you need to modify it in one place instead of modifying more places of your application.

Sencha Touch Javascript Cache Issue in Google Chrome

You may came across a situtation, where cached version of your Sencha Touch javascript pages  are getting displayed in Google Chrome, You need to press 'CTRL+F5' two to three times in order to display the latest version of your pages.

By default, In  Google Chrome  'Enable Cache' Setting will be turn On which will cache your pages. We need to disable this setting in order to avoid this issue. We are going to see, how we can disable Cache Settings in Google Chrome.