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
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 version, I want to display horizontal scroll bar for grid panel. Grid-panel is binded to panel, and in turn panel is binded to Viewport. I tried using auto-scroll property of grid-panel, but it didn't worked for me. How can I achieve this.
Add: style:"overflow-y:hidden;overflow-x: scroll;", to the container of your grid
Vertical scroll bar is taking/overlay's some width from last grid column. And I have implemented the search functionality on grid, then when matched elements are not found in the grid it show's empty grid. But while displaying empty grid all the grid columns are changing the width. someone help me I am new to extjs
My scenario is, i need to disable the extjs grid panel and enable the scroll bar even when the grid is disabled. I can disable the grid using 'disabled:true' of GridPanel, but this property disables the vertical scroll bar of grid also. Here i need vertical scroll bar to be enabled so that i can see all the elements in the grid.
Any ideas?
Thanks,
jai.
Do you mean disable the grid so that rows can't be selected or edited? If so, the SelectionModel has a lock/unlock feature that may be what you are looking for.
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();