如何在Sencha touch中禁用Picker中的特定行

时间:2013-05-13 07:30:30

标签: javascript sencha-touch sencha-touch-2 sencha-touch-2.1

我在Sencha touch 2.1中创建了一个选择器。我的数据显示正常。我想要禁用特定值而不是所有值,以便如果我选择该值并单击“ doneButton ”,则不应该这样做。

示例:

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);
                    }
                }
            }
        });
    }
}

让我们选择这些是我的选择器字段中的值。我在选择一个值并单击“ doneButton ”时正在做什么,我在文本字段中显示该值。我想要的是,如果我选择“选项2 ”并单击“ doneButton ”,则选项2 不应显示在文本字段中,而是在文本字段操作中选择和显示的所有其他值应该有效。

1 个答案:

答案 0 :(得分:1)

您可以获取所选记录并在点击完成按钮后检查该标记,然后移至文本框(或不)。

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'
                }
            ]
        }
    ]
});

工作小提琴:http://www.senchafiddle.com/#d46XZ

更新 的 就像你问的那样:选择器

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'
                        }
                    ]
                }
            ]
        });


    }
});

工作小提琴:http://www.senchafiddle.com/#SFgpV