---
title: "Picker in Sencha Touch"  
description: "In this article, I’m explaining the picker in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-20  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1342/picker-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 10 minutes  

---

# Picker in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining the picker in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

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](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) scrollable slots into a single picker. Slots is the only necessary [configuration](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer).

The slots configuration with a few key values:

1. ![if !supportLists]> · <![endif]>name: The name of the slot (will be the key when using getValues in this Ext.picker.Picker).
2. ![if !supportLists]> · <![endif]>title: The title of this slot (if useTitles is set to true).
3. ![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](https://www.mindstick.com/forum/480/add-two-number) titlebars – one for [heading](https://yourviews.mindstick.com/view/81027/world-economy-heading-towards-recession) [purpose](https://www.mindstick.com/forum/161328/what-is-the-purpose-of-flush-true-in-the-print-function) 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](https://yourviews.mindstick.com/story/1788/things-to-ensure-your-construction-project-is-successful) 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

![Picker in Sencha Touch](https://www.mindstick.com/mindstickarticle/d6e0b748-97d1-499e-b869-957261f55e69/images/8e925167-902e-49c9-b868-155756bc0ca0.png)

Tapping on the Show Picker button, opens the picker:

![Picker in Sencha Touch](https://www.mindstick.com/mindstickarticle/d6e0b748-97d1-499e-b869-957261f55e69/images/2a0acf73-b878-4310-874d-098d168525cf.png)

When you click/tap on the center button in align [section](https://yourviews.mindstick.com/story/2851/is-c-section-bad), the alignment of picker slot will change to center:

![Picker in Sencha Touch](https://www.mindstick.com/mindstickarticle/d6e0b748-97d1-499e-b869-957261f55e69/images/5829f1ba-8b8d-4822-a97d-c8b6f7251947.png)

When you click/tap on the right button in align section, the alignment of picker slot will change to right:

![Picker in Sencha Touch](https://www.mindstick.com/mindstickarticle/d6e0b748-97d1-499e-b869-957261f55e69/images/77084c88-ec17-46fa-aab8-41625778849c.png)

When you tap on the Done button of picker slot, you will get a [message](https://www.mindstick.com/interview/682/which-are-the-various-message-map-macros) containing the hexadecimal code of the color:

![Picker in Sencha Touch](https://www.mindstick.com/mindstickarticle/d6e0b748-97d1-499e-b869-957261f55e69/images/4ce90151-07c0-400c-965b-52b87f35df91.png)

---

Original Source: https://www.mindstick.com/articles/1342/picker-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.