Pick event not triggered for select field picker,while importing sencha-touch/base scss

Question

I am having one select field and want to handle select field picker events manually. Following code for selectfield :

{
          xtype: 'selectfield',  
          label: 'Choose one',  
          name:'abcd',  
          usePicker:true,  
          options: [  
              {text: 'First Option',  value: 'first'},  
              {text: 'Second Option', value: 'second'},  
              {text: 'Third Option',  value: 'third'}     

    ],     
    defaultPhonePickerConfig: {  
        hideOnMaskTap: true,  
        listeners: {  
            change: function(ths, val) {
               console.log('change event called');
            },
            pick: function(ths, The, slot) {
              console.log('pick event called');
                PICKER_CONFIG = null;
                if (PICKER_CONFIG != true) {
                    if (The[slot.getName()] != undefined && The[slot.getName()] != null && The[slot.getName()] != "") {
                     //   Ext.getCmp('contractList').setValue(The[slot.getName()]);
                        ths.fireEvent('change', ths, The);
                        ths.hide();
                    }
                }
            },
            cancel: function() {
                console.log('cancel called');
                PICKER_CONFIG = true;
            },
            show:function(){
              console.log('show called');  
            }
        }
    },

pick is not getting called because i am using base css .

Here is my app.scss

@import 'sencha-touch/base';

But its working if i am using sencha-touch default and default/all css like:

@import 'sencha-touch/default';
@import 'sencha-touch/default/all;

but, i don't want to use it
Is there any way to get that pick by using sencha-touch/base css.

Answer 1

This is what i wrote to set Picker in SelectField:

  {
                        xtype: 'selectfield',
                        usePicker: true,
                        displayField: 'text',
                        valueField: 'value',
                        options: [
                            { text: 'Choose Dosage', value: 'default' },
                        ],
                        defaultPhonePickerConfig : {
                            listeners: {
                                change: function(thePicker, newValue, oldValue) {
                                    //check if custom variable has been set to false
                                    if (newValue.slotsNumeric != null && newValue.slotsDecimal != null) {
                                        var total = newValue.slotsNumeric + newValue.slotsDecimal;
                                        // set the select field to show the correct selected value!!
                                        var DecimalPicker = Ext.ComponentQuery.query('selectfield')[0];
                                        DecimalPicker.setOptions({
                                            text: total,
                                            value: total
                                        });
                                    }
                                },
                            },
                            useTitles: true,
                            hideOnMaskTap: true,
                            slots: [
                                {
                                    name  : 'slotsNumeric',
                                    title : 'Numeric',
                                    align: 'center',
                                    data : [
                                        {text: '0', value: 0},
                                        {text: '1', value: 1},
                                        {text: '2', value: 2},
                                        {text: '3', value: 3},
                                        {text: '4', value: 4},
                                        {text: '5', value: 5},
                                        {text: '6', value: 6},
                                        {text: '7', value: 7},
                                        {text: '8', value: 8},
                                        {text: '9', value: 9},
                                    ]
                                }, 
                                {
                                    name  : 'slotsDecimal',
                                    title : 'Decimal',
                                    align: 'center',
                                    data : [
                                        {text: '.0', value: .0},
                                        {text: '.1', value: .1},
                                        {text: '.2', value: .2},
                                        {text: '.3', value: .3},
                                        {text: '.4', value: .4},
                                        {text: '.5', value: .5},
                                        {text: '.6', value: .6},
                                        {text: '.7', value: .7},
                                        {text: '.8', value: .8},
                                        {text: '.9', value: .9},
                                    ]
                                }
                            ]
                        }                   
                    }

Answer 2

hmm...

Can you tell me from where you get "pick" event ? And what it supposed to do ?

I'm guessing that its doing the same thing as "change".

And how do you know its because you are using base css ? from what I read the base css is sencha will be using bare minimum styling for components to work and the rest will be up to user. so there should be no effect on event components behaviour.