So I have the following window.
var myWindow = Ext.create("Ext.window.Window", {
width : 600,
title : "Window",
draggable : true,
border : false,
resizable : true,
autoScroll : true,
layout : "fit",
items : form,
modal : true
};
And this is my form:
var form= Ext.create("Ext.form.Panel", {
border : false,
frame : true,
items : items,
fbar : buttons
});
There's a lot of things that are hidden and show if some things are clicked. This causes the size of the form to change regularly. At first this is no problem, the window always resizes itself to fit the form. But if I close or resize the window, the window no longer fits the form. It is as layout : 'fit' doesn't work anymore after close/resize.
Any ideas?
Any help appreciated.
Once you resize a panel, width and height are FIXED. Every time the layout has to be recalculated it verifies if width and height are fixed or not in order to determinate if width and height should be recalculted or not.
This makes sense because you cannot have both (auto fit and custom size) at the same time. What you can do is set width and height to undefined and call doLayout() after you show new content.
Related
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
The requirements are, the contents of the grid should never be truncated at all. The whole grid should be sized to meet the width of the data, possibly requiring a horizontal scroll bar on the window.
Is this possible?
Ext JS 4.2
This was my final solution:
Ext.define('App.view.patient.MyPanel', {
autoScroll : true,
columnLines : true,
extend : 'App.grid.Panel',
width : 500,
height : 500,
store : 'App.store.MyPanel',
initComponent : function() {
// [...]
// After store data is loaded, resize columns to fit contents
var store = Ext.data.StoreManager.lookup(me.store);
store.on('load', function(store, records, options) {
Ext.each(me.columns, function(column) {
// Resize to contents and get new width
column.autoSize();
var width = column.getWidth();
// The autoSize doesn't take config option "columnLines: true"
// into consideration so buffer it. Bug described here:
// http://www.sencha.com/forum/showthread.php?264068
width = width + 3;
// No need to go too crazy
width = Math.min(width, 400);
column.setWidth(width);
});
});
me.callParent(arguments);
}
});
Using Ext JS 4.0.2, I'm trying to open a window that automatically sizes itself big enough to fit its content, until it hits a height limit, at which point it stops getting bigger and shows a scroll bar.
Here's what I'm doing
Ext.create('widget.window', {
maxHeight: 300,
width: 250,
html: someReallyBigContent,
autoScroll: true,
autoShow: true
});
When the window is first rendered, it's sized big enough for the really big content--bigger than the maxHeight should allow. If I attempt to resize it, then snaps down to the maxHeight of 300px.
How do I constrain the window to its maxHeight when it's initially rendered?
I have exactly the same problem and for now I'm doing a litle dirty hack :)
this.on('afterrender', function() {
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}, this);
Depending on the content of the window, you must use the afterlayout event. Instead of using this.maxHeight, to use the whole viewport, use Ext.getBody().getViewSize().height or in vanilla JS use window.innerHeight.
This version will work even if the windows contains other components and not only huge html:
listeners: {afterlayout: function() {
var height = Ext.getBody().getViewSize().height;
if (this.getHeight() > height) {
this.setHeight(height);
}
this.center();
}}
This can be better :
bodyStyle: { maxHeight: '100px' }, autoScroll: true,
I don't see an out-of-the-box way to do this. However, you might try this approach:
Place the contents of the window into a container inside the window (i.e. make someReallyBigContent be inside a container.) On afterrender, get the height of that inner container and then proceed to set the height of the outer window based on that.
How I ended up displaying a window with an unknown amount of fields on a form (constrain = body.el):
prefForm.itemId = 'prefForm';
win = Ext.create('Ext.window.Window', {
layout : {
type : 'vbox',
align : 'center'
},
buttons : buttons,
maxHeight : constrain.dom.clientHeight - 50,
title : title,
items : prefForm,
listeners : {
afterrender : {
fn : function(win) {
var f = win.down('#prefForm');
f.doLayout();
var h = f.body.dom.scrollHeight;
if (f.getHeight() > h)
h = f.getHeight();
win.setHeight(h + 61);
win.center();
},
single : true
}
}
});
You can add this config on your window
maximizable: true
if you want you could programmatically 'click' that button :)
Now I see what you are trying to do. I think the only thing missing from your config is the height parameter. Set it to the same number as maxheight. That should do it, you won't need to call setHeight().
This is just like Ivan Novakov answer, except I prefer it when you override the onRender class for these types of classes.
This is for a couple of reasons. Removes an additional event listener, and in the case you have multiple things that need to occur at afterrender time. You can control the synchronization of these tasks.
onRender: function(ct,pos) {
//Call superclass
this.callParent(arguments);
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}
I had the little bit different problem. In my case ExtJS code there inside the HTML popup windows. And I had to achieve:
change the size of panel when we change the size of popup windows.
Ivan Novakov's solution worked for me.
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 20;
var height = Ext.getBody().getViewSize().height - 20;
myPanel.setSize(width, height);
});
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).
I have a window with a grid in it, i want to open the window collapsed. but even if i give collapsed:true it dont seem to work...here is my code
var gridWindow = new Ext.Window({
title : title,
iconCls:'diagramIcon',
id :id ,
layout:'fit',
itemId:nodeId,
plain:true,
collapsible:true,
collapsed:true,
shadow:false,
constrain:true,
animCollapse:true,
closeAction:'close',
expandable:true,
items:[schemaGrid(nodeId,id)],
height: height,
width: width
})
can some one help.....
You need to set expandOnShow property as well. Add
expandOnShow: false,
to your window configurations. Alternatively you can also use the APIs. Display the grid window by:
gridWindow.show().collapse(false);
This will ensure that the window is collapsed when it is displayed.