JSFiddle - React, Tailwind, and code Playground

by sran

HTML

<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all.js"></script>
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">
<div id="d1"></div>
<div id="d2"></div>

JavaScript

Ext.define('Custom', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.custpanel',
    
    tbar: {
        items: [{
            text: 'show foo.bar',
            handler: function(btn) {
                alert(btn.up('panel').foo.bar)
            }
        },{
            text: 'change foo.bar', 
            handler: function(btn) {
                btn.up('panel').foo.bar = btn.up('panel').id;
            }
        }]  
    },

    foo: {
        bar: null  
    },
    
    initComponent: function() {
        this.foo = Ext.apply({}, this.foo);
        this.callParent(arguments);
    }
});


Ext.onReady(function(){
    
    Ext.create('Custom', {
        title: 'Panel',
        width: 400,
        renderTo: 'd1'
    });
    Ext.create('Custom', {
        title: 'Other Panel',
        width: 400,
        renderTo: 'd2'
    });
    
});