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.
Related
This might be a general question in regards to ExtJS 4.2 tabpanel forms.
On the form I have multiple dropdown comboboxes, and they're grouped into fieldset items.
The issue I'm having is when I resize the browser window, the fieldsets only resize one way: when the browser is made wider.
So for example, if I expand the browser to make it a little wider, the fieldset resizes perfectly to fit within the browser. However if I make the browser smaller (width-wise), the fieldset remains the same, and scrollbars will appear.
I have the fieldset config values set to:
xtype: 'fieldset',
title: 'Group 1',
layout: 'anchor',
defaults: { anchor: '-20' },
....
I have the same form set up on a server running extJS 4.0 and I do not have this issue, the fieldset resizes fine when the browser size is changed in any way.
Is there a new config I missed in extJS 4.2?
Disregard my question, I figured it out. I had the main layout set to 'form', and I just needed to change it to 'anchor' as well.
I have a custom field component based on Ext.form.field.Base. I got the big idea from this post. But what's bothering me with this solution is the fact, that it has a fixed height. What I would like to have instead is that the container grows in height as I add entries to the grid.
I have made an earlier attempt to make such a field but based on a Panel containing the grid and buttons. Putting this panel into a vbox layout and adding rows to the grid perfectly resized the container form panel. What did I miss to implement that the container would resize?
Here is a fiddle where you should easily see what I mean:
http://jsfiddle.net/amx9j/
I finally got it working!
See this fiddle here: http://jsfiddle.net/amx9j/3/
This configuration for the form worked:
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'anchor',
items: [{
//custom fields that change their height
}]
And in the custom field you have to use this.updateLayout() everytime you expect the height to change. In addition I had to implement the onResize method:
onResize: function(w, h) {
this.callParent(arguments);
this.grid.setWidth(w - this.getLabelWidth());
}
Important thing is, to NOT set the height of the grid ;-)
Thanks #Peter for taking the time to look into this!
I have a panel defined like so:
Ext.define('E.view.portfolio.Construction', {
extend: 'Ext.form.Panel',
xtype: 'portfolioconstruction',
closable: true,
layout: 'border',
baseCls: 'module-workspace',
// ...
});
Inside that panel, I have an items array. One of the items is another panel. Here is the definition of that panel:
{
region: 'center',
xtype: 'portfoliosettings',
itemId: 'portfolioSettings',
title: 'Portfolio Settings',
collapsible: true,
collapseDirection: 'right',
collapsedCls: 'portfolio-settings-collapsed',
flex: 10,
cls: 'module-section portfolio-settings',
frame: true,
padding: 0,
margin: 0
}
Setting width on this panel has no effect. Setting maxWidth and minWidth causes a lot of extra space to be placed around the panel. Is there any way to use the flex property while still controlling the maximum width of the panel? It's forcing me to make the decision between being oversized at high resolutions (1920 x 1080) or not fitting the content at low resolutions (1024 x 768).
Is there some kind of happy medium or am I stuck with this?
From the ExtJS documentation for the border layout:
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
So, explicitly setting a maxWidth on the panel has no effect, as it will be resized to fill the remaining space in the container, even if that is larger than the maxWidth.
The solution, then, would be to define your layout using a combination of HBox and VBox layouts rather than a border layout, so that you can use maxWidth, minWidth, and flex configs to get the layout behavior you're looking for.
So for some reason setting the region to center causes extjs to not respect certain size properties. When I set region to 'east' it allowed the component to behave as expected.
Hope this helps someone else.
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.
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);