Which Layout would I take when I want to fit a form in a window - extjs

I have multiple forms and want to use one Window class to view them. Now it happens that all forms have a different size and I don't want to manage all of them so I thought about the 'fit' layout along with a min/max wight/height for the Window.
But that would be to easy, if I have applied dockedItems the layout messed up along with error that the layout failed. Whatever this error is supposed to tell me... But OK I googled and found out that I need to define a height and a width to make this error go away along with a new special property called: shrinkWrapDock which should tell the layout to depend on the size of content.
So again my Question
Which Layout would I take when I want to auto fit a form in a window while the window has a max-/min-size?
Edit
It don't has to be strictly a form, it is just Ext.window.Window configured with a 'fit' layout which should maintain a min / max size for itself. So a very small item within the window may have unused space while a very large one get scrolbars. All in between the min/max of the window are scalled exactly.
e.g.
// lets say we have a window configured like this
{
xtype:'window',
minHeight: 50,
maxHeight: 500,
layout: 'fit'
}
To small form -> adding a form with just one textfield.
Window uses minHeight: 50 because one field has only a height of ~40 px
Fit within min/max -> adding a form with 6 textfields.
Windows scales to size required by the form ~ 240px
To height form -> adding a form with 20 textfields
Window uses maxHeight: 500 because 20 field has a height of ~800 px

Use a panel inside window(which has fix max,min ht wdt) as parent container, use flex property for it items i.e your multiple forms
eg :
{
xtype:'panel',
itemId:'somePanelId',
layout :'fit',
items :[
{
xtype :'form',
flex : 2,
items [{..}]
},
{
xtype :'form',
flex : 3,
items [{..}]
}
}
Try different combinations of flex for each form as per each form's size. While giving flex consider as fix number say '5' here as outof i.e 2/5 size for form1 and 3/5 (three out of 5) space for form2.

Related

Render several image in div Ext.Container.Container

How can i Render several image in div EXTJS?
I'm trying to use an Ext.container.Container but i only can show one at a time.
Example on at the bottom:
Example webpage at sencha.com
You can put your images in items array of container, so they will be displayed inside the container. define flex: 1 in defaults so that it will be applied to every member of items array and in layout you'll need type: 'hbox' to sort them horizontally. You can also shrink the width by help of width property.Here's the FIDDLE (It may not show images on load, so click Run for reloading)

extjs align components in hbox and vbox

I am using the vbox layout.
I would like to make my components 'fill out' to the sides when I add them. I use the 'align' attribute with the value 'stretch' :
layout: {
type: 'vbox',
align: 'stretch'
},
..which works fine, but I would like this align/stretch behaviour to happen on just certain components. For example in the diagram below :
I would like to stretch out the text field, but have the button normal size.
Is this possible with vbox or hbox?
Unfortunately not. Nevertheless, seeing the picture you posted it seems to me that vbox is not the layout you want. VBox is good where you want to change items sizes vertically with their container or keep their ratio.
The above is good candidate for anchor layout (form's default) where you can set anchor individually on items. In this case you would set anchor:100% on the text field but not on button.

can we change flex of panel using animate()

I am trying to change flex of panel through animate().
I have three panels in hbox layout and each panel uses flex to dynamically consume space.
I am able to change height of the panel through animate but I am not able to change flex.
xtype: 'button',
id:'btn',
text: '>>',
handler : function() {
var tptp = Ext.getCmp('Third_panel');
//tptp.hide(500000000);
tptp.animate({
dynamic :true,
duration:10000,
delay:25,
easing:'elasticIn',
type:'popOut',
//from:
//{
//flex:2
//},
to: {
height: (tptp.getHeight() == 500) ? 0 : 500
//flex:1
}
});
No, the animate function does not support animating the flex.
There are still ways around this however.
You can figure out the width and x position of the containers with the desired flex and animate the width and x position using the animate function. This however will not change the content inside the panels you are animating, so this will not work well if the content isn't already fixed.
You can multiply the flex of all the panels by 100 (or any other large number) and use a setInterval to set the flex periodically until it reaches the destination flex by setting the flex property on the animating element and then calling an updateLayout() on the parent element. This however can be very slow since the layout is being updated every frame.

What does 'layout: absolute' do?

I am making a window in ExtJS, but I'm not sure about one of the properties: layout.
I have an example below of my code.
var myWindow = new Ext.Window({
height : 300,
width : 300,
layout : 'absolute'
//additional window code
}
In this case, what does the layout: 'absolute' property do?
If you are using Extjs 3+
Absolute layout inherits the anchoring of Ext.layout.AnchorLayout and adds the ability for x/y positioning using the standard x and y component config options.
AbsoluteLayout
Refer :
ext-3.3.1/docs
As specified in the Ext JS Documentation, the layout property controls how the component is arranged on the page.
As far as I know, and as far as I've read, there is no such layout as 'absolute' (Are you perhaps thinking of css instead of ExtJS?). What you might have meant is layout: anchor. An anchor layout allows you to anchor parts of a component relative to the container your component is in. In this case, you would specify the anchor layout so that child elements of the window can be anchored relative to the window.

vertical scrollbar in ExtJS GridPanel

I'm working on a project where I have a single GridPanel on a page. The panel can display any number of rows and I have the autoHeight property set, which causes the GridPanel to expand to fit the number of rows. I now want a horizontal scrollbar because on some resolutions not all columns get displayed (and I cannot reduce the number of columns).
If I set the autoHeight I have no horizontal scrollbar, if I do not set it and set a fixed height I have a horizontal scrollbar but the GridPanel obviously does not fit the number of rows....
Is there anything I can do to fix this? I can't seem to find a property that would achieve the result I need.
You will find that putting a parent container (Ext.panel.Panel or any container really) around your grid panel to be successful. If you hard code the height, width and layout (to 'fit') on the parent container, the child item (Ext.grid.Panel) will expand to fill the entire space available from it's parent container.
See pages 80 and 81 of Ext JS 4 Web Application Development Cookbook.
You can use the lazy instantiation notation for 'Ext.grid.Panel'. Meaning use 'grid' for your child container (item) xtype property.
Ext.create('Ext.panel.Panel', {
title: 'parent container',
width: 800,
height: 600,
layout: 'fit',
items: {
xtype: 'grid',
title: 'child container',
... define your grid here
},
renderTo: 'grand parent container'
});
My thought would be to set autoScroll: true on the panel.Panel that contained the grid.
This seems like an issue with your layout settings as opposed to the object properties.
Try setting the layout property of the parent container to 'fit'- can you also provide a code excerpt?
As Ergo said, this is more likely a layout problem - the GridPanel is probably higher than the panel containing it, high enough not to need a scrollbar but not fully visible, obviously. Put the GridPanel into a container with a proper layout, i.e. border layout, fit layout or card layout. Getting layout managers right is generally one of the hardest part of ExtJS-Fu.
adding
viewConfig = {
scroll:false,
style:{overflow: 'auto',overflowX: 'hidden'}
}
sometimes causes a bug with displaying 2 scrollbars. To prevent it in my case I added a listener. And then works fine.
this.on('scrollershow',function(scroller,orientation,eOpts){
if (orientation=='vertical'){
scroller.hide();
}
},this);

Resources