JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-debug.js"></script>

JavaScript

Ext.onReady(function() {
    // Initial margins
    var actMargin = { top: 0, right: 0, bottom: 0, left: 0 };
    
    function marginChanged(field, newValue, oldValue) {
        var panel = Ext.getCmp('testpanel');
        
        actMargin[field.itemId] = newValue;
        alert(panel.getEl());
        panel.getEl().setStyle({ margin: actMargin.top + 'px ' + actMargin.right + 'px ' + actMargin.bottom + 'px ' + actMargin.left + 'px' });
        //panel.anchor = ((actMargin.left + actMargin.right) * -1) + ', ' + ((actMargin.top + actMargin.bottom) * -1);
        win.doLayout();
    };
    
    var win = Ext.create('Ext.window.Window', {
        width: 500,
        height: 500,
        layout: "anchor",
        items: [{
            xtype: 'panel',
            id: 'testpanel',
            title: 'the panel',
            margin: actMargin.top + ', ' + actMargin.right + ', ' + actMargin.bottom + ', ' + actMargin.left,
            anchor: '100%, 100%'
        }],
        
        tbar: {
            defaultType: 'numberfield',
            defaults: {
                minValue: 0,
                listeners: {
                    'change': marginChanged
                }
            },
            items: [
                'Top:', { itemId: 'top', value: actMargin.top, width: 60 },
                'Right:', { itemId: 'right', value: actMargin.right, width: 60 },
                'Bottom:', { itemId: 'bottom', value: actMargin.bottom, width: 60 },
                'Left:', { itemId: 'left', value: actMargin.left, width: 60 }
            ]
        }
    }).show();
});