articles

Home / DeveloperSection / Articles / Picker in Sencha Touch

Picker in Sencha Touch

Sumit Kesarwani 8406 20-Jun-2013

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:

  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 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


Updated 07-Sep-2019

Leave Comment

Comments

Liked By