JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

Ext.define('EC.view.PasswordPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.pwdpanel',

    bodyPadding: 15,
    pollForChanges: true,

    initComponent: function() {
        this.initialConfig = {
            url: '/password/'
        };

        this.fieldDefaults = {
            labelAlign: 'right',
            labelWidth: 135,
            msgTarget: 'side',
            allowBlank: false,
            inputType: 'password'
        };

        //this.listeners =  {
        //// circumvent broken formBind
        //validitychange: function(comp, valid) {
        //this.down('button').setDisabled(!valid);
        //}};
        this.buttons = [{
            text: 'Change',
            formBind: true,
            disabled: true,
            scope: this,
            handler: function() {
                alert('here');
            }}];
        this.items = [{
            xtype: 'textfield',
            name: 'pw_old',
            fieldLabel: 'Old password'},
        {
            xtype: 'textfield',
            name: 'pw_new1',
            id: 'pw_new1',
            fieldLabel: 'New password',
            minLength: 8,
            maxLength: 16},
        {
            xtype: 'textfield',
            name: 'pw_new2',
            fieldLabel: 'Confirm new password',
            }];

        this.callParent(arguments);
        this.on('afterrender', function(me) {
            delete me.form._boundItems;
        });
    }
});

Ext.create('EC.view.PasswordPanel', {
    renderTo: Ext.getBody(),
});