What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property.

I attempted to set each button's width to '100%', but after consulting the Sencha documentation on button.width, it appears that width should be specified in pixels as an integer value. Trying to adjust the width using style only resulted in the button occupying the entire screen width.

I would greatly appreciate help and an explanation regarding the CSS concepts involved here.

javascripthtmlcssextjsextjs4

Answer №1

The stretchmax option is what you need to focus on.

let locationCameraItems=[];

Ext.application({
    name : 'Widget',

    launch : function() {

        let buttonArray = [];

        for (let i = 0; i < locationCameraItems.length; ++i) {
            let tabName = locationCameraItems[i].location, 
                index = i;
            let newTab = {
                xtype: 'button',
                cls: 'tab'+index,
                text: tabName,
                scale: 'medium'

            };
            buttonArray.push(newTab);
            console.log(i)
        }

        let formContainers = {
            xtype: 'container',
            flex: 4,
            layout: 'fit',
            align: 'stretch',
            html: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'
        };

        Ext.create('Ext.window.Window', {
            title: 'Bar',
            layout: 'hbox',
            items:[{
                xtype: 'container',
                items: buttonArray,
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretchmax'
                },
                autoScroll: true,
                height: 200
            }, formContainers]
        }).show();
    }
});

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

Revising HTML content when Angular array is modified

I have a code snippet below where I am updating the value of an object in the first item of an array. However, I'm struggling to find a way to "refresh" the HTML view so that the changes are immediately reflected on the browser. var dataArr ...

javascriptangularjs

The value sent from the ajax call did not reach the PHP file as expected

Here's the code I'm working with: HTML and Javascript: function getValues(){ var filter; $.ajax({ type: "POST", url: "myphpfile.PHP?action=sek", data: "id=1", async: false, suc ...

javascriptphpajax

Struggling with customizing the style of react mui-datatables version 4

Currently, I am utilizing "mui-datatables": "^4.2.2", "@mui/material": "^5.6.1", and have attempted to customize the styling in the following manner: Refer to the Customize Styling official documentation for more details // CUSTOMIZING MUI DATATABLES imp ...

javascriptreactjsmaterial-uimui-datatable

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

jqueryhtmlcssaccordion

What is the best way to navigate between elements using AJAX?

My experience in Ajax is minimal. I've managed to create two <li> elements with <a> elements inside, each linking to different HTML files. My goal is for clicking on a link to automatically load the corresponding HTML file without refreshi ...

htmljquerycssajax

Ensure that the form is validated using ngDialog openConfirm before it can be closed

I am facing an issue with a button that triggers the opening of an ngDialog.openConfirm. In this dialog, there is a form containing a textarea that must have a minimum of 20 characters. Below is a simplified version of the code: someFunction() { let ...

javascripthtmlangularjsng-dialog

Benefits of utilizing minified AngularJS versions (Exploring the advantages of angular.min.js over angular.js, along with the inclusion of angular.min.js.map)

After introducing angular.min.js into my project, I encountered a problem. http://localhost:8000/AngularProject/angular.min.js.map 404 (Not Found) angular.min.js.map:1 Upon further investigation, I discovered that including angular.min.js.map resolve ...

javascriptangularjsminifysource-maps

Is there a way to alter the appearance of an HTML element without an ID using a JavaScript function?

I have a specific goal in mind, but I'm struggling to articulate it concisely. Despite conducting extensive research, none of the suggested solutions seem applicable in my case. Objective: I aim to change the background color of a div based on the da ...

javascripthtmlcssrazor-pages

What enhancements does HTML5 provide for accessibility?

In what ways does HTML5 improve accessibility compared to HTML 4.01 or XHTML 1.0 Strict? ...

xhtmlhtmlaccessibility

What could be causing the Bootstrap Navbar toggle icon button to not display navigation items when clicked?

Bootstrap has been a reliable tool for my projects until I encountered an issue in an Angular project. The navbar toggler icon button is visible, but clicking on it does not display the navigation items. <div> <nav class="navbar navbar-ex ...

htmlcssbootstrap-4angular-ui-bootstrap

Customize the appearance of every other column in an asp gridview

Looking for help with formatting rows and columns in an ASP GridView. The rows are automatically colored alternating, and I want to make the content in every first column bold and every second column normal. I have heard about using CSS nth-child() to achi ...

c#javascriptjqueryasp.netcss

Get rid of the unnecessary vertical line that is located at the end of the string

I have come across a situation similar to the one demonstrated in this code snippet: http://plnkr.co/edit/eBjenGqgo3nbnmQ7XxF1?p=preview Currently, I am working with AngularJS 1.5.7. The directives used in my input - ( first ) textarea are the same as tho ...

javascriptangularjsregex

Moving a window in Pyqt5 using QtWebChannel

My goal is to enable the mousePressEvent and mouseMoveEvent events in order to move my app window using QtWebChannel. To achieve this, I am utilizing self.setWindowFlags(QtCore.Qt.FramelessWindowHint) to eliminate the default window flag and create a cust ...

javascriptpythonpyqt5backendqtwebchannel

Troubleshooting Problem with Helvetica Neue Font on Firefox

Recently, I decided to add the Helvetica Neue font to my system. However, upon doing so, I encountered a problem with Firefox browser where the font appeared double when using Helvetica Neue. Is there any available solution for this issue? Here is a scre ...

htmlcsswindowsfirefox

Error 404: Node.js and Express encountering issues with POST request to '/webhook' endpoint

https://i.sstatic.net/CTDCv.pnghttps://i.sstatic.net/KjPeC.pngI've encountered a peculiar issue where I keep receiving a 404 error specifically when sending a post request to '/webhook'. This error is persistent even though the rest of my po ...

javascriptnode.jsfirebaseexpressstripe-payments

Convert a single object into a JSON string representation on each line

Can you convert the following data into the desired format through stringification? Data: let result = JSON.stringify([ { "Color": "Red", "Type":"Fast" }, { "Color": "Blue&quo ...

javascriptjson

What is the best way to pass parameters in jQuery using .on()?

Hello there, I have a slight dilemma :) Could you please advise me on how to pass a parameter to an external JavaScript function using the .on method? Here is the code snippet: <script> var attachedPo = 0; $this.ready(function(){ $ ...

javascriptjquery

React Image Slider not loading pictures

Can someone help me troubleshoot why my images are not displaying in the slider on my homepage? I have set up the slider using React Slideshow Image, but the images are not showing up for some reason. I am also wondering if anyone knows of any full-screen ...

javascriptcssreactjs

Storing and updating object property values dynamically within a for...in loop in JavaScript

I am currently working on a Node application powered by express and I am looking to properly handle apostrophes within the incoming request body properties. However, I am not entirely convinced that my current approach is the most efficient solution. expo ...

javascriptnode.jsexpress

Ways to integrate a security protocol with a graphql resolver

I'm currently diving into the world of graphql and I'm facing a challenge with incorporating an authentication/authorization system into my project. I stumbled upon an example on Medium, but I'm struggling to grasp how a guard connects with ...

javascriptnode.jsreactjsexpressgraphql