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.
Related
I'm using ExtJS 6 to render a responsive layout where two panels are aligned horizontally. What I want to achieve is the following:
if the window size is >= 1200px, both panels should be rendered using "hbox" layout, i.e. panel "A" should be rendered on the left hand side of panel "B". Each panel should have a width of approx. 50%
if the window size is < 1200px, both panels should be rendered using "vbox", i.e. panel "A" should be above panel "B". Each panel should have a width of 100%
This fiddle shows my current implementation. The problem here is that if the window size < 1200px, the width of each panel sticks to 50% but should be 100%.
Any help appreciated!
You have forgotten to add the plugin to the child items like so:
items: [
{
title: 'A',
width: '50%',
html: '<p>lorem ipsum</p>',
plugins: 'responsive',
responsiveConfig: {
...
You have to add the plugin to each and every component that gets a responsiveConfig.
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.
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 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);