JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css" />
CSS
body {
padding: 50px 20px 0 20px;
}
JavaScript
var data = {
"login": [{
"username": "venkat",
"password": "123"
}, {
"username": "admin",
"password": "345"
}, {
"username": "sam",
"password": "234"
}, {
"username": "paul",
"password": "456"
}]
};
Ext.define('Code', {
extend: 'Ext.data.Model',
fields: [{
name: 'username',
type: 'string'
}, {
name: 'password',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
storeId: 'codeStore',
model: "Code",
data: data,
autoLoad: true,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'login'
}
}
});
// Form
// -----------------------------------------------------------------------
var loginFormPanel = Ext.create('Ext.form.Panel', {
bodyStyle: 'padding: 5px;',
border: false,
defaults: {
xtype: 'textfield'
},
items: [{
fieldLabel: 'Username',
name: 'username',
allowBlank: false,
listeners: {
specialkey: submitOnEnter
}
}, {
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
listeners: {
specialkey: submitOnEnter
}
}],
buttons: [{
id: 'saveBtn',
itemId: 'saveBtn',
text: 'Submit',
handler: function () {
this.up('form').getForm().submit();
}
}, {
text: 'Cancel',
handler: function () {
this.up('form').getForm().reset();
}
}],
submit: function () {
var currentForm = this.owner.form;
if (currentForm.isValid()) {
var credentials = currentForm.getValues();
var codeStore = Ext.getStore('codeStore');
var match = codeStore.findBy(function (record, id) {
if (record.get('username') == credentials.username && record.get('password') ==...