Saturday, 29 June 2013
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
Download the JQuery Word Counter Plugin file from here and include the jQuery.textareaCounter.min.js file inside <head> Tag in HTML Page
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.jsStep 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
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.
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.
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
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.
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
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.
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.
Sunday, 9 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.
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
You can also set date while creating Model instance using Ext.create(). Here is the code
Hope, you enjoyed this Post.
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.
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.
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.
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.
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.
Subscribe to:
Posts (Atom)