Home > DeveloperSection > Articles > Picker in Sencha Touch

Picker in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 5395  View(s)
Rate this:

Picker in Sencha Touch

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

Picker in Sencha Touch

Tapping on the Show Picker button, opens the picker:

Picker in Sencha Touch

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

Picker in Sencha Touch

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

Picker in Sencha Touch

When you tap on the Done button of picker slot, you will get a message containing the hexadecimal code of the color:

Picker in Sencha Touch


Don't want to miss updates? Please click the below button!

Follow MindStick