Create a Currency Converter Application Quickly with Sencha Ext JS and Exchange Rates API
With the world turning into a global village for free trade, it has become vital for individuals to have avenues for converting currencies. Currencies like the United States Dollar, the Euro, and the British Pound are widely used around the world for international transactions. So, individuals and businesses keep a close eye on the exchange rates. As a developer, you can help people access exchange rates by creating a currency converter application with Sencha Ext JS and Exchange Rates API. In this post, you will find all the details. What is Exchange Rates API? Exchange Rates API is a JSON-based REST API that provides current and historical exchange rates. It supports 170 global currencies and over 14,000 exchange rate conversion pairs. It is one of the fastest and most scalable exchange rate APIs that you can find online. Why should you use Exchange Rates API? Delivers unmatched performance Offers quick data refresh rate (60 seconds) User-friendly interface Easy to integrate with web applications Offers dedicated support team for helping you implementing the API How to Create a Currency Converter Application Quickly with Sencha Ext JS and Exchange Rates API Sencha Ext JS is a powerful framework for building cross-platform web applications. By integrating Exchanges Rates API, you can develop a currency converter application easily. Take a look at the app: To build the currency converter web application shown above, you have to follow these steps: 1. First, you have to create the model for exchange rates. Go to the App folder. Then head to the model directory, create the new RateModel.js file and add these codes: Ext.define(‘HeaderLeftRight.model.RateModel’, { extend: ‘Ext.data.Model’, requires: [ ‘Ext.data.field.String’, ‘Ext.data.field.Number’ ], fields: [ { type: ‘string’, name: ‘symbol’ }, { type: ‘float’, name: ‘rate’ } ] }); Here, you are adding two fields, called ‘symbol’ and ‘rate.’ Also, you are defining their types. 2. You have to create models for the currency symbols. Create a new file, called SymbolModel.js, inside the model folder. Then add these codes: Ext.define(‘HeaderLeftRight.model.SymbolModel’, { extend: ‘Ext.data.Model’, requires: [ ‘Ext.data.field.String’ ], fields: [ { type: ‘string’, name: ‘symbol’ }, { type: ‘string’, name: ‘value’ } ] }); Here, you are defining two fields: symbol and value. 3. Next, you have to add the Views. Go to the view folder, create the MyPanelViewModel.js file and add these codes: Ext.define(‘HeaderLeftRight.view.MyPanelViewModel’, { extend: ‘Ext.app.ViewModel’, alias: ‘viewmodel.mypanel’ }); 4. Create the MyPanelViewController.js file and insert these codes: Ext.define(‘HeaderLeftRight.view.MyPanelViewController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.mypanel’, setRatesComapareValue: function(baseSymbol, rate, exchangeSymbol) { this.resultLbl.setText(`1 ${baseSymbol} = ${rate} ${exchangeSymbol}`); }, toggleSymbolGrid: function() { if(this.isSymbolGridShowed) { this.symbolGrid.hide(); this.isSymbolGridShowed = false; } else { this.symbolGrid.show(); this.isSymbolGridShowed = true; } }, […]
