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.
Related
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)
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 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.
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'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);