Dimensional Data

  ExtJS or Extended JavaScript is a comprehensive JavaScript framework developed by Sencha for building comprehensive web and mobile applications. Today, you can use more than 140+ UI components like calendars, grids, trees, lists, forms, menus, toolbars, panels, windows, and hundreds of different extensions. So are you someone who is looking to build stunning web and mobile UIs using ExtJS? Then stop for a while and read through my introspection about what I wish I had known before starting this awesome journey. Why do I need to know JavaScript and OOP? To get started with ExtJS, you need basic HTML, CSS, and JavaScript programming. But, it is really helpful if you have a general idea of object-oriented programming (OOP) concepts and how to reuse code with them.  Especially if you come from a different programming background like C, C++, or Java, learning Javascript will make things much clearer when working with Ext Js. Finding an ExtJs tutorial for beginners is really helpful. Ext Js takes a Javascript first approach to reuse code with classes, similar to HTML elements and containers. So if you do not understand OOP concepts in Javascript, make sure to brush up your skills with some ebooks, tutorials, or online courses. Why is Sencha Cmd important? Sencha Cmd is the tool that automates your Sencha Ext JS applications from creating your initial project structure to generating deployable apps. Therefore, it is imperative to know about Sencha cmd, what it does and how to use it. Make sure to read through the Sencha Cmd to get familiar with it before starting development. How can I speed up the development? If you want to spend less time on manual coding and accelerate your development, consider using Sencha Architect so that you can build UIs using drag and drop features. The code that automatically generates is optimized for high performance, and you can avoid errors you do when coding manually.  How can I use the MVC design pattern? With a basic understanding of Javascript and OOP concepts, understanding Javascript design patterns is also important. Ext Js uses Model View Controller (MVC) design pattern from which its project structure has been formulated. Although it is not a must to use, I recommend better organizing your project structure. To work with MVC, know where to place your code for your UI, data, and the controller logic in your application. Therefore, it is good to know how  MVC works together to create a working web application in Ext Js.  Where to use the MVVM design pattern? Another design pattern you must be aware of is MVVM which stands for Model–View–ViewModel. Unlike MVC, the execution entry point of MVVC is the view, and it separates the development of UI using a mark-up language. The ViewModel uses the data binding technique to coordinate changes between the data model and the view. So know where to use MVC and MVVM based on what you will develop. Is implementing routing at the beginning a good idea? If you are using forward and back buttons for your website users, you will need to support routing in your application. You can use routing to track the state of your application, but it is not for storing session data. You can also create deep links to directly access a specific […]

As the web gets more technologically advanced, websites and applications have gotten more robust too. Modern-day web applications are powerful in their processing capabilities and don’t even require blazing fast internet speeds. However, there are many instances of a web product failing to achieve its deserved audience. An overwhelming number of these instances owe their failure to a poor interface. Users no longer experience the web just on their laptops or desktops. Nowadays, internet surfing has become more common on handheld devices like tablets and smartphones. Therefore, websites need to deliver a satisfactory user experience on all different kinds of devices. To achieve this, their UI needs to have a user-centric design approach. UI and UX aspects of applications have gained focus in recent times. Enterprises have begun investing in dedicated positions to build a good UI. However, tools like Sencha ExtAngular give you a library of pre-implemented UI components that you can easily integrate into your front-end. Such tools save vast amounts of time and effort while making a clean and efficient UI possible. This article explains how UI components work and why their inclusion can give your website the needed visual flair to attract a broader user base. Why Should You Take A Component-based Approach To Building Your UI? In today’s times, applications are no longer a monolithic piece of technology. Several pieces are working under the hood and handling their specific responsibilities to deliver a seamless experience. Modularity has become a rising requirement from developers and has led to the advent of technologies like microservices. With a modular approach, each component can be developed, maintained, and upgraded individually. By including UI components into your front-end, you get to enjoy a modular visual layout. Pieces can be exchanged with more robust replacements without hurting the whole arrangement. What Benefits Come With Including UI Components Into Your Website? While it may seem like a straightforward task, creating a satisfying UI can involve some of the most crucial decision-making related to the whole product. The UI and UX are often deciding factors of the product’s success, and its design carries the weight of this responsibility. Therefore, the creators of the UI are doing an essential task and need to use the best resources. You can cut much of the hassle and directly implement visually appealing features by opting for quality pre-developed UI components. Many UI components offer you the facility of customizing their color themes and textures, so you have complete control over the result. Involving the right UI components can be just the choice that takes your application’s visuals to a new level. What Should You Look For When Choosing UI Components? Pre-developed UI components are hardly a new concept. A wide range of options is available for almost all popular front-end technologies. However, you cannot just select any random UI component to go on your website if you decide to use them. You will need to ensure certain aspects to confidently involve them in your front-end and achieve your desired goals. Some of the most crucial characteristics that you should look out for when selecting your UI components are given below: Seamless Integration With Front-End While many websites may have a similar visual look, almost all aim to implement a unique front-end to stand out and have their […]

Regardless of whether you are a beginner developer or an expert, we all need help sometimes. Help can come in many ways, such as a quick answer to a query or a piece of working code that exactly does what you require. Many developers tend to look out for help when they need it and spend extra time looking for the help. However, experienced developers keep helpful resources, and tools close from the start. While development frameworks are only one example of a helpful resource that can elevate your coding experience, they are pretty popular. By utilizing frameworks in your projects, you can save essential resources like time and effort that you can spend on better coding. Additionally, most frameworks come with documentation to help you in case of any confusion. Depending on how you have structured the application, frameworks can even add to code efficiency and readability. Frameworks like Sencha ExtJS have developed a name within the developer community for its ease-of-use and quality implementations. It can serve as the perfect framework for exploring if you are new to using them for web applications. We believe ExtJS is one of the best Javascript frameworks available. This article helps you go through Sencha ExtJS, what main features it offers, and why you should gain vital experience coding with frameworks. Do You Always Need Frameworks To Build Applications? In the past, software development was a tedious and intensive process. It often required implementing standard fundamental functionalities from scratch every time developers build a product. Therefore much of their effort went into creating the basics, and the actual work started only after. Once the community realized just how counter-productive this approach was, efforts started pouring into creating packaged implementations that could be simply imported and used. Once early developers invented the first frameworks, developers and enterprises witnessed a massive increase in productivity throughout. Now teams could create applications with a much better development velocity and fewer risks. After all, frameworks allowed them to build unique new features into products since they took care of the basic ones. Nowadays, using frameworks has become a staple, especially for enterprise-level applications. You can utilize front-end development frameworks to create beautiful user interfaces, and back-end frameworks enable you to develop powerful functionalities. While you may not always need frameworks, they make things much more manageable. What Is Missing From Most JS Frameworks Currently Available? If you are up for it, there are hundreds of options available that claim to be the best JavaScript framework for you. While many of them indeed deliver on most of their promises, they often end up lacking on one front or the other. Sometimes it involves poor documentation or learning resources for users to get comfortable developing using the framework. Other times, the web applications get further complicated due to the approach which the framework takes. Some of the main concerns many users raise with frameworks include: Poor Underlying Layout: Many frameworks have a poorly designed back-end, making it harder to understand and utilize. Inadequate Learning Resources: Frameworks often don’t create the necessary learning resources for reference. Unpredictable Performance & Delivery: Frameworks often optimize when needed but may not necessarily do so every time. Not Optimized For Mobile: Developers need to be assured that their applications will be easily usable on […]

Sencha GRUI Delivers Rich and High Performance Grids For React Applications – Sencha.com Sencha Home / Blog / News / Sencha GRUI Delivers Rich and High Performance Grids For React Applications

UI components are central to any front-end project. They are the medium for effective interaction between your customer base and your app. In addition to making your app’s functionality accessible, a good UI increases user engagement. Simply put, UI components are the key to meeting your users’ expectations. Because UI is so important, your front-end developers always need to approach UI design in a way that improves user experience. One of the best practices is to make sure you are consistent when you choose UI interface elements. This is especially true when it comes to your input controls and navigation elements. By standardizing them, you make things easier for your users — a consistent UI reduces your user’s learning curve. This is because they don’t have to spend too much time learning how to navigate your site. This, in turn, results in happy and satisfied customers who are more engaged with your app. In essence, consistent UI design eliminates confusion. That is because users usually assume that the basic, universal rules that apply outside of your app or website also apply to your website. For example, when users see the grey button beside a pop-up, they automatically assume clicking it will close that pop-up. Since there are many components involved in web app development, the best way to design consistent and quick UI components and speed up the development is to use frameworks that support a component-based approach. Frameworks like Angular, React, and Vue. Unfortunately, these frameworks don’t have built-in components, so developers either have to build them from scratch or get them from the community. This is where a tool like Sencha ExtWebComponents comes in handy. What is Sencha ExtWebComponents? Sencha ExtWebComponents is an efficient framework-agnostic UI component tool. It helps front-end developers develop web applications faster. Sencha ExtWebComponents has over 115 pre-built UI components so that you don’t have to start from scratch. From charts (bar, line, area, column, etc.) as well as grids, trees, forms, and layouts, it has everything a front-end developer needs to build an interactive web app. In addition, all of the components work together seamlessly in any application. Using Sencha ExtWebComponents also reduces dependencies and ongoing maintenance. Finally, it comes with great tutorials, docs, and examples to help you get started quickly. Which Frameworks does ExtWebComponents Support? Sencha ExtWebComponents is a versatile tool. It also supports several frameworks. This means you can add both modern and classic Angular, React, and Vue components to your existing apps. Similarly, you can build a create-react-app or ExtAngular App from scratch with modern or classic components. You can also use Modern ExtWebComponents or Classic ExtWebComponents in your existing JavaScript apps. How do Sencha ExtWebComponents UI components work? Here are some of the UI components most commonly used in apps and websites: Grid Grids are great when you want to show a large amount of tabular data on the client-side of your web app. Sencha ExtWebComponents offers various Grids Th3se include the basic grid, locking grid, and grouped grid. It also comes with add-ons, like filtering, the row expander, and summary rows. Finally, you can sort your grids by ascending or descending order. The Grid component in Sencha ExtWebComponents helps organizations handle thousands of records efficiently. Below is an example of a Basic Grid created with Sencha ExtWebComponents: […]

We’re pleased to announce that Sencha Tooling 7.4 EA is now available to all Ext JS Pro and Premium customers. In this pack, we have new updates and improvements for Sencha Architect, Sencha Themer, Upgrade Adviser, Sencha Test, and Sencha Cmd. What’s New in Architect 4.3 With Architect 4.3, you can visually build apps using new Ext JS 7.4 grid features such as Grid Multi-Grouping level, Grid Filter Bar, Grouping Summary, and totals for both classic and modern toolkits, as well as build projects with Cmd 7.4. This release will enable you to quickly build sophisticated web applications using Ext JS 7.4. Enhance your Ext JS Grids by using new Ext JS 7.4 Grid Features Ext JS 7.4 delivers some amazing new capabilities for Grid in Classic and Modern toolkits. With Sencha Architect 4.3, you can visually build Ext JS apps with new configs and plugins for Grid, delivering rich Grid experiences in your applications. Migrating to Ext JS 7.4 framework The architect provides options to easily upgrade applications to Ext JS 7.4 that were built using older versions of the framework. You can upgrade to the latest version of the Ext JS framework when you right-click on ‘Library’ in the Resources section of Sencha Architect. Bug Fixes and Performance Improvements With 13+ bug fixes, this release brings a solid set of improvements that the Sencha Architect users have been waiting for.Please see the Sencha Architect 4.3 release notesArchitect 4.3 has an updated Electron (version 11.3), which delivers performance improvements and stability and Mac M1 processor support. Try and Share Your Feedback Feedback will be reviewed by the Sencha product and engineering team. We look forward to reading your comments What’s New in Themer 1.4 Sencha Themer 1.4 provides many bug fixes and improvements, which you can review here. In addition to these updates, we are also very excited to announce the following additions. Support for Ext JS 7.4.0 and Cmd 7.4 Themer now supports Ext JS 7.4.0, which includes many bug fixes and continued improvements regarding Modern and Classic toolkits. For the classic toolkit, styling support for the new Ext.grid.feature.AdvancedGrouping feature and the Ext.grid.plugin.filterbar.FilterBar plugin has been added in the form of two new components available in the left navigation bar under the Grid section. These are named “Advanced Grouping” and “Grid Filter Bar”. For the modern toolkit, styling support for the new Ext.grid.TreeGrouped grid and the Ext.grid.plugin.filterbar.FilterBar plugin has been added in the form of two new components available in the left navigation bar under the Grid section. These are named “Tree Grouped Grid” and “Grid Filter Bar” Bug Fixes and Performance Improvements Themer 1.4 has an updated Electron (version 12.0.11), which delivers performance improvements and stability. Mac M1 processor – Support for arm64 has been added for Electron. Please see the Sencha Themer 1.4 release notes. Try and Share Your Feedback Feedback will be reviewed by the Sencha product and engineering team. We look forward to reading your comments. What’s New in Sencha Test 2.4 Sencha Test 2.4.0 brings a number of enhancements and bug fixes. These are detailed in the Release Notes. Sencha Test notable features 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 Mac M1 processor – […]

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