Dimensional Data

The Sencha Team is excited to announce the release of our Sencha Ext JS 7.4, the latest milestone version update for our best-in-class JavaScript framework.  This release includes many highly requested features and upgrades including 4 new rich Grid features, and addresses 15 customer reported tickets for both Classic and Modern Toolkit. What’s New in Ext JS 7.4   Multi-level Grouping The MultiGrouping grid feature allows the Grid Panel to display the Store data that is grouped by multiple groupers. Here is an example of what it looks like:   Classic Toolkit Feature   Modern Toolkit Plugin Grouping Panel This plugin allows your end-users to drag and drop grid columns to the grouping panel section that is visible above the grid panel. The user can move the dimensions in the grouping panel in which order he/she wants. Classic Toolkit Plugin Summaries for groups and total Quickly define functions for aggregation such as sum, min, max count and more per column. Grouping Summary in Classic Toolkit. Grouping Summary in Modern Toolkit. Filterbar This classic and modern toolkit plugin will add a docked bar under the grid headers and depending on the grid columns configuration, filter fields will be added. Filterbar in Classic Toolkit. Filterbar in Modern Toolkit. New KitchenSink examples Ext JS 7.4 will bring new Grid examples in KitchenSink to help show how to configure and use the new 4 Grid features. Modern – Multi level grouping and Summaries Modern – Grid Filterbar Classic – Multi level grouping and Summaries Classic – Grid Filterbar   Bug Fixes With 15 bug fixes, this release brings a solid set of improvements that the Ext JS users have been waiting for. Please see the Ext JS 7.4 release notes ExtGen and Sencha Cmd ExtGen 7.4 and Sencha Cmd have been updated to support Ext JS 7.4. With Open Tooling, @sencha/[email protected], you can unlock many build features of Sencha Cmd by passing environment options through your npm scripts. These options are then sent to Sencha Cmd via Sencha’s custom webpack plugin. You now can enable the dynamic package loader from your scripts by passing an environment variable through the webpack plugin: –env.cmdopts=–uses. You may recognize this is the same flag used by Sencha Cmd CLI. Sencha’s custom webpack plugin exposes the variable cmdopts to your npm scripts. Within the webpack plugin, this variable is parsed into an array of build options for Sencha Cmd. Building for testing is also available by Cmd Opts. Explore the Building npm based Applications docs for more information.   What’s Next? The engineering team is pacing well on regular quarterly releases and we are committed to delivering new features, quality, performance and usability enhancements and improvements all along.  The work on supporting Ext JS 7.4 in Sencha Architect, Sencha Themer, Sencha Upgrade Advisor and Sencha Bridges (ExtReact, ExtAngular and ExtWebComponents) is in full swing*! Our goal is to provide you with continual support through quality and performance enhancements. If you have any feedback or questions, drop us a note here or get in touch.   *Features are not committed until completed and GA released. Try Ext JS 7.4

A much-used term, Data Manipulation is the process of querying modifying data. It refers to the technique of adjusting data to make it more organized and easier to read. While many consider data manipulation difficult and complex, it does not need to be. With the Ext JS Grid, you can easily group, sort, and filter data using JavaScript. In this tutorial, you will find all the details. What is the Ext JS Grid? The “Grid” is one of the centerpieces of Sencha Ext JS. With it, you can easily fetch, sort, and filter a large amount of data. To make this possible, the Ext JS grid consists of two main components – an Ext Data Store full of data and a set of columns to render. How to Group Data with the Ext JS Grid Sorting Data in Multiple Columns Let’s say that you are building a flight booking web application. As a part of the app, you want your users to be able to sort multiple columns including Date, Airline, and Schedule, to help them find the best flights. Take a look at the illustration below: To implement the sort functionality to your web app using Ext JS, simply add the following code: Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.grid.Grid’, title: ‘Reykjavik Flight Departures’,   multiColumnSort: true,   store: {       // Two property sort via store configuration     sorters: [{         property: ‘airline’     }, {         property: ‘destination’     }],       type: ‘store’,     autoLoad: true,     fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}],     proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}} },   columns: [{     xtype: ‘datecolumn’,     text: ‘Date’,     dataIndex: ‘date’,     format: ‘M j’,     width: 60 }, {     xtype: ‘column’, // This is the default column xtype     text: ‘Airline’,     dataIndex: ‘airline’ }, {     text: ‘To’,     dataIndex: ‘to’ }, {     text: ‘Scheduled’,     dataIndex: ‘plannedDeparture’,     align: ‘center’ }, {     text: ‘Status’,     dataIndex: ‘realDeparture’,     flex: 1 }],   }); Ext.application({ name: ‘MyApp’, mainView: ‘MyApp.view.Main’ }); Once you understand the basics, you can experiment with the code using Sencha Fiddle. How can I sort Data in a Single Column? Now that you have the multiple column sort down pat, let’s look at another use case. Say that you want your users to find their flights by clicking the SORT ON DESTINATION text and sort the destination data into just a single column: To do it, you have to use the following code: Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.grid.Grid’, title: ‘Reykjavik Flight Departures’, items: [{     docked: ‘top’,     xtype: ‘toolbar’,     items: [{         text: ‘Sort on destination’,         handler: function(button){             // Sort under program control             button.up(‘grid’).getStore().sort(‘to’);         }     }] }], store: {       // Sort via store configuration     sorters: [{         property: ‘airline’     }],       type: ‘store’,     autoLoad: true,     fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}],     proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}} },   columns: [{     xtype: ‘datecolumn’,     text: ‘Date’,     dataIndex: ‘date’,     format: ‘M j’,     width: 60 }, {     xtype: ‘column’, // This is the default column xtype     text: ‘Airline’,     dataIndex: ‘airline’ }, {     text: ‘To’,     dataIndex: ‘to’ }, {     text: ‘Scheduled’,     dataIndex: ‘plannedDeparture’,     align: ‘center’ […]

  The Dashboard is the first screen that a user wants to see in an application. There will be the most important information for the strategy of the company. There are charts and some lists with summary data to explain the current status of the business. Today we are going to create our Dashboard with a personalized design using the power of Sass based on this example and using best practices. How to Create an Ext JS Application Using Sencha CMD based on Templates Let’s start installing and configuring Sencha CMD and then create our application from the admin template. Starting with Sencha CMD If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed make sure it was installed and configured properly, running this command on terminal/shell: If it returns sencha cmd version, you are good to go. Here are more details on how to install, configure and use Sencha CMD, but this article will show all the important details. Creating the application The first thing you have to do is download the template by clicking here. The next thing to do is create your project structure and Sencha CMD can do it for you easily, just by running this command: sencha -sd /Users/fabio/sencha-sdks/ext-7.3.1 generate app -s extjs-admin-dashboard-template-master DashboardExtJS ./dashboard-extjs /Users/fabio/sencha-sdks/ext-7.3.1/ is where your Ext JS SDK folder is. extjs-admin-dashboard-template-master is the template downloaded. DashboardExtJS is the name of our application that will be our namespace for our classes. ./dashboard-extjs is the path where it will create our project structure with the needed files. Make sure when you run this command there is no error on the output. If everything was running correctly, it created your project structure. Let’s run our application with the initial structure. First navigate to your project folder: Then, run the command that will up the server on a specific port: The output of this command will show you the URL where your app will be available. For our case, it is available on http://localhost:1841/. Open it on your browser and you will see the initial app created: Why use a template? The benefits of using templates is a lot, mainly this admin dashboard template where you have the base classes and screen that you will need for your application. Project Structure Let’s understand a bit about the project structure generated, here are the important folder on our project: app is the directory where we will have our classes used on both devices (desktop and mobile). Here we can have base classes and no visual classes like Models, Stores, and some views that we will be able to reuse. classic is our directory where we have our classes used for the app running on the desktop. modern is where we save our classes that will be working to run the app through the phone. sass is where some of our important rules were defined to change the design of the app. The Dashboard In this post, we will focus only on our Dashboard and dive into some components and how it is working to make some actions. Important components to put on a dashboard are charts and lists, so let’s focus on these two kind of components. How can I Create a Line Chart with Javascript Ext […]

Using Computer Vision – How to Implement the Microsoft Azure Read REST API Using Sencha CMD and Ext JS – Sencha.com Sencha Home / Blog / Ext JS / Using Computer Vision – How to Implement the Microsoft Azure Read REST API Using Sencha CMD and Ext JS

Who loves AI algorithms? The Read service is an API that identifies any visible text, printed and handwritten on images or PDF files. The API returns the words on results with confidence percentual of that text found on the image/PDF. Using it, you can extract any texts from images/PDF even if someone wrote by hand. If is there any word, it can identify. Now let’s create our Javascript Ext JS application using best practices and applying this awesome API to scan images to extract texts from it. Incorporating computer vision into your Javascript applications like this can really help you stay ahead of the competition. Let’s get started! Prerequisites Before you start, there are some prerequisites to follow to access the API. You can follow the steps here to create a Computer Vision resource on Microsoft Azure to get your keys to access the API. Starting with Sencha CMD If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed make sure it was installed and configured properly, running this command on terminal/shell: If it returns sencha cmd version, you are good to go. Here are more details on how to install, configure and use Sencha CMD, but this article will show all the important details. Creating the application The first thing you want to do is create your project structure and Sencha CMD can do it for you easily, just by running this command: sencha -sdk /Users/fabio/sencha-sdks/ext-7.3.1/ generate app modern ReadTextImage ./read-text-image-extjs /Users/fabio/sencha-sdks/ext-7.3.1/ is where your Ext JS SDK folder is. ReadTextImage is the name of our application that will be our namespace for our classes. ./read-text-image-extjs is the path where it will create our project structure with the needed files. modern is the toolkit selected for our application. Make sure when you run this command there is no error on the output. If everything was running correctly, it created your project structure. Let’s run our application with the initial structure. First navigate to your project folder: $ cd read-text-image-extjs/ Then, run the command that will up the server on a specific port: The output of this command will show you the URL where your app will be available. For our case, it is available on http://localhost:1841/. Open it on your browser and you will see a screen like this: Cleaning up Once we have our basic project running, we can remove from it the files and components that will not use. You can delete these files with the command bellow (open other terminal and keep sencha app running because it will update the application automatically): $ rm app/model/* app/store/* app/view/main/List.* Now let’s clean up our classes that are on app/view/main. Make sure your three classes are like this: Main.js: /** * This class is the main view for the application. It is specified in app.js as the * “mainView” property. That setting causes an instance of this class to be created and * added to the Viewport container. */ Ext.define(‘ReadTextImage.view.main.Main’, { extend: ‘Ext.Panel’, xtype: ‘app-main’, controller: ‘main’, viewModel: ‘main’ }); MainController.js: /** * This class is the controller for the main view for the application. It is specified as * the “controller” of the Main view class. */ Ext.define(‘ReadTextImage.view.main.MainController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.main’ }); MainModel.js: /** * This class is the view […]

In this global economic turmoil, it has become very important for investors to make the right financial decision based on accurate and up-to-date market data. With Sencha Ext JS and Marketstack API, you can build a stock market web application that provides real-time data and helps the investors uncover valuable insights. In this article, you will find all the details. What is Marketstack API? Marketstack is a REST API that provides real-time stock market data. It supports 25,000 stock tickers across the globe from 72 stock exchanges, including NYSE, Nasdaq, and ENX. Also, it offers accurate historical market data of more than 30 years. With an uptime of nearly 100%, it has become one of the most reliable stock market APIs that you can find online. Why should you use Marketstack API? Offers real-time, intraday, and historical stock market data in JSON format, which is very easy to integrate with web applications Supports integration with multiple languages and frameworks, including JavaScript, Python, Node, and Go Handles traffic spike efficiently Offers bank-grade security using the industry-standard 256-bit HTTPS encryption Provides easy-to-follow documentation How to Build a Real-Time Stock Market Web Application with Sencha Ext JS and Marketstack API Sencha Ext JS is a feature-rich JavaScript framework for building business-grade web applications. By integrating Marketstack API, you can create a real-time stock market application easily. Take a look at it: To create the stock market application shown above, you have to follow these steps: 1. First, you have to create the model. Go to app > model folder, create HomeModel.js file and add these codes: Ext.define(‘Demo.model.HomeModel’, {     extend: ‘Ext.data.Model’,       alternateClassName: [         ‘home’     ],     requires: [         ‘Ext.data.field.Number’,         ‘Ext.data.proxy.Rest’     ],       fields: [         {             type: ‘float’,             name: ‘low’         },         {             type: ‘float’,             name: ‘high’         },         {             type: ‘int’,             name: ‘date’         },         {             type: ‘float’,             name: ‘close’         },         {             type: ‘float’,             name: ‘open’         }     ],       proxy: {         type: ‘rest’     } }); Here, you are adding different fields, including open, close, data, high and low. Also, you are defining their types. 2. Then you have to create the view. Go inside view folder and create OHLCCharts.js file. Insert these codes: Ext.define(‘Demo.view.OHLCCharts’, { extend: ‘Ext.panel.Panel’, alias: ‘widget.OHLCCharts’,   alternateClassName: [ ‘OHLCCharts’ ], requires: [ ‘Demo.view.OHLCChartsViewModel’, ‘Demo.view.OHLCChartsViewController’, ‘Ext.toolbar.Toolbar’, ‘Ext.toolbar.Fill’, ‘Ext.form.field.Date’, ‘Ext.button.Button’, ‘Ext.chart.CartesianChart’, ‘Ext.chart.axis.Time’, ‘Ext.chart.series.CandleStick’, ‘Ext.chart.interactions.PanZoom’, ‘Ext.chart.interactions.Crosshair’ ],   controller: ‘ohlccharts’, viewModel: { type: ‘ohlccharts’ }, dock: ‘top’, height: ‘100vh’, padding: 0, style: { background: ‘#ffffff’ }, width: ‘100wh’, layout: ‘fit’, bodyPadding: 0, frameHeader: false, manageHeight: false,   dockedItems: [ { xtype: ‘toolbar’, alignTarget: ”, border: 2, dock: ‘top’, style: { background: ‘#c6e4aa’ }, layout: { type: ‘hbox’, padding: ‘0 10 0 0’ }, items: [ { xtype: ‘tbfill’ }, { xtype: ‘textfield’, id: ‘tickerInput’, width: 100, fieldLabel: ‘Ticker’, labelWidth: 40, value: ‘AAPL’ }, { xtype: ‘datefield’, id: ‘fromDatePicker’, width: 250, fieldLabel: ‘From’, labelWidth: 50, value: ’01/01/2020′ }, { xtype: ‘datefield’, id: ‘toDatePicker’, resizable: false, width: 250, fieldLabel: ‘To’, labelWidth: 50, value: ’12/31/2020′ }, { xtype: ‘button’, id: ‘refreshBtn’, text: ‘Refresh’, listeners: { click: ‘onRefreshBtnClick’ } } ] }, { xtype: ‘cartesian’, dock: ‘top’, height: ’85vh’, id: ‘mycandlestickchart’, itemId: ‘mycandlestickchart’, margin: ‘0 0 0 […]

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;                     }                 },                           […]

No matter how you look at it, Detect Labels is one of the most awesome Google APIs out there. It is the gateway to a full array of information that can be added to any picture. With it, you can read tags for almost everything you see in a given image, from its location to the products and activities you see within. Is there an animal in the image? If the answer is yes, you can even tag the species. Needless to say, there is endless potential in the Detect Label API.  That’s why today we are going to create a project using Detect Labels to scan images in Sencha Architect. Starting with Sencha Architect Before you start, you are going to need to configure and open Sencha Architect on your machine. If it asks for them, install and update Sencha CMD and the Ext JS SDK as well. Creating a project Once everything is current, you can start by clicking on New Project on the Sencha Architect main screen: You will see a number of project options, for our purposes we will start with the Blank Project template. Select it  and click on Create: This creates a new blank project ready for you to start selecting and dragging things into. Creating and configuring the view The first thing you want to do is select and drag a Form Panel from the right-side tool box. Drag it into your project and give it a title in the configurations panel on the bottom right of the Sencha Architect window. Let’s name it Detect Labels: Next, you will want to add a toolbar with a button at the bottom of the form. Call the button Run. We can assign the button an action later. Now it gets interesting, let’s add some fields that we will use to dynamically change our request parameters. You can rename them as you go by double-clicking on the name field. Add fields for API URL, API Key, Max. Results, Image URL, and Response. Now, let’s transform the Max. Results field to a Number field and disable the decimal flag because there will be an integer value for it. Configuring the View Model Now that you have created your view, it is time to work on the View Model. Here we connect the fields with values from the model using bind. To do this go to the tree files on the left panel, and select MyFormViewModel. Next, in the configuration panel, find config data and click on its value. This will change it in the code. This will also open the Architect code editor. To define the data for the view model we will enter our URL and parameters to call the Detect Labels API using an Ext Ajax request. As an example, we will use the image used on the API blog post.  Don’t forget to change your Google API Key key as well! data: { apiUrl: ‘https://vision.googleapis.com/v1/images:annotate’, apiKey: ‘yourGoogleApiKey’, imageUri: ‘gs://cloud-samples-data/vision/label/setagaya.jpeg’, maxResults: 5, response: null }   Binding the fields Once you are done, it is time to connect the data to our fields. To do this, head back to your form view on the Editor tab, select each field, and find the value property on the configurations panel. Make sure the option View Model Binding is […]

Quickly Build Amazing Cryptocurrency Charts in JavaScript with Coinlayer API and Sencha Ext JS – Sencha.com Sencha Home / Blog / Ext JS / Quickly Build Amazing Cryptocurrency Charts in JavaScript with Coinlayer API and Sencha Ext JS

Ext.define(‘GoogleNLPDemoApp.view.main.MainView’, {   xtype: ‘mainview’,   controller: ‘mainviewcontroller’,   extend: ‘Ext.Panel’,   layout: ‘vbox’,   items: [{             xtype: ‘fieldset’,             items: [                 {                    xtype: ‘textfield’,                                      label: ‘Text Content’,                                      placeholder: ‘Enter text for analysis’,                                      name: ‘textContent’,                                      // validate not empty                                      required: true,                                      reference: ‘ct’                 },                 {                     xtype: ‘button’,                                           text: ‘analyze’,                                           handler: ‘onAnalyzeClick’                 }             ]         },  {       xtype: ‘reportgrid’,       title: ‘Sentiment Analysis Report’,       bind: {                 store: ‘{nlpStore}’             }   }],   viewModel: {       stores: {           nlpStore: {               type: ‘store’,               storeId: ‘dStore’,               autoLoad: true,               fields:[{                   name: ‘content’,                   mapping: ‘text.content’               },               {                   name: ‘magnitude’,                   mapping: ‘sentiment.magnitude’               },               {                   name: ‘score’,                   mapping: ‘sentiment.score’               }               ],               proxy: {                   type: ‘memory’,                   data: null,                   reader: {                       rootProperty: ‘sentences’                   }               }           }       }   },   defaults: {       flex: 1,       margin: 16   } });