JSFiddle - React, Tailwind, and code Playground

JavaScript

Ext.define('TRA.controller.UserRequestsController', {
	extend: 'Ext.app.Controller',
	config: {
		refs: {
			requestsView: 'requestsview',
			sendButton: 'requestsview button[itemId=sendButton]'
		},
		control: {
			sendButton: {
				tap: 'onSend'
			}
		}
	},

	onSend: function() {
		var me = this;
		var requestsView = me.getRequestsView();

		var requestTypeField = requestsView.down('#requestTypeField');
		var requestsListHeader = requestsView.down('#requestsListHeader');
		var requestsList = requestsView.down('#requestsList');

		var requestType = requestTypeField.getValue();

		if (requestType == null) {
			Ext.Msg.alert('Select request type.');
			return;
		}

		//get requests

		
		Ext.Viewport.setMasked({xtype: 'loadmask', message: 'Retreiving..'});
		requestsListHeader.hide();
		requestsList.hide();

		var request = Ext.Ajax.request({
			url: Session.getApiBaseUrl() + '/service/myrequests/' + requestType + '?access_token=' + Session.getAccessToken(),
			method: 'get',
			useDefaultXhrHeader: false,
			success: function(response) {
				response = Ext.JSON.decode(response.responseText);

				//if data is empty, listview will show emptyText
				



				if (response.user_data) {

					requestsList.setData(response.user_data);

                        //list now should show only the new data elements
						requestsList.show();
					}
				}
				else{
					Ext.Msg.alert('Could not find any requests.');
				}	
				
			},
			failure: function() {
				Ext.Msg.alert('Could not complete your request');
			},
			callback: function() {
				Ext.Viewport.setMasked(false);
			}
		});
	}

})