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.
Related
My extjs version is 6.0+; The original layout of panel used to be 'hbox'. Now I want to change it to 'VBox'.
What shall I do?
Since you are using hbox you can change it to vbox layout chaging the vertical value of its layout configuration using setLayout() method, eg:
let myPanel = Ext.getCmp('myPanelId'); // get the reference of the panel you want to modify
myPanel.setLayout({
vertical: true
})
Sadly you can't change the type of your layout dynamically. You must instead recreate your component and change its layout from there:
Ext.create('My.Panel', {
layout: 'fit'
})
See the example
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 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.
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);