Adjust columns sizes on ExtJS 6 dashboards in real-time

Is it possible to adjust the column widths within an Ext.dashboard.Dashboard once it has been displayed? The initial configuration sets the column widths as follows: 

columnWidths: [
    0.35,
    0.40,
    0.25
]

I would like to dynamically modify them to:

columnWidths: [
    0.5,
    0.25,
    0.25
]

Attempts to change the columnWidths property directly or using setConfig do not result in updating the dashboard. There doesn't seem to be a built-in method for "refresh" or any alternative approach. Although each individual dashboard-column has a setWidth function, this does not appear to make any difference either.

javascriptextjsextjs6

Answer №1

After exploring the API thoroughly, I wasn't able to locate any built-in feature that handles this task automatically. However, you can manually adjust the columnWidth for each child component within the dashboard and then trigger an update by calling updateLayout:

function setColumnWidths(dashboard, columnWidths){
    var i = 0;
    dashboard.items.each(function(item){
        if(item instanceof Ext.resizer.Splitter)
            return; // ignore
        item.columnWidth = columnWidths[i++] || 1;
    });
    dashboard.updateLayout();
}

» Check out this Fiddle for a practical example.

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

Steps for extracting URL parameters from AWS API Gateway and passing them to a lambda function

After successfully setting up my API gateway and connecting it to my lambda function, I specified the URL as {id} with the intention of passing this parameter into the lambda. Despite numerous attempts using both the default template and a custom one for ...

javascriptnode.jsamazon-web-servicesaws-lambdaaws-api-gateway

What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

Having trouble checking the value of an object named ReportControl. If the column type is 1, display the label "active"; otherwise, display the label "not active" on reportcomponent.html. The data for the ReportControl object is as follows: {"reportId": ...

javascripttypescriptangular7angular-directiveangular-components

Instructions for adding username/password authentication using Express ntlm

Attempting to set up username and password authentication using Express-ntlm. I've included the following code as middleware: app.use( ntlm({ domain: '<domainname>', domaincontroller: '<ldap url>', })); I haven't ...

javascriptnode.jsexpressexpress-ntlm

Is it possible for JavaScript to be cached when it is located within the body tag of an HTML document?

Currently, I am exploring the topic of How to optimize HTML rendering speed, and came across the idea that scripts in the HEAD tag can be cached. I'm curious, is it possible to cache JavaScript in the BODY tag? If not, I wonder why YUI suggests placi ...

javascripthtmlcachingprogressive-enhancement

Storing a single array from a nested array into the state of a React component

As a new enthusiast in the world of React, I could really use some guidance. Currently, I have an array stored in a state variable called projects 0:{id: 1, title: "Business Web", category: "Web Design", deleted_at: "0000-00-00 00:00:00"} 1:{id: 2, title ...

javascriptarraysreactjs

"Learn the technique of animating SVG paths with JavaScript, a step beyond traditional HTML filling

I am looking to animate SVG path elements with JavaScript instead of HTML. I have come across numerous articles discussing how to achieve this through JavaScript and jQuery by manipulating the attributes. Some helpful links I found: Fill color SVG path w ...

javascriptjqueryhtmlcsssvg

What is the best way to trigger dependent APIs when a button is clicked in a React Query application

On button click, I need to call 2 APIs where the second query depends on the result of the first query. I want to pass data from the first query to the second query and believe using "react-query" will reduce code and provide necessary states like "isFetch ...

javascriptreactjsaxiosreact-query

The Vue-cli webpack development server refuses to overlook certain selected files

I am attempting to exclude all *.html files so that the webpack devserver does not reload when those files change. Here is what my configuration looks like: const path = require('path'); module.exports = { pages: { index: ...

javascriptvue.jswebpackwebpack-dev-server

What is the most efficient way to use the $slice operator on a highly nested array in mongoose

I am currently working on slicing a deeply nested array. To illustrate, consider the following structure. I aim to slice this array for pagination purposes. {messages: [{ message: { members: [ {example: object, blah: blah}, {example2: object2, blah2: blah ...

javascriptnode.jsmongodbexpressmongoose

Nuxt: Encountered an unexpected < symbol

https://i.sstatic.net/MbM9f.png I've been working on a nuxt project where I'm currently in the process of creating a map component using Google Maps with the help of the plugin https://www.npmjs.com/package/vue2-google-maps. After installing the ...

javascriptvue.jsnuxt.js

Guide on incorporating botframework into a mobile application...?

Recently, I developed a chatbot utilizing the MS bot framework in Nodejs. To display the chatbot in an HTML format without iframes, I incorporated a React Component from the link provided at https://github.com/Microsoft/BotFramework-WebChat. At this point, ...

javascriptandroidreactjsbotframeworkchatbot

Exploring the world of form interactions in Angular: A guide to creating dynamic element communication

I have created a form using Angular, and I want to display a specific value in my input field when an element is selected from the dropdown. Additionally, since the values in the dropdown are fetched from a server, I want to show a corresponding label for ...

javascriptangular

Guide on smoothly transitioning between 2 points within a requestAnimationframe iteration

Would it be possible to acquire a library for this task, or does anyone have any suggestions for my psuedocode API? Inquiry: How can I create a function that accepts 4 parameters interpolate(start, end, time, ease) and smoothly transition between the sta ...

javascriptanimationinterpolationrequestanimationframe

Implement a feature in JavaScript that highlights the current menu item

I'm currently developing a website at and have implemented a JavaScript feature to highlight the current menu item with an arrow. The issue I'm facing is that when users scroll through the page using the scrollbar instead of clicking on the men ...

javascriptcssmenu

Utilize the power of jQuery to make an ajax request to a PHP backend, expecting a response in JSON format. Then,

Having some trouble with my jQuery code when trying to parse a JSON object returned by PHP and create a list of hyperlinks. Despite receiving the JSON object, my list turns out empty. Can anyone assist me? Below is the jQuery code snippet and the JSON resp ...

javascriptphpjqueryjsonajax

"Could you please provide me with further details on how to use sequelize

I recently started working with node js and I used sequelize-auto to generate the models. However, I encountered an error when following the guidance provided in this link https://github.com/sequelize/sequelize-auto. If you need further clarification on th ...

javascriptmysqlnode.jsexpresssequelize.js

What exactly is the purpose of the script type importmap?

Can you explain the role of <script type="importmap"> and why it has become necessary for my code to function properly? <script type="importmap"> { "imports": { "three": "http ...

javascriptimport

I am seeking a solution to this error that occurs whenever I attempt to call a function using a button

Issue " _ctx.hello is not a function TypeError: _ctx.hello is not a function at onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/di ...

javascriptvue.js

Best practices for bulk inserting sequences in Node.js using MySQL

I have a dataset ready to be inserted into a MySQL database using nodejs. Here is the code I've written: con.connect(function (err) { myArray.forEach((el)=>{ con.query(1stQuery,1stValue,(error,result)=>{ //do something with ...

javascriptmysqlnode.js

Is it possible to bind to a service variable in a controller without using $scope and utilizing the

As I delve into the world of controllerAs syntax in AngularJS, I've encountered a snag when attempting to bind a service variable. The traditional approach using `$scope.$watch` or `$scope.$on` would require injecting `$scope`, which seems counterintu ...

javascriptangularjsangularjs-scopewatchangularjs-controlleras