JSFiddle - React, Tailwind, and code Playground
JavaScript
Ext.define('TRA.view.RequestsView',{
extend: 'Ext.Container',
xtype: 'requestsview',
config: {
title: 'Your Requests',
scrollable: null,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: '',
cls: 'no-bg',
items: [
{
xtype: 'selectfield',
label: 'Request Type',
labelAlign: 'top',
labelWrap: true,
labelWidth: '100%',
cls: 'bordered',
itemId: 'requestTypeField',
options: [
{text: 'Fake Devices', value: 'fakeDevicesReq'},
{text: 'Approved Devices', value: 'approvedDevicesReq'},
{text: 'Signal Coverage', value: 'signalReportReq'},
{text: 'SMS Spam', value: 'smsSpamReq'},
{text: 'Domain name', value: 'webLookupReq'},
{text: 'Block/Unblock Website', value: 'websiteBlockReq'}
]
},
{
xtype: 'button',
text: 'Retrieve',
style: 'background:#f7901e; margin:0 auto; color: #fff; text-transform:uppercase',
height: '50px',
border: '0px',
width: '260px',
itemId: 'sendButton'
}
]
},
{
html: '',
itemId: 'requestsListHeader',
style: 'background: #FFF; border-radius: 3px 3px 0 0; border: 1px solid #4A565C; padding: 4px;',
hidden: true
},
{
xtype: 'list',
layout: 'fit',
flex: 1,
itemTpl: new Ext.XTemplate('<span style="dispaly: inline-block; width: 30%; float: left;">{title}</span>',
'<span style="display: inline-block; width: 70%; float: right;">hello</span>'),
styleHtmlContent: true,
itemId: 'requestsList',
hidden: true,
emptyText: 'No requests have been recorded...