Improving the Performance of DisplayField Binding in ExtJS 5

When I trigger a window to create a new item, there is a noticeable lag when passing in the record for the bound fields. The record is essentially a blank one with default values provided by the framework. In this demo, there are 3 buttons:

  • The first button creates the dialog with the new record, causing the most significant lag.
  • The second button creates the dialog without any record, resulting in barely noticeable lag during field updates.
  • The third button uses the passed-in record to populate the field values through the form, with lag comparable to the second button.

While performance improvements have been made in nightly builds for Ext JS 5 and 6, I am unable to upgrade at this time as version 5.1.3 is not available yet. So my question is - what am I doing wrong? Is there a way to address this issue without resorting to using the form entirely? I prefer to maintain the binding functionality since table values will be changing dynamically.

After some research, I found this thread on Stack Overflow, which suggests that replacing displayfields with textfields can improve performance. However, I'm hesitant to make this change due to semantic reasons.

Ext.define('HeaderView', {
 // Same code as before
});

// Additional definitions

Answer №1

A different approach that I devised was inspired by this particular discussion. I built upon the existing CSS styles, removing borders, cursor, and more. While it may not be perfect, it certainly accomplishes the task at hand.

Ext.define('CustomDisplayField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.customDisplayField',
    readOnly: true,
    tabIndex: -1,
    componentCls: 'custom-display-field'
});

.custom-display-field .x-form-trigger-wrap {
    border: none;
}

.custom-display-field input {
    text-shadow: 0 0 0 black; /* displays text without cursor */
    color: transparent; /* hides blinking cursor */
    cursor: default;
    background-color: transparent;
    text-align: right;
}

Answer №2

One of the developers at Sencha recommended this as a possible resolution:

Ext.define('Bar', {
    override: 'Ext.util.Scheduler',

    update: function() {
        Ext.suspendLayouts();
        this.callParent();
        Ext.resumeLayouts(true);
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conquering cross-origin resource sharing (CORS) using XMLHttpRequest without relying on JSONP

Appreciate your time in reading this inquiry! For the past few days, I've been grappling with an AJAX request issue. Despite scouring through numerous answers on Stack Overflow, I'm still unable to find a resolution. Any assistance would be grea ...

Looking for a JavaScript function that will enable the acceptance of commas and spaces

How can I modify this integer validation function to allow for commas and spaces to be entered during the keydown event? function intValidate(event) { if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || even ...

What is the process for retrieving the value of the 2nd td by clicking on the checkbox in the 1st td with JavaScript

When I click on "in", I am looking to retrieve the value of "out". This can be easily understood by referring to the image below: The timesheet displayed is generated using an array. All the data is stored in the array and needs to be presented in a table ...

Displaying an HTML button above JavaScript code

Hello, I am currently working on a project that involves displaying the Earth and I am in need of assistance with positioning some buttons on the screen. Currently, I am facing an issue where the buttons appear either above or below the JavaScript code. I ...

How can we manually trigger $(document).ready() from within the ready callback of head.js using jQuery?

I am in search of ways to enhance the loading speed of a web application, particularly one that encompasses numerous javascript files on every HTML page. My plan is to experiment with head.js on a specific page to observe if it has a positive impact on loa ...

Node.js equivalent of PHP's SimpleXMLParser

One of the most user-friendly XML reading and writing APIs I've come across is PHP's SimpleXMLElement. For instance, to generate a DOM for the following XML code: <root> <foo> <bar baz="goo"> moo ...

Before you start interactivity in three.js, you will be presented with a classic

Recently, I incorporated a 3D WebGL viewer into my website, but I encountered a minor problem. Although everything functions properly and I am able to manipulate the object, there is a brief moment of a black screen upon loading the page before moving the ...

Using useState props in React Native navigation screens with React Navigation

I'm currently working on my first React Native app with react navigation after previously having a background in web react development. In the past, I typically used useState for managing state. For instance, rendering a list of components based on d ...

The system does not acknowledge 'CI' as a command that can be used internally or externally, functioning program, or batch file

Every time I attempt to execute npm run build in my React project, a persistent error keeps popping up: 'CI' is not recognized as an internal or external command, operable program or batch file. I have exhausted all troubleshooting steps - fro ...

Issue with Videogular: hh:mm:ss Date filter not functioning properly

I am currently working on integrating Videogular into my audio player application. Below are the settings provided in the example code on this particular page: <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display> ...

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Working on my project using expressjs with the latest typescript definition file and typescript 2.3.4 from https://github.com/DefinitelyTyped/DefinitelyTyped. I've set up a router and want to access it from a subpath as per the official 4.x documentat ...

Unable to include property in Mongoose find query object

After retrieving an object from the MongoDB database, I want to include an additional property before sending it as a response to the frontend using Express. obj = collection.find({}); obj[0].extra_property = "value"; res.send(obj); I am aware t ...

Override existing Keywords (change false to true)

Are there any ways to overwrite reserved words? It's not something I would typically consider, but it has sparked my curiosity. Is it feasible to set false = true in JavaScript? I've come across instances on different websites where individuals ...

Display the two values of an object pair using ng-repeat in AngularJS

I have an array of objects structured like this: myCtrl.siteNameLabels = myCtrl.actual.map(function (value, index) { return { actualSite: { actualSiteName : value, actualSiteData: myCtrl.tableData[index] }, ...

JavaScript objects and AJAX versus ASP MVC3 Model: A comparison of client-side and server

As someone who is still learning about MVC, I find myself a bit unsure about the best way to integrate MVC models with JavaScript objects and AJAX. For instance, in one of my applications, I have a calendar that displays user events stored in a database. ...

Generate a revised object from a function and return it to the caller

What is the most efficient way to update and return a new object from a function? I came up with this function: export const addItemToCart = (currentCart, item) => { const { name, ...otherProps } = item; // if the item is already in the cart if ...

Access the elements within arrays without using the square brackets

I am trying to access data from a list, but I am having trouble using square brackets []. The getTalonPaie function calls the get method from the HttpClient service and returns an observable with multiple values. However, when I try to store these values i ...

Guide on how to modify the color of a single row within a table with just a click

My table structure is as follows: <table> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr> ...

Ways to validate an element in an Array using Cypress dynamically

I have a question regarding the dynamic verification of Array elements. For my project, I need to suggest a price that will increase over time, and I require a script that can verify these elements dynamically. In the screenshot provided, you can see what ...

Refreshing the identification of a button

I have been working on updating an ID with a value from another button. Here is my current progress: $('.viewemployment').on('click', function(e){ var url = '<?php echo Config::get('URL'); ?>dashboard/employmen ...