JSFiddle - React, Tailwind, and code Playground

by chaoszcat

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css">

CSS

body{
    background-image:url(http://cdn3.iconfinder.com/data/icons/developperss/PNG/Play%20Green%20Button.png);
}
.navi_btn{
    font-family: MicroSoft YaHei;
    font-weight: 5;
    font-size: 15px;
    text-align: center;
    color: #006f61; 
}
.navi_btn_over{
    font-family: MicroSoft YaHei;
    font-weight: 3;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    background: url(http://cdn3.iconfinder.com/data/icons/developperss/PNG/Play%20Green%20Button.png) repeat-x;
}
.x-navi_btn_pressed{
    font-family: MicroSoft YaHei;
    font-weight: 3;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    background: url(http://cdn1.iconfinder.com/data/icons/woothemesiconset/32/info_button.png) repeat-x;
}

JavaScript

Ext.define('Crm.view.CrmNavi', {
    extend: 'Ext.toolbar.Toolbar',
    height: 27,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    cls: 'navi_btn',
                    overCls: 'navi_btn_over',
                    pressedCls: 'navi_btn_pressed',
                    xtype: 'button',
                    height: 24,
                    flex: 4,
                    html: 'button one',
                    toggleGroup: 'crmNaviBtnGroup',
                    enableToggle: true,
                    pressed: true
                },
                {
                    cls: 'navi_btn',
                    overCls: 'navi_btn_over',
                    pressedCls: 'navi_btn_pressed',
                    xtype: 'button',
                    height: 24,
                    flex: 4,
                    margin: '0 0 0 0',
                    html: 'button two',
                    toggleGroup: 'crmNaviBtnGroup',
                    enableToggle: true
                 }
            ]
        });
        me.callParent();
    }
});

Ext.create('Ext.panel.Panel', {
    tbar: Ext.create('Crm.view.CrmNavi'),
    width: 400,
    height: 200,
    renderTo: Ext.getBody()
});