selectOnFocus

Using selectOnFocus: true to provide a better editing experience for touch-based clients.

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext/gpl/4.2.0/resources/css/ext-all-neptune.css">
<div id="container"></div>
<ul id="log"></ul>

JavaScript

function notify(message) {
    var el = document.getElementById('log');

    log.innerHTML += '<li>' + message + '</li>';
}

notify('Supports Touch: ' + Ext.supports.Touch);

Ext.widget({
    renderTo: 'container',
    xtype: 'form',
    items: [{
        xtype: 'textfield',
        value: 'Foo'
    }, {
        xtype: 'textfield',
        value: 'Bah',
        selectOnFocus: true
    }, {
        xtype: 'textfield',
        value: 'Foo'
    }, {
        xtype: 'textfield',
        value: 'Bah',
        selectOnFocus: Ext.supports.Touch
    }, {
        xtype: 'textfield'
    }, {
        xtype: 'textfield',
        selectOnFocus: true
    }],
    listeners: {
        afterrender: function () {
            var events = ['focus'];

            this.items.each(function (item) {
                events.forEach(function (event) {
                    item.on(event, function (cmp, ev) {
                        var target,
                            rangeEnd = 0;
                        
                        notify(event);
                        
                        if (Ext.supports.Touch) {
                            window.setTimeout(function () {
                                target = Ext.get(ev.target).dom;
                          
                                if (cmp.selectOnFocus && target.tagName === 'INPUT' && target.type === 'text' && target === document.activeElement) {
                                    rangeEnd = 9999; //target.value ? target.value.length : 0;
                                    notify(rangeEnd);
                                    
                                    // FIXME: works first time, but not after that?
                                    target.setSelectionRange(0, rangeEnd);
                                }
                            }, 10);
                        }
                    });
                });
            });
        }
    }
});