I have a simple Ext.ProgressBar and need to double it's height which works but didn't scale the progress image, just the outer box. I thought OK, maybee it is to small and can't scale but it has a height of >800px (sencha original images).
So how can this be done?
Here's the config
{
xtype: 'progressbar',
text: 'Some text',
border: 1,
height: 40
}
Height of progress bar is set in style definition. You can change height by changing .x-progress-bar css class. In modern browsers (eg. Chrome) all you need to do is to change height property, because background image is definied as gradient. Example:
// height of bar
.x-progress-bar {
height: 38px;
}
// height of text box
.x-progress-text {
height: 38px;
line-height: 38px;
}
Working sample: http://jsfiddle.net/D2QYN/2/
Another way is to attach handler to render event and set height of child elements which are not scaled verically. Example handler:
listeners: {
render: function(sender) {
var height = sender.bar.parent().getHeight(true); // content height
sender.bar.setStyle('height', height + 'px');
sender.textEl.setStyle('height', height + 'px');
sender.textEl.setStyle('line-height', height + 'px');
}
}
Working sample: http://jsfiddle.net/D2QYN/3/
Related
I am using react and three.js to display some 3D models in the browser. Everything works fine as long as the three.js component is the only element with visible content on the page. The three.js canvas will resize bigger and smaller just fine. You can wrap it in other containers and it still works fine. The issue starts when another element or component is added as a sibling.
I want to have a viewport with a fixed width sidebar. I'm doing this with a flexbox row container, wrapped around a sidebar component (a simple div with min-width set), and the responsive three.js component.
Resizing the window bigger works fine, the canvas fills the browser window appropriately. However, when resizing the window smaller, the canvas does not properly re-calculate it's size in relation to the available space left over by the static width sidebar, resulting in a canvas that does not fully fit in the browser and introducing scrollbars.
The canvas does shrink some, but not enough to keep it fully in the browser window. The same issue occurs vertically if a component sits above or below the three.js component. If you recompile the app while the browser window is smaller, the refreshed view will have the canvas properly resized.
Following the advice of many of the answers here on StackOverflow, the three.js react code looks something like this:
export class Viewport extends React.Component {
componentDidMount() {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
window.addEventListener("resize", this.handleWindowResize);
// setup scene
this.scene = new THREE.Scene();
//setup camera
this.camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
this.camera.position.set( 0, 5, 10 );
// setup rendering
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setClearColor('#666666');
this.renderer.setSize(width, height, false);
this.mount.appendChild(this.renderer.domElement);
// setup geo
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: '#433F81' });
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
...
}
componentWillUnmount() {
window.removeEventListener("resize", this.handleWindowResize);
this.mount.removeChild(this.renderer.domElement);
}
handleWindowResize = () => {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height, false);
};
render() {
return (
<div className="viewport" style={{display: 'flex', width: "100%", height: "100%"}} ref={(mount) => { this.mount = mount }} />
);
}
}
The styling is simple css flexbox, with the elements set to full width and height (100%), with the sidebar having a set min-width.
.flex-row-container {
display: flex;
flex-flow: row;
height: 100%;
width: 100%;
}
.sidebar {
display: block;
min-width: 250px;
background-color: var(--color-mid-gray);
margin: 3px 4px 3px 4px;
box-sizing: border-box;
border: 1px solid var(--color-mid-gray);
outline: 3px solid var(--color-mid-gray);
}
What am I missing?
So after commenting, I think I got it working how you want.
Basically,
I removed setting display:flex on the viewport, as this is a child of an element (the flex-row-container div) with display:flex, it does not need it, but does need flex:1 1 auto to set how it will display within the flexbox (which I did in the css rather than the JSX).
The problem then became that the viewport div would expand, but not contract (because it contains the canvas), so adding overflow:hidden fixed that.
After making those changes, this.mount.clientWidth would get the desired result that could then be used to set the three canvas size.
See This Fiddle.
I added rendering and animation to the example so the result could be easily seen.
Hope this helps.
You might be getting incorrect values by using element.clientWidth. Have you tried using element.getBoundingClientRect() instead?
const rect = this.mount.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
I use rowwidget to display extra data for every row in my grid, for example: panel, but when I resize my grid or when the grid have a vertical scrollbar the size of the widget (width) remains the same, Is there any way to change the width of the widget automatically?
I mean like a layout for the rowwidget plugin?
config.plugins = [{
ptype: 'rowwidget',
widget: {
xtype: 'panel',
/* I want it's width as the plugin width even when resizing the grid*/
items: [],
height: 50,
style: {
'border': 'solid 1px green'
},
bind: {
}
}
}];
the layout can remain the same you can use the width of the grid, or window, to set a relative width for the widget dynamically . there should be a function that returns the width and height after onresize event, something like window.innerWidth , good luck finding the grid body with the console then get its width,
grid = Ext.getBody().component.items.items[1].items.items[1].body;
winWidth = grid.getWidth();
I am facing problem with c3 charts sizing issue with in gridster. Can any one help me how can I make there charts to be properly auto resized according to the gridster box they are in? Please find the Plunker
I have given size in options :
size: {
height: 100,
width: 100
}
If I remove this size property the charts are going out of box. But they are too small in gridster boxes. How can I make these chart to automatically occupy the full height and width of the gridster boxes that they are in?
The options you are using:
size: {
height: 100,
width: 100
}
are setting the height and width of the svg element to 100px instead of 100%
I tried
size: {
height: '100%',
width: '100%'
}
Which will successfully set the width to 100% but somehow the height will be set to 320px
So if you add this to your css:
.c3 svg {
width: 100%;
height: 100%;
}
That will solve your sizing issue.
EDIT
Just a small change to set up an initial size and some comments added to your controller on the resize - stop event handler, where you will need to add some resizing of your charts based on the new sizes. See it here
resizable: {
enabled: true,
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
// optional callback fired when resize is started
start: function(event, $element, widget) {},
// optional callback fired when item is resized,
resize: function(event, $element, widget) {},
// optional callback fired when item is finished resizing
stop: function(event, $element, widget) {
// here should update the size according to the widget size
// widget.sizeX (* 160px) and widget.sizeY (* 160px)
// and further adjustments
}
},
I had a similar problem not long ago. What I did is use scale(), but it doesn't work on firefox.
Basically find the width when loading, and make a new scale when the user changes the screen size (or any other event like resizing your containers).
add this at the bottom of your plunker :
<script>
let width = window.innerWidth;
window.addEventListener('resize', (event) => {
let newWidth = window.innerWidth;
let ratio = newWidth / width;
let ctnr = document.getElementById('widget1');
ctnr.style.transform = "scale(" + ratio + ")";
});
</script>
That will scale widget 1. Of course you might have to play with the numbers a bit to find what works for you.
The widget will stay in place however; thus if you want it to be aligned on the left you can use in your css :
transform-origin: 0;
I hope this helps.
Use nvd3 plugin this is same as c3 plugin also this smoothly works with gridster, Please find the below link
https://krispo.github.io/angular-nvd3/#/dashboard
What is the offset configuration actually doing that makes panel 2 to show incompletely when the panel 1 is resized vertically?
Ext.onReady(function(){
var myWin = Ext.create('Ext.window.Window',{
height : 300,
width : 300,
layout : 'anchor',
border : false,
anchorSize : 400,
items : [
{
title : 'panel 1',
anchor: '-50, -150',
frame : true
},
{
title : 'panel 2',
anchor: '-10, -150', // how is this config working?
frame : true
}
]
});
myWin.show();
});
https://fiddle.sencha.com/#fiddle/64r
Thanks in advance.
from ExtJS docs...
// two values specified
anchor: '-50 -100' // render item the complete width of the container
// minus 50 pixels and
// the complete height minus 100 pixels.
// one value specified
anchor: '-50' // anchor value is assumed to be the right offset value
// bottom offset will default to 0
So possibly you're resizing the window to a size smaller than 150 (that is 300 - the specified anchor) pixels.. so "the complete height minus 150 pixels" will actually result in cropping of the item inside that container.
It would be much better to see some example of what you're trying to achieve and a fiddle of how it's working now though.
EDIT
You're setting the height of both components to be "the size of the window" minus some fixed amount (50) of pixels. If the window grows to 500 pixels "tall" then you get two panels that are 450 pixels tall. That's why the second panel always overflows the window.
It's all in the portion of docs that I posted earlier though. You may want to try some other layouts too, maybe nested layouts, for example: an anchor layout inside an hbox layout.
Ext.create("Ext.Window", ({
height : 300,
width : 300, items : [
{
title : 'Panel1',
anchor : '-50, -150',
frame : true
},
{
title : 'Panel2',
anchor : '-10, -150',
frame : true
}
]
}));
Panel1 Width = 288px - 50px = 238px
Panel1 Height = 285px - 150px = 135px
Panel2 Width = 288px - 10px = 278px
Panel2 Height = 285px - 150px = 135px
I have a panel with a "form" layout, containing several buttons. now I want to enable this panel resize according to window resizing. How can I get this done?
thanks.
Ext.EventManager.onWindowResize(function(w, h){
panel.doComponentLayout();
});
Assuming you have a Panel named 'panel' with some automatic sizing built in (e.g. height: "100%"). Otherwise, the new width and height of the window are passed into the anonymous function passed to onWindowResize().
As wrote #deniztt you should subscribe to EventManager class onWindows Resize Event.
It can be something like this:
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 160;
var height = Ext.getBody().getViewSize().height - 140;
panel.setSize(width, height);
});
Where panel is reference to your panel
You can read about it here.
You can make the panel resizable by setting the 'resizable' config option, see the docs for the various options: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html.
As far as how the form components interact you'll need to set anchor's if you want to use a form layout or switch to an hbox/vbox type of set-up with various flex settings.
You can set the size for window and set the child panel's autoHeight and autoWidth attributes true.
Another way is catching the resize event of the window and resize the child panel according to the new size values.
Thanks to Gegory and Joseph for the EventManager solution. I've done some minor changes to this solution, replacing the getBody() with a DIV and setting an initial width/height of my chart (or any other component):
<div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div>
....
Ext.onReady(function() {
var renderDiv = Ext.get('chart_div');
var chart = Ext.create('Ext.chart.Chart', {
renderTo: renderDiv,
width: renderDiv.getWidth(),
height: renderDiv.getHeight() - 50,
...
});
Ext.EventManager.onWindowResize(function () {
var height = renderDiv.getHeight() -50;
var width = renderDiv.getWidth();
chart.setSize(width, height);
});
});
autoWidth and autoHeight don't seem to work for me (Ext-JS 4.2.1).