My grid have some docked toolbars and i want to hide only grid body.
I tried to hide like this:
mygrid.body.hide();
rows disappeared but container height not changed. So instead grid rows I got empty space..
So how can I collapse and expand gridpanel body?
Try calling doLayout() and/or doComponentLayout() on grid
You can try like this:
Hide the headercontainer of the grid with hide(), if needed (this contains the grid header row)
Hide the body of the grid with hide() as you did.
Set the height of grid to appropriate value: grid.setHeight(grid_header_height + grid_toolbar_height). Plus grid_headercontainer_height to if needed.
Have you tried
mygrid.collapse();
Related
I have create a Ext.Panel with layout 'hbox', added 4 children, tree grids with the same store and want now to have a single vertical scrollbar for all of them and scroll only the content of the grids and not the headers. I searched through the containing Panel options and scrollable option will scroll the entire layout so, the optional horizontal scrollbars of the children will disappear. Can someone to give me a hint from where to start, what option/component to use to accomplish this single vertical scrollbar?
Why I put 4 tree grids in the same panel using the same store? Because the last one is a Bryntum Gantt component. The first column of the first grid should scroll horizontal when the items are too long and don't want to use ellipsis CSS property on the cells. And from time to time I need to switch the Gantt to another grid with more details. Also the second tree has only dates columns on them and have to be locked whenever gantt or other child toggles visibility.
I use ExtJS 6.0.1 Classic.
Thanks in advance
Because you want to keep the headers, you cannot use the panel scroller. Instead, you have to create mutual partnerships between the grid scrollers:
Ext.each(grids,function(grid) {
if(grid.normalGrid) grid = grid.normalGrid; // Use the normal subgrid of a grid with locked columns.
Ext.each(grids,function(partner) {
if(partner.normalGrid) partner = partner.normalGrid; // Use the normal subgrid of a grid with locked columns.
if(grid != partner) grid.getView().getScrollable().addPartner(partner.getView().getScrollable(), "y"); // "y" tells the scrollable that the partnership is only regarding y axis.
});
});
This forces them to stay in sync, as per the docs.
2,I am displaying more than 15 records in gridpanel . But only 10 records are displaying, other records are hiding below. I want to add vertical scrollbar to gridpanel, how can i achieve this.
You can use autoScroll : true config
OR
give overflow:auto css property to body of grid
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.
Normally, the expand/collapse functionality in extjs works as the panel/grid header stays in a position and the body of the panel/grid moves down/up. But I need the panel header to be in a position and on expand, the header has to move up showing the panel/grid body. On collapse, the header has to move down and come to the original position. This is just like expand and collapse in accordian layout inner panel. But I want it with a single panel. Any code samples or pointer would be very helpful.
Note: Please note that I cannot use any third party plugin..
This sample in ExtJs 4.2.1.
One way to do what you are trying to achieve is by injecting "expander" div in afterrender event of parent panel before collapsible children. This means items are at the bottom of parent body after expander div so there is space to expand them up. When children are collapsed/expanded or parent is resized, injected div gets height of parent minus children.
You can see it here: https://fiddle.sencha.com/#fiddle/44c
Edit: I don't really get 1 panel part - if you want single panel to behave like that, expander could be injected into wrapper before header and content, but than you are left with panel of same size but collapsed - the only scenario this makes sense to me is by reversing collapse of children in sample I provided
I have a dataGrid control on the page and below this grid there are some text boxes. in some conditions I dont want to display the grid on the page. For this I have used
dg.Visibilty = Visibilty.Collapse;
It will successfully hide the datagrid, which is fine, but the space that is consumned by the grid is still disply on the page, what I want is when my grid is hidden then controls will shift up automatically just like style=display:none ;
Thanks
What you are doing should work fine.
It might be that the container which contains your data grid might have some height width assigned.