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);
Related
version : extjs-5.0
ExtJs grid has a property reserveScrollbar which reserves space for scroll bar. I've a window with layout : 'absolute' which is the container for grid.
Now the problem is, the grid doesn't reserve space for scroll bar. Many forum say the container should use layout:'fit' to make it work. However I want it to be layout : 'absolute' only.
I set exact width and height for the grid and for its columns. I expect grid to reserve space from its width.(Leaving this to Sencha).
Is there any fix for this?
You could place the grid inside a container or panel that has layout: 'fit'. The container can then be within a window that has layout: 'absolute'. You can then set the height and width for the container instead of the grid.
See example fiddle here.
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.
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 migrating an application from ExtJS 3.x to v4 and have been having some troubles with the TabPanel's now that the "autoHeight" property has been removed. I know that if you do not explicitly define a height for the panel it is assumed to be "auto height", but that is only true to a degree.
In ExtJS4, a tab panel with no height set will still have inline css height values set on the tab panel's containing divs, and those heights are calculated from the initial height of each tab item's content. And yes, if you update the height of any child components of the tab items, the height of the tab will be recalculated to fit it, or if the tab contains raw HTML and the tab's update() method is used to change that content, its height again, will be adjusted to fit.
Where the issue is, in my application anyway, is that I update the raw HTML content of those tab's using methods other than those in ExtJS's framework, such as jQuery.html(). Since the tab panel is not being notified of this change to the content, it does not recalculate the height value of the tab.
To get around this all I want to do is ensure that the tab panel's containing elements always are set to height:auto when rendered, re-rendered, or anything else. I'm assuming to accomplish this I would need to extend the TabPanel, but i don not know where to start as far as what methods to override, ect. Any thoughts?
This is what I ended up doing. It's definitely not ideal, pretty hacky but it seems to work ok. Maybe someone will better see what I'm try to accomplish now, and can come up with a better implementation :-)
Ext.define('Ext.tab.AutoHeightPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.autoheighttabs',
constructor: function(cnfg){
this.callParent(arguments);
this.initConfig(cnfg);
this.on('afterlayout', this.forceAutoHeight, this);
this.on('afterrender', this.forceAutoHeight, this);
this.on('resize', this.forceAutoHeight, this);
},
forceAutoHeight: function(){
this.getEl().applyStyles({height : 'auto', overflow : 'visible'});
this.items.each(function(item, idx, len) {
if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'});
});
}
});
You may want to add a 'margin-bottom' value to the style config of your tab panel to prevent content from butting up against the bottom of the panel.
The catchy part is making ExtJS aware that the component is updated. You need to basically, recalculate the component layout. You can use the method doLayout( ) available with the Panel class. By calling this, you are forcefully asking to the layout to be recalculated and refreshed. I think this should help you out.