javascriptsencha-touchsencha-touch-2sencha-touch-2.1

How to disable a particular row in Picker in Sencha touch


I have created a picker in Sencha touch 2.1. My Data is displaying properly. I want to disable a particular value not all so that if I select that value and click "doneButton" then it shouldn't be taken.

Example:

function loadPicker(paramName, valueSet) {
    Ext.Viewport.remove(Ext.getCmp(paramName + 'Pickerfield'), true);
    if (!paramName.picker) {
        paramName.picker = Ext.Viewport.add({
            xtype: 'picker',
            id: paramName + 'Pickerfield',
            useTitles: true,
            slots: [{
                name: paramName,
                title: paramName,
                data: valueSet
            }],

            doneButton: {
                listeners: {
                    tap: function(button, event, eOpts) {
                        var selectedPacingModeValue =
                            Ext.getCmp(paramName + 'Pickerfield').getValue()[paramName];
                        sendSetPendingRequest(paramName, selectedPacingModeValue);
                    }
                }
            }
        });
    }
}

lets take these are the values in my picker field. What I am doing on select of an value and click of "doneButton", I am showing the value in a textfield. What I want is if I will select "option 2" and click "doneButton" then option 2 shouldn't be displayed in textfield but for all other values this selecting and showing in textfield operation should work.


Solution

  • You can just get the selected record and check that flag upon click of the done button, then move to textbox (or not).

    Ext.create('Ext.form.Panel', {
        fullscreen: true,
        items: [
            {
                xtype: 'fieldset',
                title: 'Select',
                items: [
                    {
                        xtype: 'selectfield',
                        itemId: 'mySelectField',
                        label: 'Choose one',
                        options: [
                            {
                                text: 'apple',
                                value: 50
                            }, {
                                text: 'orange',
                                value: 100,
                                disabled: true
                            }, {
                                text: 'banana',
                                value: 200
                            }, {
                                text: 'papaya',
                                value: 300
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        text: 'done',
                        handler: function(button){
                            var panel = button.up(),
                                sf = panel.down('#mySelectField'),
                                tf = panel.down('#answerfield');
    
                            /* you can only access the raw value unless you use
                             * an actual store and an actual model with the 
                             * disabled field. In that case you can do
                             * sf.getRecord().get('disabled')
                             */ 
                            if(sf.getRecord().raw.disabled === true){
                                tf.setValue(''); //noting to see :)
                            } else {
                                tf.setValue(sf.getRecord().get('text')); //display value
                            }
                        }
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'answerfield',
                        title: 'answer'
                    }
                ]
            }
        ]
    });
    

    Working fiddle: http://www.senchafiddle.com/#d46XZ

    UPDATE Like you asked: with the picker

    Ext.Loader.setConfig({
        enabled: true
    });
    
    Ext.application({
        name: 'SenchaFiddle',
    
        launch: function() {
            var picker = Ext.create('Ext.Picker', {
                slots: [
                    {
                        name : 'stuff',
                        title: 'Stuff',
                        data : [
                            {
                                text: 'apple',
                                value: 50
                            }, {
                                text: 'orange',
                                value: 100,
                                disabled: true
                            }, {
                                text: 'banana',
                                value: 200
                            }, {
                                text: 'papaya',
                                value: 300
                            }
                        ]
                    }
                ],
                listeners: {
                    change: function(p, value){
                        var tf = panel.down('#answerfield'),
                            firstSlot = p.getItems().get(1), //index 0 is the toolbar 1 first slot and so on..
                            selectedRecord = firstSlot.getData()[firstSlot.selectedIndex];
                        if(selectedRecord.disabled === true){
                            tf.setValue(''); //noting to see :)
                        } else {
                            console.log(selectedRecord);
                            tf.setValue(selectedRecord.text); //display value
                        }
                    }
                }
            });
            var panel = Ext.create('Ext.form.Panel', {
                fullscreen: true,
                items: [
                    {
                        xtype: 'fieldset',
                        title: 'Select',
                        items: [
                            {
                                xtype: 'button',
                                text: 'show picker',
                                handler: function(button){
                                    Ext.Viewport.add(picker);
                                    picker.show();
                                }
                            },
                            {
                                xtype: 'textfield',
                                itemId: 'answerfield',
                                title: 'answer'
                            }
                        ]
                    }
                ]
            });
    
    
        }
    });
    

    working fiddle: http://www.senchafiddle.com/#SFgpV