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.
Related Posts Plugin for WordPress, Blogger...