How to disable a particular row in Picker in Sencha touch

Question

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.

Answer 1

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