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.
Related
I have been working on a Bottom Tab Navigator and try to make tab bar items being highlighted with a circle shape around the icon when they are selected. I tried to set the height and width inside tabBarItemStyle, however, only height changes while width does not change. Is there something else I missed? How can I set the width so that the highlighted part is in a circle shape?
Here is a demo of the tab bar I am working on.
https://snack.expo.dev/qLi7s9qAA
The issue is because the width value is being overridden by the containers flexbox property.
A quick easy fix is to use the maxWidth property instead of width in tabBarItemStyle properties.
There's a nice article here: https://mastery.games/post/the-difference-between-width-and-flex-basis/ that explains it.
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.
fiddle here.
If there are many panels in the accordion they vertically just start bumping up against each other and can't be expanded. I would like to make the total height of the accordion the height of the headers plus the height of one panel body (expanded). And then the parent panel should just have a scrollbar to show that amount of height. This way there is always an open accordion and you can scroll down to any header and instead open that one.
Is this not possible?
If I turn the layout of GroupListView to vbox intead of accordion I then get what I want but unfortunately when you expand/collapse the panels, the animations are all messed up (doesn't work like the accordion)
In ExtJS 5.1.1, setting fill: false on the layout declaration seems to produce the desired result.
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);