JSFiddle - React, Tailwind, and code Playground

by konglie

HTML

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

JavaScript

Ext.create('Ext.grid.Panel', {
    title: 'Tambah Kota',
    layout: 'fit',
    height: 300,
    renderTo: Ext.getBody(),
    store: new Ext.data.ArrayStore({
        fields: [
            {name: 'idkota'}, 
            {name: 'namakota'}
        ]
    }),
    columns: [
        {header: 'ID Kota', dataIndex: 'idkota', flex: 1},
        {header: 'Nama Kota', dataIndex: 'namakota', flex: 1}
    ],
    tbar: {
        xtype: 'form',
        style: 'margin-bottom: 10px',
        bodyStyle: 'padding: 10px',
        defaults: {
            xtype: 'textfield',
            labelWidth: 100
        },
        items: [
            {
                fieldLabel: 'ID Kota',
                name: 'idkota',
                allowBlank: false,
                regex: /^[0-9]{1,}$/
            },
            {
                fieldLabel: 'Nama Kota',
                name: 'namakota',
                allowBlank: false
            }
        ],
        buttons: [
            {
                text: 'Save',
                itemId: 'saveBtn',
                formBind: true
            },
            {
                text: 'Load',
                itemId: 'loadBtn'
            }
        ]
    },
    listeners: {
        render: function(){
            var store = this.getStore();
            var form = this.down('form').getForm();
            this.down('#saveBtn').setHandler(function(){
                var data = form.getValues();
                store.add(data);
                form.reset();
            });
            this.down('#loadBtn').setHandler(function(){
                var data = form.getValues();
                var idKota = data.idkota;
                if(idKota == '')
                {
                    Ext.Msg.confirm('Konfirmasi', 'Kosongkan Grid? jika tidak, akan ditampilkan semua.',
                                    function(btn){ 
                                        if(btn == 'yes'){
                                            store.loadData([]); 
             ...