JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.com/touch/sencha-touch-2.1.1/sencha-touch-all-debug.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.1.1/resources/css/sencha-touch.css">

JavaScript

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'
                }
            ]
        }
  ...