JSFiddle - React, Tailwind, and code Playground

by chaoszcat

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css">

JavaScript

/**
 * Customized Row Selection Model which will
 * fires "editortab" event when an tabbing occurs
 */
Ext.define('NS.RowModel', {
    extend: 'Ext.selection.RowModel',
    
    //False to wrap to next row when you tab
    //to the end of a row
    preventWrap: false,
    
    initComponent: function() {
        /**
         * @event editortab
         * Fires when editor is tabbed
         * @param {RowModel} rowModel this rowmodel
         * @param {Editor} edt The editor
         * @param {string} dir The direction of the tab (left or right)
         * @param {Event} e The event object
         */
        this.addEvents('editortab');
        this.callParent();
    },
    
    //memorizing which is the last context
    lastEditorContext: null,
    
    onEditorTab: function(edt, e) {
        
        //Part of this code is from the original onEditorTab in
        //src/selection/RowModel.js line 416
        var me = this,
            view = me.views[0],
            record = edt.getActiveRecord(),
            header = edt.getActiveColumn(),
            position = view.getPosition(record, header),
            direction = e.shiftKey ? 'left' : 'right',
            newPosition  = view.walkCells(position, direction, e, this.preventWrap);
            
        //we store the last context, so we know whether the 
        //context has changed or not
        me.lastEditorContext = edt.context;
                    
        //if there is new position, edit; else, complete the edit.
        if (newPosition) {
            edt.startEditByPosition(newPosition);
        }else{
            edt.completeEdit();
        }
        
        //If context doesn't change, we try to walk
        //to the next one until we find a new edit box (context changed)
        while (me.lastEditorContext === edt.context && newPosition) {
            newPosition = view.walkCells(newPosition, direction, e, this.preventWrap);
            if (newPosition) {
               ...