Tutorials Sencha Touch Sencha Touch Picker with Slots Example

Sencha Touch Picker with Slots Example

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

Total
0
Shares
Previous Post
Game Development

Cloud Revolutions in Gaming Industry

Next Post
Sencha Touch Tutorials

Sencha Touch Simple and Grouped List Example

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All