In this article, I’m explaining the picker in sencha touch.
Ext.picker.Picker class is used to create a simple picker. Picker used to choose a value from a list and provides good look and feel.
Ext.picker.Slots are used to organize multiple scrollable slots into a single picker. Slots is the only necessary configuration.
The slots configuration with a few key values:
- ![if !supportLists]> · <![endif]>name: The name of the slot (will be the key when using getValues in this Ext.picker.Picker).
- ![if !supportLists]> · <![endif]>title: The title of this slot (if useTitles is set to true).
- ![if !supportLists]> · <![endif]>data/store: The data or store to use for this slot.
Remember, Ext.picker.Slot class extends from Ext.dataview.DataView.
Example
Firstly drag-n-drop the panel named it PickerPanel and add two titlebars – one for heading purpose and contain a button named Show Picker to launch the picker and another for changing the alignment of the picker slot, this will contain the a segmented button: Left, Center and Right.
Now add the picker to the project and named it ColorPicker and set the data through data configuration of the picker slot whose name is ColorPickerSlot.
Ext.define('MyApp.view.PickerPanel', {
extend: 'Ext.Panel',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Picker Example',
items: [
{
xtype: 'button',
id: 'ShowPicker',
itemId: 'mybutton',
text: 'Show Picker'
}
]
},
{
xtype: 'titlebar',
docked: 'top',
id: 'AlignTitlebar',
items: [
{
xtype: 'container',
html: 'Align : ',
id: 'AlignConatiner',
style: 'color: white;margin-left:8px;'
},
{
xtype: 'segmentedbutton',
id: 'AlignSegmentedButton',
items: [
{
xtype: 'button',
id: 'AlignLeft',
pressed: true,
itemId: 'mybutton1',
text: 'Left'
},
{
xtype: 'button',
id: 'AlignCenter',
itemId: 'mybutton2',
text: 'Center'
},
{
xtype: 'button',
id: 'AlignRight',
itemId: 'mybutton3',
text: 'Right'
}
]
}
]
},
{
xtype: 'picker',
hidden: true,
id: 'ColorPicker',
itemId: 'mypicker',
hideOnMaskTap: true,
useTitles: true,
doneButton: {
itemId: 'Done'
},
cancelButton: {
id: 'Cancel'
},
slots: [
{
xtype: 'pickerslot',
id: 'ColorPickerSlot',
name: 'Color',
title: 'Color Slot',
data: [
{
text: 'Red',
value: '#f00'
},
{
text: 'Orange',
value: '#ffb600'
},
{
text: 'Yellow',
value: '#ff0'
},
{
text: 'Green',
value: '#80ff4d'
},
{
text: 'Blue',
value: '#009dff'
}
]
}
]
}
],
listeners: [
{
fn: 'onShowPickerTap',
event: 'tap',
delegate: '#ShowPicker'
},
{
fn: 'onAlignLeftTap',
event: 'tap',
delegate: '#AlignLeft'
},
{
fn: 'onAlignCenterTap',
event: 'tap',
delegate: '#AlignCenter'
},
{
fn: 'onAlignRightTap',
event: 'tap',
delegate: '#AlignRight'
},
{
fn: 'onColorPickerChange',
event: 'change',
delegate: '#ColorPicker'
}
]
},
onShowPickerTap: function(button, e, eOpts) {
Ext.getCmp('ColorPicker').show();
},
onAlignLeftTap: function(button, e, eOpts) {
Ext.getCmp('ColorPickerSlot').setAlign('left');
},
onAlignCenterTap: function(button, e, eOpts) {
Ext.getCmp('ColorPickerSlot').setAlign('center');
},
onAlignRightTap: function(button, e, eOpts) {
Ext.getCmp('ColorPickerSlot').setAlign('right');
},
onColorPickerChange: function(picker, value, eOpts) {
Ext.Msg.alert('You selected:', value.Color);
}
});
Output
Tapping on the Show Picker button, opens the picker:
When you click/tap on the center button in align section, the alignment of picker slot will change to center:
When you click/tap on the right button in align section, the alignment of picker slot will change to right:
When you tap on the Done button of picker slot, you will get a message containing the hexadecimal code of the color:
Leave a Comment