Dimensional Data

Touchscreens are available on a variety of devices, ranging from smartphones to tablets. They have taken the way we interact with and design our applications to a whole new level. People love to use their phones, tablets and other touch devices. As a result, developers are giving more thought to building quality applications for touch screen devices — it is now a top priority for responsive UX design. A large part of touch UX design is ensuring the apps you design respond intuitively to your user’s needs. One of the best ways to supercharge your Ext JS cross-platform web applications is with Sencha Touch effectively. In this post, we will show how. What is Sencha Touch? Sencha Touch is a JavaScript framework designed for developing applications for mobile devices. It can be used to develop data-intensive web apps for a wide spectrum of platforms including touchscreen laptops, smartphones, and tablets. More importantly, It helps you to develop mobile applications for both Android and iOS easily while maintaining a native look and feel. Once a stand-alone product, Sencha Touch is no longer supported on its own. Instead, its core functionality has merged with Ext JS, which provides you with an even more powerful suite of tools to conveniently develop all of your cross-platform mobile and web applications. How to implement touchscreen support on Ext JS? Implementing Touch is even easier now that it is a part of the Ext JS JavaScript framework for smartphones, tablets, and touchscreen laptops. More than ever, the applications you build with ExtJS run seamlessly a variety of devices — all with little or no modification. Here are three ways to implement touchscreen support: Event Normalization The first way to implement Touch on a device using Ext JS is Event Normalization. Event Normalization refers to the process of translating simple mouse events to their equivalent touch and pointer events. Simply put, it enables your Ext JS application to run flawlessly on touchscreen devices. Here is how it works: If your code requests a listener for a mouse event, Ext JS attaches an equivalent touch or pointer event to the request. For example, here is a scenario where the application attempts to attach a mousedown listener with the following code: myElement.on(‘mousedown’, someFunction); If the device supports touchscreen events, the event system translates mousedown to touchstart: myElement.on(‘touchstart’, someFunction); In cases where your devices support pointer-events, the event system translates mousedown to pointerdown: myElement.on(‘pointerdown’, someFunction); As you can see, you can implement touchscreen support in the form of Event Normalization for your Ext JS web applications is very easy. There is no complexity and very little code you need to write to make it work. Gesture System Gesture systems are another way to implement touchscreen support in ExtJS. From a browser’s perspective, there are three types of events: touch, pointer, and mouse. Upon interpreting their sequence and timing, Ext JS can synthesize more complex events, like drag, swipe, and tap. To enable your Ext JS application to listen for specific gesture events like longpress, you just need to use this single line: Ext.get(‘myElement’).on(‘longpress’, handlerFunction); Origionally, Sencha Touch was specifically designed for touch events. Now, however, Ext JS offers full support for pointer and mouse events using the Gesture System. Gestures respond to any type of input –they can be triggered […]

In this Sencha roadmap post, you will find a detailed summary of what we’ve planned for the near future. The product team interacts with customers on an everyday basis. Your feedback plays a significant role in driving our overall product direction. Before we get to the details of our updated roadmap, we wanted to recap what we’ve delivered in recent months.   Recent Releases 7.4 Release In May 2021, we released Sencha Ext JS 7.4, and the release was features-focused, addressing some of the customer requests across the modern and classic toolkits. Shortly after the initial 7.4 release, we released ExtReact, ExtAngular, and ExtWebComponents 7.4. Key 7.4 features include: Multi-level Grouping The MultiGrouping grid feature allows the Grid Panel to display the Store data grouped by multiple groupers. Multi-level Grouping Menu Options for Multi-level grouping   Grouping Panel  This plugin lets your end-users drag and drop grid columns to the grouping panel section visible above the grid panel. The user can move the dimensions in the grouping panel in which order they want. Grouping Panel Options for Grouping Panel – Classic   Summaries for groups and total Quickly define functions for aggregation such as sum, min, max count, and more per column. Filterbar This classic and modern toolkit plugin will add a docked bar under the grid headers, and depending on the grid columns configuration, the user will add filter fields. GXT 4.1.0   In February 2021, we announced the availability of a GXT 4.1.0 software release for our customers on maintenance. This release addresses more customer-reported tickets, dependency upgrades, and more. The release is available for customers from the Sencha support portal. Key features included in GXT 4.1.0: GXT support for GWT 2.9.0 GXT should support Java 11 version Fix Archetypes Maven migration from Artifactory to Sencha MyGet Sencha Test 2.4   Since the release of WebTestIt, we’ve received some questions from Sencha Test customers. We don’t have any plans to replace Sencha Test with WebTestIt. The two products will coexist. WebTestIt is used to serve the broader non-Ext JS test automation ecosystem. It isn’t tied with apps built with Ext JS and can test apps built with any framework (React, Angular, etc.).  Recently we released Sencha Test 2.4, which is more focused on keeping it up to date with its dependencies.  Key features included in Sencha Test 2.4 Sencha Test Studio has been upgraded to Electron 11 Sencha Test included Chrome drivers have been updated to 86-90 The Generic Web Driver has been fixed If there are specific features you would like to see added to Sencha Test, please don’t hesitate to reach out to Sencha product management.   Sencha GRUI High-performance, feature-rich grid for react applications GRUI by Sencha is a perfect modern enterprise-grade grid solution for React UI that comes with 100+ unique data grid features. With GRUI, we have re-built the Ext JS grid from the ground up to use modern JavaScript and a whole new architecture that will deliver all the same great features and even better performance in an easy-to-use React API. Key features included in GRUI: Virtual Columns Infinite Scrolling Slider Paging Toolbar Column Drag and Drop Column Editors Click here to Experience an interactive demo of ‘Why use GRUI by Sencha?’ We are excited to receive your feedback on the latest […]

In today’s world, developers have a wide range of solutions while building modern web applications. They can choose a variety of languages and frameworks. Also, when it comes to web services, there are different options to choose from. One of the most popular options is SOAP, which enables platform and language-independent web applications to exchange data conveniently. In this post, you will find the details of plugging SOAP services into your application using JavaScript quickly. Let’s dive in. What is SOAP? SOAP stands for Simple Object Access Protocol. It is an XML-based protocol for accessing web services over HTTP. It is platform and language independent. So, you can use it to interact with applications of different programming languages without any hassle. What are the advantages of SOAP? Compatible with different programming languages and platforms Supports built-in error handling Provides WS-security support for protecting the web service How to Get Ext.Data.Store Up and Running with SOAP Data The configuration process of getting Ext.data.Store up and running with SOAP data is very simple. Just follow these steps: 1. First, you have to define Blender and extend Ext.data.Store. Then define three fields: id, name, and price. Ext.define(‘Blender’, {     extend: ‘Ext.data.Model’,     fields: [         { name: ‘id’, type: ‘int’ },         { name: ‘name’, type: ‘string’ },         { name: ‘price’, type: ‘float’ }     ] }); 2. Next, you have to create the proxy. Then you have to define url, API, soapAction, operationParam and targetNamespace. Also, you have to create reader. var store = Ext.create(‘Ext.data.Store’, {     model: ‘Blender’,     proxy: {         type: ‘soap’,         url: ‘BlenderService/’,         api: {             create: ‘CreateBlender’,             read: ‘GetBlenders’,             update: ‘UpdateBlender’,             destroy: ‘DeleteBlender’         },         soapAction: {             create: ‘http://example.com/BlenderService/CreateBlender’,             read: ‘http://example.com/BlenderService/GetBlenders’,             update: ‘http://example.com/BlenderService/UpdateBlender’,             destroy: ‘http://example.com/BlenderService/DeleteBlender’         },         operationParam: ‘operation’,         targetNamespace: ‘http://example.com/’,         reader: {             type: ‘soap’,             record: ‘m|Blender’,             namespace: ‘m’         }     } }); How to Load Data into the Store To load the data, you have to follow these steps: 1. First, you have to call the store’s load method. Then you have to add a parameter, called brand. It will create a SOAP request to GetBlenders, which is specified by the read property in the proxy’s api. Let’s assume that the GetBlenders SOAP operation requires a brand parameter. You can pass it to the store’s load method. store.load({     params: {         brand: ‘Blendtec’     } }); The above code will trigger a post to this URL: http://example.com/BlenderService/?operation=GetBlenders 2. Let’s assume that the response to the above request looks like this:                                         1                 Total Blender Classic WildSide                 454.95                                          2                 The Kitchen Mill                 179.95                         3. Now, you can pass a callback function to store’s load method. It will enable you to see what the store’s records will look like after it is loaded. store.load({     params: {         brand: ‘Blendtec’     },     callback: function() {         console.log(store.getCount()); // 2 records were loaded.         console.log(store.getAt(0).get(‘name’)); // get the name field of the first record.     } }); How to Customize SOAP Envelope and Body To customize SOAP envelope and body, you have to follow these steps: 1. Use the developer tool on your web browser […]

For quite a few years now, language localization has been one of the most neglected segments in application development. While some companies are making localization attempts, in many cases businesses are neglecting entire markets and making the assumption that a single language version will suffice. Alternatively, they are simply unaware of how easy localization can actually be with the right framework in place. However, in a global economy where buzzwords like inclusivity and understanding are common, it only makes sense to make an effort to address localization. Simply put, with properly localized applications,  everyone can access your technology. In more pragmatic terms, businesses that neglect localization efforts are limiting their potential user base by not making an effort to cater to different language markets. Because the penny has finally dropped, many modern application development frameworks have started providing active support for language localization. Sencha ExtJS is one such framework. ExtJS makes it extremely easy for developers to integrate localization processes in their applications with a minimum amount of effort and time spent. In this article, we’ll look at how we can easily harmonize our localization efforts in JavaScript using Sencha ExtJS. How can I achieve localization with Sencha CMD? To implement localization with Sencha CMD, you only need to modify the app.json file in your Sencha CMD-generated application. Add the ext-locale package in the requires array to register it for use across the application. “requires”: [ “ext-locale” ], Once you have registered the package, you need to define the localization language in your app.json file to create a locale setting. “locale”: “es”, To see it in action, build the application and refresh the page to witness all the English values translated into Spanish. sencha app build What is an easy way to do localization without Sencha CMD? To achieve localization without using the Sencha CMD, simply include and link the ExtJS localization file in your HTML file as follows. Localization example Is there RTL support in ExtJS? ExtJS has extensive support for localization. The framework includes over 40 languages from all over the world. Because many languages are written right-to-left, ExtJS has RTL support built-in. Developers can easily enable ExtJS RTL support, allowing you to better accommodate an international user base. How can I enable RTL support using Sencha CMD? To enable RTL support in your Sencha CMD-generated application, you simply need to add Ext.rtl.* in the requires array and set the rtl flag to true as shown in the code below. Ext.define(‘MyApp.view.main.Main’, { extend: ‘Ext.container.Container’, requires: [ ‘Ext.rtl.*’ ], rtl: true, … For further details on locales with RTL and RTL locale override, check out this section in our RTL guide. What is a simple way to enable RTL support without using Sencha CMD? Even if your application does not utilize Sencha CMD you can still make use of localization and enable RTL support in a few simple steps. The first step is to update your HTML file to include and link the RTL framework file such as build/ext-all-rtl.js. Linking the framework file will modify your application to load the RTL-specific library. Linking the framework file is not enough. You also need to include the selected theme’s RTL CSS file such as build/packages/ext-theme-{themename}/build/resources/ext-theme-{themename}-all-rtl.css. Finally, add the rtl: true flag to the viewport. Hello RTL As you can see, due to its easy-to-understand localization framework, […]

Data and how you handle it is the heart of every application you create, whether it is simple or complex. How you handle your data drives your applications and determines your credibility and success as a business application developer. With such high stakes involved, it is important to recognize data as one of your most valuable development resources and, as such, to handle it with due care and attention inside your applications. Sencha ExtJS is aware of the importance of handling data correctly and has implemented many features to streamline your development and data handling processes. In Sencha ExtJS, the data package loads and saves all of the data in your application. It consists of a multitude of classes that contribute to the way you handle data. In this article, we’ll take a brief tour of ExtJS’s data package and help you better understand its core concepts. What is a model in the data package of a Sencha application? A model is the most important part of a data package. Everything else in your application is connected to and revolves around the model. This makes it the heart of the entire data package. Some of the principal parts of Ext.data.Model include fields, proxies, validations, and associations. A sample ExtJS model is defined in the code snippet below. Ext.define(‘MyApp.model.Base’, { extend: ‘Ext.data.Model’, fields: [{ name: ‘id’, type: ‘int’ }], schema: { namespace: ‘MyApp.model’, // generate auto entityName proxy: { // Ext.util.ObjectTemplate type: ‘ajax’, url: ‘{entityName}.json’, reader: { type: ‘json’, rootProperty: ‘{entityName:lowercase}’ } } } }); How are proxies used in an end-to-end client-server cycle? There are two types of proxies in ExtJS — client and server. The client proxy may include memory and local storage to store the data on the client-side, whereas, the server proxy handles the marshaling of data to a remote server, for instance, Ajax, JSONP, and REST. Generally, these proxies are used by ExtJS models and stores to handle the loading and saving of model data. How can I create a store in ExtJS? A store, in ExtJS, is a collection of records of model instances. When defining a store, you need to define its linked model as well. Following is a simple code that allows you to create a store for User model and load its data using the load() function on Store object. var store = new Ext.data.Store ({ model: ‘MyApp.model.User’ }); store.load({ callback:function(){ var first_name = this.first().get(‘name’); console.log(first_name); } }); One of the fascinating things about a store is that it allows you to define sorting parameters. Based on the sorting and grouping preferences, the store filters and then returns the data. How can I establish associations between models? Models can be linked with each other using associations. In any real-world application, your entities are always linked together. This should be reflected in your model-level structure as well. For instance, your social media application contains a User and Post model. The Post model and its instances have no standalone semantic value. However, if it associates with a User model then it makes real sense. In ExtJS, model associations for this social media example can be defined as follows: Ext.define(‘MyApp.model.User’, { extend: ‘MyApp.model.Base’, fields: [{ name: ‘name’, type: ‘string’ }] }); Ext.define(‘MyApp.model.Post’, { extend: ‘MyApp.model.Base’, fields: [{ name: ‘userId’, reference: ‘User’, // the entityName for MyApp.model.User type: […]

Give some style for your application is crucial to give life to your products and attract the end-user. But sometimes has a high cost to implements it using CSS. Sencha has a solution which helps solve this problem through a smart theming solution. Sencha Themer empowers you to style Ext JS, ExtAngular and ExtReact apps and make them look great. You can create custom themes using graphical tools – without writing code. Themer gives you access to components and inspection tools to set fine-grained styles and generate theme packages with dynamic stylesheets. With the innovative color palette in Themer, it’s easy to apply different color combinations to different component states. The color palette shows base, body background, and font color with progressively lighter and darker colors. There is also a palette that helps you select colors from Material Design. The Themer font management option allows you to quickly add web fonts from Google fonts. This tool allows you to transform your desktop, tablet, and phone application into a beautiful and modern application creating your own theme without any line of code! What is Sencha Themer? Sencha Themer is a tool to create new themes for your application based on pre-defined themes in a very fast and productive way. The theme created can be exported and shared to reuse again and again. You have the color palette to choose the best base colors, select body background, and font color with progressively lighter and darker colors. There is also a palette that helps you select colors from Material Design. The Themer font management option allows you to quickly add web fonts from Google fonts. There is also access to components and inspection tools to set fine-grained styles and generate theme packages with dynamic stylesheets. Getting Started First, download here and install Sencha Themer on your machine. Second, you will create your new Ext JS, ExtReact, or ExtAngular application to apply the new theme and see updates applying live. Creating the Application You can create a new application by running the commands below: sencha -sd /Users/fabio/sencha-sdks/ext-7.4.0/ generate app AppNewTheme ./app-new-theme-extjs And start your application: cd app-new-theme-extjs/ && sencha app watch Now open your application with fashion option enabled, with this URL: http://localhost:1841/?platformTags=fashion:true How can I change my theme using Sencha Themer? Now that your application is ready and running, let’s open our application on Sencha Themer to change it with whatever you want to give your personality to your application. Follow the steps below to create your own theme. After opening it, click on Create Theme button: Fill the informations about the new theme, giving a name, select your application path on App field, the toolkit of the application you would like to apply the new theme, and finally the base theme you will be based on to create your new theme, then click on Create Theme: After open the theme, select a color on base color field to see it in action: Then when you open your application, you can see that changes were applied automatically: How do I change styles for Specific Components? You can also personalize specific components like buttons, toolbars, grids, forms, and many other components on your application. For our app, let’s change our grid a little bit. From the left side, select the grid component, and then […]

The need to find and fix quality issues early in the development cycle has always been baked into the core philosophy of every serious development team, even in the face of intense delivery pressure. The evolution of web technology introduced a new urgency for software quality. Sencha Test is the most comprehensive unit and end-to-end testing solution for Ext JS, including support for end-to-end testing of ExtAngular, Angular, ExtReact and React apps. Deliver higher quality apps and reduce testing time & cost with powerful automation through Sencha Test. What are the benefits of a testing framework? Reduces barriers to testing by providing a professionally designed, documented and supported testing framework for Ext JS and ExtReact apps Shortens testing startup time by delivering pre-authored tests for complex Ext JS and ExtReact example apps Automates testing by allowing scheduled, unattended test runs that leverage CI Empowers users to develop a large number of tests with an easy-to-use JavaScript built-in editor Improves code quality, accelerates time to market, and ensures a consistent end-user experience In this article we will learn more about Sencha Test and how you can use it to increase the quality if your software output. With Sencha Test, you can create end-to-end tests quickly, and execute them on multiple browsers simultaneously. Cross-browser testing is critical to ensuring quality for organizations, and test automation is a requirement to meet delivery timelines. Sencha Test helps you build an end-to-end testing plan without having to cobble together testing tools. Is there an IDE I can use to write Javascript tests? Sencha Test Studio is the graphical user interface that allows you to write Jasmine tests in a built-in Sencha Test editor. You can write tests using JavaScript and store them in your team’s preferred source control system. Test Studio allows you to create tests directly in Sencha Test, or code in a separate IDE, and execute the test immediately. The iterative unit testing process helps you create more robust code by constantly testing it along the way. What tools can I use to automate Javascript tests? Using Test Runner, you can run selected unit and functional tests on any or all of the browsers on a local machine, a connected mobile device, or on a browser farm. The local Test Runner can be used for test creation and debugging. An external browser farm or a Selenium grid is used by the Sencha Test Command Line Interface (CLI) to run the same tests on a Continuous Integration (CI) system – allowing you to schedule automated test runs nightly or at a convenient time, with minimal configuration. Sencha Test Command Line Interface (CLI) helps you achieve the full power of automated test runs. Once tests are authored and checked into the source control repository, you can launch them from your Continuous Integration (CI) system. The CI system can invoke the CLI automatically, once it senses a change to the application code or the test files in the source control repository. How can I access historical Javascript test results easily? The Test Archiver enables you to track historical testing trends in your projects as well as compare results between runs. Automated visual analysis allows you to identify runs where screens do not render correctly or visual glitches are present. The archiver leverages the full power of […]

Web-based IDEs reside entirely on a remote server and are accessible through the browsers. Unlike the typical IDEs on your PC, you don’t have to go through any installation process. Also, they enable you to collaborate with other developers conveniently. You can share code examples with your colleagues easily. They can play with your code and make necessary adjustments. You can enjoy all of these benefits using Sencha Fiddle. It is a web-based IDE for running and sharing your Ext JS code examples. In this post, you will find a step-by-step guide for using the editor. What is Sencha Fiddle? Sencha Fiddle is an online IDE for creating, running, and sharing code examples using the Ext JS framework easily. It mimics the local development environment in the cloud. You can use it to test and prototype applications conveniently. Why should you use Sencha Fiddle? Easy to use Run, edit and share Ext JS codes online Super-fast performance What can you do with the Sencha Fiddle? Fork and Share Fiddles Sencha Fiddle enables you to change all the aspects of the fiddle, including the code and folder structure. It gives you flexibility. You can save your code to the Fiddle Server and share your work with your colleagues and community. The process of sharing the fiddle is very simple. Simply click on the share button. A new window will open up. It will contain a few lines of code, which you can use to display your work through an IFrame. Protect Fiddles with Passwords You can protect the fiddle with a password to prevent unauthorized access. No one can play with your codes without your permission. The process of securing the fiddle with a password is very simple. Here are the steps: Hit the Admin button. Then Details. A new window will open up. Scroll down to find and expand Advanced Options. Insert your preferred password. Finally, hit the Set button. That’s it! Now, no one can edit your fiddle without entering the specified password. Lock Fiddles for Confirmation Prompt Another thing you can do is locking fiddles to prevent others from editing them unless a confirmation prompt is acknowledged. It is a great way to control access to your codes effectively. To lock the fiddle, simply check the box of the Locked field. Assign Fiddles to Team You can assign the fiddles to different teams. Each of the users will have custom-defined edit privileges. So, you can enjoy granular control over the fiddles and the persons who are interacting with them. To assign a fiddle to a team, simply follow these steps: Navigate to Admin > Teams. A new window will open up. Click Add To Team button. Select the team from the dropdown. Then hit Choose Team button. That’s how you assign a fiddle to a specific team. Add Fiddles to Groups In Sencha Fiddle, Groups are “albums” of fiddles. They provide additional user-defined organization for your fiddles. Besides, Sencha Fiddle offers support for Dynamic groups. They automatically curate the fiddles based on pre-defined search criteria. To add a fiddle to a group, simply follow these steps: Head to Admin > Groups. A new window will appear. Click Add To Group button. Choose your preferred group from the dropdown. Then click the Choose Group button. That’s it! Now, you […]

Developing an application is not easy, mainly talking about a web application, where you can expect any kind of problems depending on user environment, the internet speed, machine performance limitation, remote server availability, different browsers with different behavior and many other unexpected situations where the developer will have to fix the problem. But sometimes is very hard to identify a UI problem even using browser tools. To help with that we have a powerful product: The Sencha Inspector! What is Sencha Inspector? This is a complete tool that helps developers to debug Ext JS applications giving options to inspect anything about an Ext JS application and its ecosystem. It will help you keep the best performance and quality to your application! What are the most interesting Sencha Inspector features? This tool was designed specifically to inspect Ext JS application with many options to monitor and inspect, like: Components: identifying its id, xtype, layout, and other dynamic details, including properties, methods, layout, and the MVVM structure. Stores: checking what model was applied to id, proxy, and properties like URL, parameters and also monitor all records present in the store to easily debug the application behavior. Layout: verify what and how many times each layout is running for each component to see the performance or layout loopings are happening. Events: monitor any kind of events running and their parameters to understand who is calling if is there any unnecessary events executing that will affect the application performance. Architecture: you can see the whole project architecture in a single place (including the Ext JS framework structure). Theme: where you can change styles on the SASS variables that will apply dynamically to your app in real-time. After that, you can just copy your changes and apply them to your application! App Details: show all versions of sencha products used and their license, so here you can monitor if you are using a compatible version of Ext JS with Sencha CMD for example, and also understand the theme hierarchy applied on your application. These and many other options and all on the fly! You can see all details while your app is running and sometimes also change, like on the Theme option. On Sencha Inspector documentation has a complete guide with all steps to understand how to install and use it in detail. Check it here. How to debug and Ext JS Application with Sencha Inspector? Let’s see Sencha Inspector in action! Creating the Application You can create a new application running the commands below. To see more details on how to create an application using templates, check this previous post for more details. sencha -sd /Users/fabio/sencha-sdks/ext-7.4.0/ generate app -s /Users/fabio/sencha-sdks/ext-7.4.0/templates/admin-dashboard AdminDashboard ./admin-dashboard-extjs Now, to have the theme option enabled and working on the fly, we need to enable the fashion option on our app.json file. On the sass section, add the save property: { … “sass”: { “save”: “sass/save.scss”, //accepts .scss or .json file types … } } After that, open the Sencha Inspector, and on terminal navigate to your application folder, and then run the watch command with the inspector option enabled: sencha app watch –inspect Now open your application with this URL: http://localhost:1841/?platformTags=fashion:true After that, you will see your application ready to inspect on your SenchaInspector: Double click on it to see […]

Rapidly Build Cross-Platform Enterprise Apps With JavaScript And Electron – Sencha.com Sencha Home / Blog / Ext JS / Rapidly Build Cross-Platform Enterprise Apps With JavaScript And Electron