I am trying to resize windows in ExtJS 6, and they resize fine, but I would like to resize them whilst maintaining the aspect ratio, but so far after an extensive google search and trying many options, I cannot seem to find a solution.
I have a simple window with two panels in with textfield in one and a button in the other to begin with whilst I figure this out - below is a sample of the code in which I am trying to apply this to.
Ext.define('SenchaApp.view.MainView', {
extend: 'Ext.window.Window',
autoShow: true,
height: 600,
width: 600,
constrainHeader: true,
title: 'Main View',
items:[{
xtype: 'panel',
height: 200,
width: 600,
items:[{
xtype: 'displayfield',
text: 'my button'
}]
},
{
xtype: 'panel',
height: 200,
width: 600,
items:[{
xtype: 'button',
text: 'my button'
}]
}
]
});
Use the resizable config in your window which can be a config object of Ext.resizer.Resizer. The Resizer class has a preserveRatio config for exactly what you want.
resizable: {
preserveRatio: true
}
Here's a fiddle to demonstrate:
https://fiddle.sencha.com/#fiddle/11rh
Related
How to allow scrolling in extjs but only to some other component. For example, in the code below, the html component shouldn't go away from the screen.
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
scrollable: true,
items:[
{
xtype: 'datefield',
label: 'From',
},
{
xtype: 'datefield',
label: 'To',
},
{
padding: 50,
html: 'This should stick to the top',
height: 550,
},
{
xtype: 'grid',
height: 600,
scrollable: true
}
]
});
There is a few issues with your code. First, the container you add to the body is set to scrollable, set it to false if you don't want it scrolling.
Then you add it to the body element, even if it is not scrollable, its height will be the sum of its children, if that is taller than your body element, scrollbar will appear. But it is important to notice in this case what is scrolling is the body, not the component.
Then you said you want it to stick that html component on top, but what do you exactly mean by that? Make it appear above the two inputs? If you want that, add docked: 'top' to it.
Adding your container into a viewport instead of directly to body is a better approach, you can test this in sencha fiddle:
Ext.application({
name: 'Fiddle',
launch: function () {
const container = Ext.create('Ext.Container', {
scrollable: true,
items: [{
xtype: 'datefield',
label: 'From',
}, {
xtype: 'datefield',
label: 'To',
}, {
padding: 50,
html: 'This should stick to the top',
height: 550,
}, {
xtype: 'grid',
height: 600,
scrollable: true,
data: Array.from(Array(100).keys()).map(value=>({value})),
columns: [{text: 'value',dataIndex: 'value'}]
}]
});
Ext.Viewport.add(container);
}
});
Anyways, I don't really understand what are you trying to achieve, because if you set the outer component non-scrollable and put it into a component smaller than ~500px, how do you expect to see your grid? I suggest to take a
I am new to Ext.js & am having some issues scrolling a nested form on mobile devices. I have a grid panel & a form panel both inside the 'center' panel & I hide one depending on which selection was chosen in west panel. The grid section works fine (& scrolls in mobile thanks to the bufferedrenderer plug-in.) but I can't get the form to. It scrolls fine in desktop view & it even scrolls when I preview the mobile view in Chrome dev tools but when I try to use it on an actual device, there are no scroll bars & I can not drag the screen either. I've tried so many different ways but here's the gist of what I have. Any suggestions are appreciated.
Ext.define('App.view.main.Main', {
extend: 'Ext.container.Container',
plugins: ['viewport', 'responsive'],
xtype: 'app-main',
autoscroll: true,
defaults: {autoscroll: true},
overflowY: 'auto',
responsiveConfig: {
tall: {
layout: {
type: 'auto'
}
},
wide: {
layout: 'border'
}
},
items [{
xtype: 'panel',
region'north'
},{
xtype: 'panel',
region'west'
},{
xtype: 'panel',
region:'center'
autoscroll: true,
layout: 'fit',
items: [{
xtype: grid,
......
},{
xtype: 'form',
layout: 'fit',
height: '500',
autoscroll: true, //this does nothing??
overflowY: auto, //this does nothing either???
responsiveConfig: {
wide: {
layout: 'hbox'
},
tall: {
layout: 'auto'
}
},
layout: {
type: 'box',
align: 'stretch'
},
items: [{
xtype: 'textfield'
},{
xtype: 'textfield'.....
}]
}]
}]
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'
I want the following layout (the chart count in the top right is dynamic):
I tried to take a border-layout for the main container. Chart1 is region: 'west' and the rest is in region: 'center'.
In the center, I got a vbox container, with 2 containers, one for the charts (top) and one is the grid (bottom)
The Problem is now, that these 2 containers want a fixed width, or else they get a zero width...
Also I want to have all the containers to be fluid, so I can resize everything without getting empty spaces.
I read about using flex: 1 if I want some containers in a vbox to to get a 100% width, but this didn't work. It just made the 2 containers in the vbox use the same height.
Any ideas?
How about something like this (quickly drawn in the architect):
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 600,
width: 1000,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Window',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'fit'
},
items: [{
xtype: 'chart'
}]
}, {
xtype: 'container',
flex: 4,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
}]
}]
});
me.callParent(arguments);
}
});
Although that way the Flex value of the second container has to account for the amount of charts you're displaying horizontally.
Have you tried table layout? It's quite easy to create such layout with it. Example:
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
style: 'border: 1px solid red',
layout: {
type: 'table',
columns: 5,
tdAttrs: {
style: 'padding: 20px; border: 1px solid blue;'
}
},
defaults: {
bodyStyle: 'border: 1px solid red'
},
items: [
{ xtype: 'panel', html: 'Chart1', rowspan: 2 },
{ xtype: 'panel', html: 'Chart2' },
{ xtype: 'panel', html: 'Chart3' },
{ xtype: 'panel', html: 'Chart4' },
{ xtype: 'panel', html: 'Chart5' },
{ xtype: 'panel', html: 'Grid', colspan: 4 }
]
});
});
Working sample: http://jsbin.com/ojijax/1/
To have dynamic layout IMO the best solution is to use hbox and vbox layouts.
For example you can wrap charts from 2 to n into one container, let's say chartPanel - this will have hbox layout. Then wrap chartPanel and grid into another container - panel with vbox layout. Then again wrap chart1 with panel with hbox layout. Then you must set align: stretch for each box layout, and proper flex to divide screen equaly.
Working sample: http://jsfiddle.net/75T7h/
I think you are loading chart2, 3, 4 , 5 in a for loop using panel.add option of extjs (better way).
If so then keep a count of these panels (here 4) and for each panel while assigning width you give like
width:(1/countOfchrtLIst2345) * grid.getWidth(),
So whatever count comes it will divide available width between all these horizontal panels within your top vbox and allocates.
In your example it assigns
(1/4) * 200
(thinking grid has width of 200)
So we've "updgraded" to ExtJS 4.0.2a.
I'm trying to create a simple window with a fieldset that has three inputs, and hides on close (as I've done with 4.0.1).
addModWindow = Ext.create('Ext.Window',{
title: 'Title',
frame: true,
width: 500,
height: 200,
closable: true,
closeAction: 'hide',
layout: {
type: 'fit',
align: 'center'
},
defaults: {
bodyPadding: 4
},
resizable: false,
items: [{
xtype: 'fieldset',
labelWidth: 75,
title: 'Rule Values',
collapsible: false,
defaults: {
anchor: '100%'
},
width: 490,
items: [typeComboBox,ruleTextBox,notesTextArea]
}]
});
typeComboBox, ruleTextBox, notesTextArea are defined just above this block and don't seem to have any issues (as I've removed the items and still have this same problem).
When the window is shown, the window body and close box render correctly, but the window's header is now transparent and has minimal styling (font-family). I've attached the screen caps from FF4, IE8, and Chrome.
Has anyone else seen this problem and found how to get rid of the transparency? In IE8 when you move the window, you can see the correct styling of the window header, which leads me to think that the css classes aren't getting applied correctly.
In FF4:
In IE8:
IE8 Move:
In Chrome: