JSFiddle - React, Tailwind, and code Playground

by koutsenko

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.application({
    name: 'Fiddle',
    launch: function () {
        var test = Ext.create('Ext.draw.Component', {
            viewBox: false,
            items: [{
                type: 'path',
                fill: 'purple',
                path: 'M150 0' +         // стартовая позиция (150;0)
                    'L75 200'  +         // линия (150;0) - (75;200)
                    'L200 200'           // линия (75;200) - (200;200)
            }]
        });

        var wnd = Ext.create('Ext.Container', {
            resizable: {
                handles: 'all',
                dynamic: true
            },
            floating: true,
            renderTo: Ext.getBody(),
            ghost: false,
            width: 250,
            height: 250,
            // padding: 5,
            layout: 'fit',
            //style: {
            //  backgroundColor: 'transparent'
            //},
            items: [test],
        });
        wnd.show();
        
        /*var ttt = Ext.create('Ext.Container', {
            html: '<span>test</span>',
            floating: true,
            renderTo: test.getEl(),
            style: {
                backgroundColor: 'red'
            },
            height: test.getHeight() - 20,
            width: test.getWidth() - 20
        });
        
        wnd.on('resize', function(component, width, height) {
            ttt.setSize(width - 20, height - 20);
        }, this);*/
    }
});