Saturday, 28 December 2013

Split string into array using regular expression in PHP

Today, i came across a handy PHP function which will convert the string in to array based on regular expression. i.e preg_split().

Implementation:
$test = "Hi, my blog name sureshdotariya";

$result = preg_split('/[\s,]+/',$test,-1,PREG_SPLIT_NO_EMPTY);

Wednesday, 25 December 2013

Implement Flash Messages using Session in PHP - Part1

As part of the post series, today we are going to see how we can implement Flash Messages using PHP Session. Before proceeding into that, first i  like to explain what is Flash Message and its usage.

What is Flash Message

Flash message is a message that will be shown/displayed only once. if you reload the browser or navigated to other pages and came back, you won't see the same message displayed again.

Sunday, 22 December 2013

How to get MIME type for the file in PHP

Today, we are going to see how to get MIME Type for the file in PHP.  In order to get the MIME Type we will use mime_content_type() methods, but this method has been deprecated. so instead we are going to use Fileinfo. Let's see the implementation.

Saturday, 21 December 2013

How to get the file extension and other information about file path in PHP

Today, we are going to see how to get the file extension and other information about file path in PHP. In order to get file extension from file path, PHP developers usually use strpos() to get the position of '.' and then by using substr() with dot position to get the file extension.

You can also use the below approach to get the file extension with minimal code.

Wednesday, 18 December 2013

Packt’s $5 eBook Bonanza is back!

Following on from the success of last year’s festive offer, the publisher will be celebrating the holiday season with an even bigger $5 Bonanza.

From December 19th, customers will be able to get any eBook or Video from Packt for just $5. This sale covers every title in the 1700+ range and customers can grab as many as they like until January 3rd 2014 – more information is available at http://bit.ly/1jdCr2W.

Saturday, 7 December 2013

Sencha Touch 2: How to automatically pre-populate form values in Tab Panel Component

As requested by one of my reader, today we are going to see how to automatically pre-populate form element values from one Tab to another Tab in Tab Panel component. If you are still not sure, please refer to the below Tab Panel snapshot images.

Sunday, 1 December 2013

Win A Free Copy of Packt's ‘Mobile Security: how to Secure, Privatize, and Recover Your Device’ !

We are pleased to announce that we are organizing a giveaway especially for you. All you need to do is just comment below the post and win a free copy of ‘Mobile Security: how to Secure, Privatize, and Recover Your Device’. Three lucky winners stand a chance to win copy of the book. Keep reading to find out how you can be one of the Lucky One.

Packt celebrates Thanksgiving with a week of bespoke special offers

Thanks…for the means we have of acquiring and diffusing useful knowledge.’ George Washington said this as part of the very first Thanksgiving presidential proclamation back in 1789 – and today in 2013, Packt recognizes its mission to IT professionals in those words. So to celebrate this Thanksgiving, from November 28th across a wide range of technology areas.

These offers will include up to 68% off carefully selected bundles of eBooks, savings of over $100 on a set of video courses, as well as deep discounts on Packt’s latest and bestselling titles – covering the latest in Web Development, Big Data, Games Development, and much more.

The whole range of offers will be available to explore at www.packtpub.com until December 6th.

Monday, 25 November 2013

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.

Wednesday, 20 November 2013

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.

Tuesday, 19 November 2013

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.

Sunday, 17 November 2013

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.

Friday, 15 November 2013

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.

Tuesday, 12 November 2013

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'
        }]
    }
});

Monday, 11 November 2013

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.

Friday, 8 November 2013

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:
On Windows:
    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.

    Wednesday, 6 November 2013

    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:

    Sunday, 3 November 2013

    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.

    Friday, 25 October 2013

    How to display form fields inline in Sencha Touch 2

    As requested by one of my reader, Today we are going to see how to display form fields inline (display in a single line). Similar to the below snapshot.


    Tuesday, 15 October 2013

    Packt Publishing: All eBooks and Videos at 50% off this Columbus Day

    Packt Publishing is giving everyone the chance to explore its full range of over 1600 DRM-free eBooks this Columbus Day at a massive 50% off at www.packtpub.com, for 4 whole days. Customers simply use the code COL50 in their cart – as many times as they like until Thursday October 17th. The offer even extends to Packt’s bestselling pre-order of 2013, the highly acclaimed Mastering Web Application Development with AngularJS.

    Friday, 11 October 2013

    Book Review: Sencha Touch Cookbook Second Edition by Ajit Singh

    I have been reading Sencha Touch Cookbook Second Edition book by Ajit Kumar. This book is published by PACKT Publishing and contains over 100 hands-on recipes to help you understand the Sencha Touch framework and solve your day to day problems. This book contains ten chapters with 390 pages and my review for this book as follows.

    Thursday, 10 October 2013

    Sencha Touch 2: How to extend model classes

    Today, we are going to see how to extend from one model class to another model class in Sencha Touch 2. Sencha Touch follows object oriented methodology in which you can access the properties and method from one class to another class.

    For Example, we will be having Contact class as our parent class with configuration fields  name, email, address etc . Following is the Contact Model Class implementation

    Tuesday, 8 October 2013

    Sencha Touch 2 : Manipulate model object by creating model methods

    Today, we are going to see how to manipulate model objects by creating model methods. I came across a situation where i need to combine user firstName and lastName and display in the User Profile Page.

    My Goal is, Instead of having string concatenation code duplicate in each and every  JS file. I thought of adding an utility method which will return the concatenated firstName and lastName. But why we need to have an utility method which does only string concatenation and also we need to pass firstName and lastName as parameters. How to achieve this Here is the solution.

    Monday, 30 September 2013

    Sencha Touch : How to add Toggle input form field

    Sencha Touch 2 supports different form input fields like Text, TextArea, CheckBox, Radio etc.. which are used to create a form. Today we are going to see how to add a Toggle field into the Sencha Touch form. This Toggle input field will supports two values. This field is used when you want users to input one value from the available two values. These values may be 0 (or) 1 and ON (or) OFF etc.

    Wednesday, 25 September 2013

    Win A Free Copy of Packt's “Android Development Tools for Eclipse”

    We are pleased to announce that we are organizing a giveaway especially for you. All you need to do is just comment below the post and win a free copy of Android Development Tools for Eclipse. Two lucky winners stand a chance to win copy of the book. Keep reading to find out how you can be one of the Lucky One.

    Monday, 23 September 2013

    Sencha Touch 2: Add spinner field with increment/decrement value

    As requested by one of my reader, today we are going to see how to add Spinner form field (Ext.field.Spinner) in Sencha Touch 2. Also we are going to see how to apply increment/decrement values by clicking '+' and '-' icons in the Spinner Fields.

    Wednesday, 18 September 2013

    PHP: Generate Cross Site Request Forgery Token (CSRF)

    Today, we are going to see how to generate CSRF Token Which is used to prevent the invalid access to the web application using $_GET and $_POST Requests in PHP.  Here is the PHP Code which will generate unique token of size 32 charcters hexadecimal number.

    Saturday, 14 September 2013

    Book Review: Android Development Tools for Eclipse by Sanjay Shah, Khirulnizam, Abd Rahman

    I have been reading Android Development Tools for Eclipse book by Sanjay Shah, Khirulnizam, Abd Rahman. This book is published by PACKT Publishing. I really enjoyed reading this Book and i have learned lot of new and interesting things about Android development platform using Eclipse IDE and various steps in order to package, signing and distribute the android application (APK) into the Google Play App Store . This book contains eight chapters with 150 pages and my review for this book as follows.

    Friday, 13 September 2013

    Twitter Bootstrap 3: How to create a Registration form

    Today we are going to see how to create a Basic Registration form using Twitter Bootstrap 3. If you don't have idea about Twitter Bootstrap. please read my previous post. We are going to create a registration form using HTML5 form elements and with the help of bootstrap CSS classes, we will make the registration form a responsive one.

    Monday, 9 September 2013

    Design responsive web sites using CSS3 Media Queries and HTML5

    Today, we are going to see how to apply CSS Styles based on your access device resolution and size. I hope you have already heard about Responsive Web Design. let me explain what it is?.

    Responsive web design  is used to design websites for different access device resolution and size. Yourweb site will be accessed by desktop, tablets, smart phone devices (Android, IOS) etc.  Each device will have a different screen size. If your website needs to adapt for all those device sizes and  have good look and feel, you need to design your sites to be responsive using Responsive Web Design.

    Saturday, 7 September 2013

    Responsive Web: About flexible image in HTML and CSS

    Today, i am developing a responsive design website using HTML5 and CSS3. I came across a problem i.e image display is exceeding the width and height of the parent element container. Let me explain with an example

    <div style="width: 15%">
        <img src= "myimage.jpg"/>
    </div>

    image (myimage.jpg) is of size 350x480 pixels, Following is the output

    Wednesday, 4 September 2013

    Twitter Bootstrap 3: Create Web Page with logo and navigation bar

    Today we are going to see how to create an header section of an HTML5 webpage that contains Logo, Search Box and Navaigation Menu using Twitter Bootstrap framework.  Below you will find the final output followed by HTML Code


    Create an HTML5 webpage using the Twitter Bootstrap 3

    For past few weeks, I started working on Twitter Bootstrap CSS Framework. I am really impressed on this framework and i like to add some post on this. Today we are going to see what is Twitter Bootstrap and how to create a basic web page in Twitter Bootstrap 3.

    What is Twitter Bootstrap:

    Twitter Bootstrap is a CSS Framework that is used to design web pages including Responsive designs web pages using HTML5, CSS and Javascript. You don't require any prior design knowledge in order to use this framework. It is one of the easiest CSS framework available in the industry today. Twitter Bootstrap has already written the CSS styles for you, has inbuilt jQuery support and also has some popular JavaScript tools like transitions, popup etc. You just need to include the corresponding CSS classes in the HTML tags based on your requirement.

    Tuesday, 27 August 2013

    Sencha Touch: How to display images in Carousel full screen

    As requested by one of my readers, today we are going to see how to display images in the carousel full screen on Sencha Touch 2.  Here is the code followed by explanation

    Monday, 26 August 2013

    Advanced CSRF Token PHP Generation Class

    Today, I am going to share the CSRF (Cross Site Request Forgery ) PHP Generation Class, Which is used to prevent the invalid access to the web application using $_GET and $_POST Requests. Here is the PHP Code

    Tuesday, 20 August 2013

    How to animate components in Sencha Touch 2

    Today, We are going to see How to animate components in Sencha Touch 2 using Ext.Anim Class. In Ext.Anim Class, method run() is used to execute animation on the Sencha Touch Components using the animation properties and types defined inside Ext.anims class.

    Let's see the demonstration, We are going to add Slide animation effect to the component element while the component is rendered in the browser. Event Show will be triggered when the component is rendered into the browser.

    Saturday, 17 August 2013

    Added New Page: Sencha Touch and Ext JS Books

    I added a new page which will contains the list of books from Sencha Touch, Ext JS and Sencha Architect. The purpose of this page is to have all the books list from Sencha Touch and Ext JS in one place. 

    http://sureshdotariya.blogspot.in/p/books.html

    Hope, you enjoyed this Page.

    Thursday, 15 August 2013

    Create Workspace using Sencha Cmd and its Usage

    As we already know that we can create Single page  and Multi Page mobile Web Application using Sencha Cmd.

    Single Page Application:

    A Single Page Application (Sencha Touch App) will contain an Ext.Application class (app.js). Based on some events (tab, mousestart, keyup, initialize etc) we will be attaching other js files inside app.js and rendered into the browser.

    Multi Page Application:

    In Multi Page Application, we will have multiple pages. Here multiple pages can refer as Sencha Touch and Ext JS Application. With the help of Workspace, we can  categorize the multi page application. Now, we are going to see the workspace and its usage.

    Sencha Touch: Modify Search Field Icon Color

    As requested by one of my reader, today we are going to see how to change the color of the MAGNIFYING GLASS icon in the Search Field on Sencha Touch 2 (using CSS property).

    By default, this is how the look and feel of the Search Field Icon


    .x-field-search .x-field-input:before {
              background-color: #000 !important;
    }
    

    Above CSS Code, will make the MAGNIFYING GLASS icon color to Black.


    Hope, you enjoyed this Post.

    Saturday, 10 August 2013

    Added new page: Sencha Touch book example codes

    I added a new page which will contains the chapter codes from the available Sencha Touch books, This page will display the chapter codes with download links from the Sencha Touch Books. 

    This page will be useful for those who is looking for some real working examples from Sencha Touch World.

    http://sureshdotariya.blogspot.in/p/sencha-touch-ext-js-books.html

    Hope, you enjoyed this Page.

    Saturday, 3 August 2013

    Dynamic Select drop down with Store in Sencha Touch 2

    Today Post, we are going to see how to make select drop down field dynamic with store in Sencha Touch 2. We are going to display two drop down fields 'Country' and 'State'. By selecting Country drop down, their corresponding States will be dynamically updated in the State Drop down.

    Form Panel:

    First, we are going to create a FormPanel Class with Toolbar and two select drop down fields Country and State and their corresponding configuration settings.

    Then, we are attaching onchange event using the listeners configuration, which will trigger onCountryChange method when Country is selected in Country drop down.

    Friday, 2 August 2013

    Winner: Sencha Architect App Development free eBook Contest

    I am really very happy that i got a good response for my Free eBook Contest. It's time to announce the Contest Winners. Following are those

    1) Surhid Amatya

    2) Agente Sun

    3) wiky

    I congragulate to the Winners and they will receive the "Sencha Architect App Development" eBook download link  via email.

    To those who are not in the Winners list, Sorry I have only limited copy of free eBooks. If i have more copies, I should have given to all the participants.

    Agente Sun, Wiky please  provide your email address in order to send the eBook download link. I don't have your email address with me. 

    Thanks to all.
    Suresh Kumar A

    Tuesday, 23 July 2013

    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**

    Sunday, 21 July 2013

    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

    Saturday, 20 July 2013

    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

    Saturday, 13 July 2013

    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>)}.

    Thursday, 11 July 2013

    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'
            }]
        }
    });

    Wednesday, 10 July 2013

    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.

    Monday, 8 July 2013

    Advanced Layout Design in Sencha Touch 2 - Part3

    Today, we are going to see how to design a more complex layout using hboxvbox 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.

    Saturday, 6 July 2013

    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.

    Thursday, 4 July 2013

    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

    Wednesday, 3 July 2013

    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.

    Monday, 1 July 2013

    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.

    Saturday, 29 June 2013

    Advanced Layout Design in Sencha Touch 2 - Part2

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

    Friday, 28 June 2013

    Add Jquery Word Counter Plugin to JEditable Textarea Field Type

    Today, we are going to see how we can add Jquery Word Counter Plugin into Textarea Field Type in JEditable Library. If you are new to JEditable Plugin Library, please read this introduction post and proceed furthur. Following are those integration steps that you need to follow

    Step 1:
    Add the following JQuery Library file inside <head> Tag in HTML Page
    https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
    
    
    Step 2:
    Download the JQuery Word Counter Plugin file from here and include the jQuery.textareaCounter.min.js file inside <head> Tag in HTML Page

    Wednesday, 26 June 2013

    Advanced Layout Design in Sencha Touch 2 - Part1

    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








    Tuesday, 25 June 2013

    Add Video Component in Sencha Touch

    Today, we are going to see how to add Ext.Video component in the Sencha Touch. This component provides a simple Container for HTML5 Video.This component is used to play video (H.264 format, .mov file format etc) in the mobile web apps. Let us see the important configuration properties available in Ext.Video class.

    url: Location url of the video to play.
    autoResume: Will automatically start playing the media when the container is activated.
    autoPause: Will automatically pause the media when the container is deactivated.
    loop: Will loop the media forever.
    volume: The volume of the media from 0.0 to 1.0.
    posterUrl: Location of a poster image to be shown before showing the video.
    width: The width of the media.
    height: The height of the media.

    Saturday, 22 June 2013

    Add DatePicker Field to Sencha Touch

    Today, we are going to see how to add DatePicker Field in the Sencha Touch. This component will be useful where you need user to select Data in the HTML Form i.e Date Of Birth field.
    When you tap on the field, DatePicker will be displayed which will allow to select date. Let us see the important configuration properties available in DatePicker class.

    yearFrom: The Start Year for the Date Picker.
    yearTo: The End Year for the Date Picker.
    slotOrder: An Array of Strings that specifies the order of the slots
    useTitles: Generate a title header for each individual slot and use the title configuration of the slot.
    value: Specfies the default value for the field. Accepts an object of 'year', 'month' and 'day' values.
    yearText: The label to show for the year column.
    monthText: The label to show for the month column.
    dayText: The label to show for the month column.

    Call a Function after specific duration in Sencha Touch 2

    Today, i am going to explain the important method available in sencha touch 2, i.e Ext.defer()
    This method will execute the function after the number of milliseconds specified. It accepts these below parameters
    • fn : The function to execute.
    • millis : The number of milliseconds after the function will execute. If less than or equal to 0 the function is executed immediately.
    • scope (optional) : scope of the function. If omitted, defaults to the browser window.
    • args (optional): Overrides arguments for the call. Defaults to the arguments passed by the caller.
    • appendArgs (optional): if true, args are appended to call args instead of overriding, if a number the args are inserted at the specified position.

    Thursday, 20 June 2013

    TimeZone conversion using DateTime Class in PHP

    Today, we are going to see, how to convert date and time from one TimeZone to another TimeZone in PHP. Before that. let me ask you the question. Why do you need to do this?

    Let's say, you are developing a web application that will be accessed by globally. In your web application, users will be logged using the login page. In Home Page, you will be displaying the user Last Login Date and Time. User will be more comfortable to see the last login date and time in their timezone instead of server default timezone where it is located.

    Add Select with Optgroup type in JEditable Plugin library

    If you are new to JEditable Plugin Library, please read this introduction post and proceed furthur.

    By default, JQuery JEditable Plugin library doesn't support select with optgroup field type. But it will support Text, Select, Textarea types. In order to make jEditable library supports select with optgroup field type. You need to make these following changes

    Saturday, 15 June 2013

    Top five String method that helps in your Sencha Touch 2 Apps

    Today, i am going to list you the top five most widely used String methods available in Sencha Touch 2. Following are those.

    1) eclipsis

        This method will truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length.

    It accepts the following parameters
        string : The string to truncate.
        length : The maximum length to allow before truncating.
        word :   true to try to find a common word break.

    Saturday, 8 June 2013

    How to specify optional or dynamic root element in JSON reader

    Problem:
    In Ext JS4, proxy reader will allow to specify root element property for your response (JSON, XML etc) in order to parse the response data. There will be a situation, where your response data doesn't contain root element (or) the root element will vary for each request of same model/store.

    Solution:
    We can achieve this by specifying a custom property in model/store proxy config and handle this property by overriding Ext.data.reader.Json class.

    Thursday, 6 June 2013

    How to set default date to Model Date Field in Sencha Touch 2

    In Sencha Touch 2, Model class supports different field types ( auto, int, string, boolean, date etc).  Today we are going to see how we can set the current data and time as default Value to the Model date field. Following is the implementation
    Ext.define('MyApp.model.FormModel', {
        extend: 'Ext.data.Model',
        alias: 'model.formmodel',
    
        config: {
            fields: [
                {
                    dateFormat: 'Y-m-d H:i:s',
                    defaultValue: new Date(),
                    name: 'createdDate',
                    type: 'date'
                }
            ]
        }
    });

    You can also set date while creating Model instance using Ext.create(). Here is the code

    var formModel = Ext.create('MyApp.model.FormModel',{
        createdDate: new Date()
    });

    Hope, you enjoyed this Post.

    Tuesday, 4 June 2013

    How to dynamically add fields to the Form in Sencha Touch 2 - Part3

    In Part3 of this Post Series, we are going to see how we can store the different fields into browser local storage using HTML5 Local Storage API and display the fields from the local storage. If you haven't read the following previous post. Please read first and proceed furthur.

    How to dynamically add fields to the Form in Sencha Touch 2 - Part1
    How to dynamically add fields to the Form in Sencha Touch 2 - Part2

    Add Form Fields into Local Storage

    I am going to create the FormModel instance with hardcoded field values for the various fields (TextField, PasswordField, EmailField, SelectField and RadioField) using Ext.create(). Then, I am adding all the FormModel instance into the store using add(). Finally sync() is used to sync the store record into Browser Local Storage.

    Monday, 3 June 2013

    How to dynamically add fields to the Form in Sencha Touch 2 - Part2

    In Part2 of this Post series, we are going to see creation of Model Class and store inorder to display the form fields from LocalStorage. If you haven't read Part1 of this Post series, please read that one.

    Inorder to save the data in the Local Storage Using HTML5 LocalStorage API, we need to have a Model Class with fields and Store.

    Create a Model View Class

    First, we are going to create fields in the Model Class based on different field types present in the FormPanel Class in Part1 of this Post. Following is the FormPanel Class Code for your reference.

    How to dynamically add fields to the Form in Sencha Touch 2 - Part1

    As requested by one of my reader, today we are going to see how we can dynamically add fields to the Form Panel.  The Fields will be TextField, SelectField, EmailField and radioField. Now, we will see the implementation.

    Create a Form Panel View

    First, we are going to create a FormPanel class with name MyFormPanel and config property id and itemId with value myformpanel.

    Saturday, 1 June 2013

    How to create Utility Class in Sencha Touch 2

    Today, we are going to see how we can create a utility class in Sencha Touch 2. Before that, let me ask you the question. Why you need a utility class for Sencha Touch  Apps.

    1) In Utility Class, you can add application specific configuration settings like baseUrl, animationDuration, animationType (slide, fade etc).

    2) In Utility Class, you can add common methods that will be accessed by all Sencha app js files.

    By maintaining above information in the Utility Class, in case if you need to modify baseUrl or modify code in the utility method. You just need to modify in one place instead of searching and modifying in all Sencha app js files.

    Thursday, 30 May 2013

    How to encode and decode form data in PHP

    First, let me ask you the question. Why you need to encode and decode form data.

    1) When you are submitting form data to other PHP file using GET Request, form values will be displayed in the browser URL.

    2) When you are submitting form data to other PHP file using POST Request, form values will be
    viewed using Firebug in Firefox, Chrome Developer Tools in Chrome and IE Developer Tools.

    3) If you are performing any credit card transactions in e-commerce site and submitting credit card details to the Payment gateway server using Form.

    Tuesday, 28 May 2013

    How to implement Add/Edit Feature in single form using Sencha Touch 2

    In Part 4 of this Post Series, we are going to see how we can use single Sencha Touch form for both add and edit feature. If you are new to this Post Series, Please read the previous post. Following are those
    • Part 1 - How to create a basic form using Sencha Touch 2.
    • Part 2 - Apply Model Validation to the Form using Sencha Touch 2.
    • Part3 - Save Form data locally using local storage in Sencha Touch 2.

    Monday, 27 May 2013

    Jeditable - Edit In Place Plugin For jQuery

    Today, i came across a Jquery Plugin Jeditable which allow you to click and edit the content of different html elements

    This is How it works

    Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again. For Live Demo, Please click here.

    Sunday, 26 May 2013

    Book Review: Creating Mobile Apps With Sencha Touch 2

    I have been reading Creating Mobile Apps with Sencha Touch 2 book by John Earl Clark and Bryan P. Johnson. This book is published by PACKT Publishing. I really enjoyed by reading this Book and i have learned lot of new things that we can do with the help of Sencha Touch 2. I like to review this book. This book covers by creating ten unique applications in Sencha Touch 2

    Wednesday, 22 May 2013

    How to add Email 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.

    Friday, 17 May 2013

    How to group Radio Buttons in a Form using Sencha Touch 2

    I got a request from one of my reader regarding 'How to group Radio Buttons in a Form'. We are going to create Gender Field with two radio options (Male and Female). Let's see the implementation.

    Implementation:

    First, We are going to create a container view component with className and aliasName set as 'RadioContainer'. Layout configuration is set to 'hbox', which will position the  container items horizontally.  Next, we are going add child items to the container using items configuration. This configuration contains label component and another container view component.

    Wednesday, 15 May 2013

    Save Form Data Locally using Sencha Touch LocalStorage - Part3

    In Part1, We have seen how to create a basic HTML Form using Sencha Touch. In Part2, We have seen how to create model and apply model validation to the Form. Today, we are going to see, how we can store the form data Locally using HTML5 LocalStorage API.

    Tuesday, 14 May 2013

    Create Web Heatmaps using Javascript Heatmaps Library

    Today, i came across an open source javascript library called 'HeatMaps', which is used to generate realtime heatmaps. It uses the power and flexibility of the HTML5 canvas element to creating heatmaps based on your data (gradient, change the opacity, datapoint radius and so on).

    As per the Documentation,

    "A heatmap is a visualization used for visualizing three dimensional data. Two dimensions represent cartesian coordinates (x and y values) and the third dimension is used for showing the intensity of a datapoint in relative comparison to the absolute maximum of the dataset. The intensity is shown as a color, usually red (hot) is used for the maxima and blue (cold) for minima."

    Monday, 13 May 2013

    Convert Object to QueryString in Sencha Touch 2

    In Sencha Touch 2, today i came across a handy function Ext.Object.toQueryString() which is used to convert object into encoded query string. This encoded query string can be appended to URL which can used for Store Proxy URL configuration in order to fetch JSON/XML data  from remote server. Let me explain with an example

    Example1:
    var object1 = {fname:'suresh',lname:'kumar'};
    var queryStr = Ext.Object.toQueryString(object1);
    output: fname=suresh&lname=kumar

    Sunday, 12 May 2013

    Add Form Validation using Model in Sencha Touch 2 - Part2

    In Sencha Touch 2, Form Validation can be done using Model Validation. Before that, we are going to take the Form that we created as part of  'How to Create Basic Form Using Sencha Touch - Part1' Post. Here is the source code of the Basic Sencha Form with snapshot.

    Wednesday, 8 May 2013

    How to add Phone Number 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.

    Tuesday, 7 May 2013

    Add Button with image in Sencha Touch 2

    In sencha Touch 2, Button (Ext.Button) in Form  is used to make web application interactive by submitting the data to the server and allows user to perform some action. By default, sencha touch uses iconCls configuration in order to apply styles and arrows to the button.Today,  we are going to see how we can add image to the Button View Component Using Sencha Touch. Let's see the implementation.

    Sunday, 5 May 2013

    Add TextField with images in Sencha Touch 2

    In sencha Touch 2, TextField (Ext.field.Text) in Form plays an important role in any mobile web applications. Today,  we are going to see how we can add TextField with image in a Form Using Sencha Touch. This will come handy when you are displaying Username with Profile image in Account Profile Form or any other account details form. Let's see the implementation.

    Friday, 3 May 2013

    How to hide NavigationBar in NavagationView on Sencha Touch 2

    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.

    By default, NavigationBar will be present when you add NavigationView Component. This NavigationBar provides Back button and additional configurations like apply animation, Positioning, tpl configuration and so on. You can hide the NavigationBar using the hidden config property

    Wednesday, 1 May 2013

    Navigation View in Sencha Touch 2 Explained - Part2

    If you are new to this Post Series and haven't read Part 1 of this Post. Please read first and proceed with part2. Today, we are going to see how we can apply swipe event to the container view component by using listeners config

    Attach Swipe Event Handler to Home Page Container

    Using listeners configuration, we are attaching swipe event to the homepage container and also attaching handler function onHomepagecontainerSwipe() that needs to be called when swipe event occurs.

    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

    Related Posts Plugin for WordPress, Blogger...