Picker is an overlay panel, slides from the bottom and allows user to choose value from given set. It also allows the swipe gesture input event. Picker can have the slots configuration property used to define the number of sections. Here in the below example we have used two sections. One is for specifying the time in hours and other to define the am/pm. DatePicker is a specialized Picker, derived from Ext.Picker class, designed to provide user flexibility to select date.

Below example shows the Sencha Touch Picker in action

var picker = new Ext.Picker({
	ui: 'light',
	slots: [{
      name : 'hours',
      title: 'Hours',
       data : [
                {text: '01:00', value: 1},
                {text: '02:00', value: 2},
                {text: '03:00', value: 3},
                {text: '04:00', value: 4},
                {text: '05:00', value: 5},
                {text: '06:00', value: 6},
                {text: '07:00', value: 7},
                {text: '08:00', value: 8},
                {text: '09:00', value: 9},
                {text: '10:00', value: 10},
                {text: '11:00', value: 11},
                {text: '12:00', value: 12}
            name : 'ampm',
            title: 'AM/PM',
            data : [
                {text: 'AM', value: 'am'},
                {text: 'PM', value: 'pm'}

In the above example, we are creating the instance of the picker widget, using the Ext.Picker class constructor. show and hide method is used to display and remove the picker from the view.

Below is the output of the above code.
Sencha Touch Picker with Slots Example

This article is about: Sencha Touch,


A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.


Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.