JSFiddle - React, Tailwind, and code Playground

by Gery

HTML

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

JavaScript

Ext.onReady(function () {

    var tip = new Ext.Tip({
        header: true,
        collapsible: true,
        width: 350
        /*,
        height: 50,
        autoScroll: 'auto',
        layout: 'fit',
        overflowY: 'scroll'*/
    });

    var contentPanel = new Ext.Panel({
        border: false,
        plain: true,
        autoLoad: {
            url: '/echo/js/?js=BLAH'
        }
    });

    var store = new Ext.Panel({
        html: "this text should only have a height of 50, therefore an automatic scrollbar should appear, but it doesn't!.<br/><br/>blah<br/>BLAH<br/>blah<br/>BLAH<br/>blah<br/>BLAH<br/>blah<br/>BLAH",
        border: false
    });

    new Ext.Panel({
        items: [
        contentPanel,
        new Ext.Button({
            text: 'click',
            handler: function () {
                tip.add(store);
                tip.show();
                tip.doLayout();
                alignTip();
            }
        })],
        renderTo: Ext.getBody()
    });
});