The method for connecting the width of a panel to the height of the viewport in Ext Js

I'm looking to automate the adjustment of a panel's height based on the viewport's height using Ext js.

Although achievable using listeners, I believe utilizing Ext js variable binding would be more efficient. However, I've encountered difficulties in making it work as expected.

In my primary view, I have set the bind config as bind: {height: 'viewportHeight'}. In the view model, I defined 

data: { viewportHeight: Ext.getViewportHeight()}
. This view model is then extended with the view model for the panel class, and I include bind: {height: 'viewportHeight'} in the view.

My understanding was that this was how bindings function in Ext js, but the value for viewportHeight remains constant at the initial viewport height and does not get updated when the window is resized, failing to resize the panel accordingly.

What am I missing regarding variable binding in Ext js?

javascriptcssextjsextjs6-classicextjs6.5

Answer №1

If you're using ExtJs, you can leverage layouts instead of binding for your design needs:

Ext.create('Ext.container.Viewport', {
    //layout: 'fit',
    layout: {
        type: 'hbox',
        align : 'stretch'
    },
    items: [{
        xtype: 'panel',
        title: "Sample Panel",
        html: "Content HTML",
        width: 200,
        margin: 5
    }, {
        xtype: 'panel',
        title: "Another Panel",
        html: "Content HTML",
        width: 400,
        margin: 5
    }]
});

https://i.sstatic.net/P4kL9.png

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

Tips for positioning the calendar icon inside the input field using Angular Material

Just beginning my journey with Angular Material and currently focusing on building a datepicker. I am looking to reposition the icon from outside of the input field to inside. After trying out various Material themes, none seem to have this specific style. ...

htmlcssangulardatepickerangular-material

"Learn how to use jQuery to retrieve a specific row from an HTML table based on equality with a certain

I have a dynamically generated table using PHP. The information in this table is related to different semesters (such as first, second, third, etc.). I want to display specific semester information when a user clicks a link from the same table without need ...

javascriptjquery

Using Javascript to extract elements from JSON objects

This is the output I receive after executing a script. { "log": { "entries": [{ "startedDateTime": "2020-12-01T08:45:30.123Z", "time": 50, "request": { "method": "GET", ...

javascriptjson

Transforming an AJAX call into a reusable function

My goal is to simplify my ajax calls by creating a function that can be reused. Although I'm unsure if I'm doing it correctly, I would like to attempt this approach. <script> $(document).ready(function(){ var reg_no=$("#reg_no").va ...

javascriptjqueryajax

Execute Jquery ajax only on the initial invocation

When I am using ajax post in jQuery to build a portion of a page, I am encountering an issue where it only runs once. Below is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

javascriptjqueryhtmlajax

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

I am currently working with angularjs and bootstrap, incorporating nested onclick events using Angular's ng-click in various HTML elements. One is located in a table header to display different sort icons and execute the sorting logic when the header ...

javascripthtmlangularjstwitter-bootstrapdom

Unraveling the Mystery of @Input and @Output Aliases in Angular 2

After researching about the @Input() and @Output() decorators, I discovered that we have the option to use an alias instead of the property name for these decorators. For example: class ProductImage { //Aliased @Input('myProduct') pro ...

javascriptangulartypescript

Error: The Mui Material Breakpoints Theme Cannot Be Located

Hello there! I'm having some trouble placing my code breakpoints, resulting in an error in the output. Can you help me? import { makeStyles } from "@material-ui/styles"; const useStyle = makeStyles((theme)=>({ LogoLg:{ display:&ap ...

javascriptreactjsmaterial-uifrontend

Invoking the HTML method from a WCF service

Currently, I am utilizing a callback in my WCF service to receive raw frames from the camera. I am currently working on developing an HTML application that will showcase these frames. However, my current approach involves using a button click event in HTM ...

javascriptjqueryajaxhtmlwcf

What is the best way for a parent process to interrupt a child_process using a command?

I'm currently in the process of working on a project that involves having the user click on an 'execute' button to trigger a child_process running in the backend to handle a time-consuming task. The code snippet for this operation is shown b ...

javascriptnode.jstypescriptchild-process

Tips for transferring a function from a Node.js server to a client

Hey everyone, I'm trying to achieve the following: On the Node server side: var fn = function(){ alert("hello"); } I am looking for a way to send this function to the client side. I am currently using AngularJS, but I am open to other solution ...

javascriptjsonangularjsnode.jsfunction

The elusive cookie in NodeJS remained just out of reach

After setting a cookie using the code below: router.get("/addCartToCookie", function(req, res) { let options = { maxAge: 1000 * 60 * 15, httpOnly: true, }; let cartData = { name: "test cookie", slug: slugify(&quo ...

javascriptnode.jsexpresscookies

Adjust the color of the active link on the page using Angular and CSS

I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to g ...

javascripthtmlcssangularjs

Tips for indicating which content to display on template literals

Utilizing template literals to showcase some fetched data, I've successfully displayed all the necessary information on the frontend. However, certain content is hidden and meant to be toggleable. Yet, I'm struggling to figure out how to link eac ...

javascripthtmlcsstemplate-literals

Typescript's forEach method allows for iterating through each element in

I am currently handling graphql data that is structured like this: "userRelations": [ { "relatedUser": { "id": 4, "firstName": "Jack", "lastName": "Miller" }, "type": "FRIEND" }, { "relatedUser": ...

javascriptreactjstypescriptreact-nativeforeach

Using Websockets in combination with AngularJS and Asp.net

While working on my application that uses AngularJS with Websocket, I encountered a specific issue. The WebSocket communication with the server works fine as users navigate through different pages in Angular. However, when a user decides to refresh the p ...

javascriptasp.netangularjswebsocket

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

cssnext.js

The surprising behavior of Rails rendering partials even when they are commented out has

I'm intrigued by how Rails 5 handles partials and if there might be a hidden problem I haven't encountered yet. On my current page, I have two partials - one that is included in the HTML itself, and another that is supposed to render inside an aj ...

javascriptjqueryruby-on-railsruby-on-rails-5partials

XPath Selector in Puppeteer version 22.x

Despite poring over the latest Puppeteer v22.x documentation on XPath, I am still struggling to grasp how to effectively utilize XPath in Puppeteer 22.x. My goal is to click on an element that contains the text 'Next'. Here's the HTML snipp ...

javascriptnode.jsweb-scrapingxpathpuppeteer

What is the best way to optimize a search for objects with extensive field arrays?

Recently, I've been working with an object schema that includes an array field to store ids for objects from a separate collection. This array has the potential to contain thousands of ids. Up until now, I have been excluding this field using .select( ...

javascriptnode.jstypescriptmongodbexpress