I have a grid and i am trying to autosize its columns after getting data, using autosize() method of sencha. This grid's parent has border layout. autosize() method is not working for in this case.so I tried setting column size using html content.
var el = gridObj.el.dom.childNodes[me.el.dom.childElementCount - 1].childNodes[0];
if(el.childNodes.length > 0){
el = el.childNodes[el.childElementCount-1];
if(el.childNodes.length > 0){
var trows =el.childNodes[el.childElementCount - 1].childNodes;
this code gave me html 'tr's. looping on them i got some width of column and I set them to respective columns of grid. but i am unable set the sum of those column widths to the grid. this is only case if, parent of grid has border layout or fit layout. For these layouts, i have tried to set grid body width( gridObj.el.setWidth(400)),it worked fine, but i am not able to set width to header and top/bottom toolbar in the same way.
can any one help me in resizing columns for these layouts either seeting width to grid or setting width to all(grid header/toolbar/body)?
Related
Grid
I want to increase height of grid/column in react bootstrap, how do I do it? I did it by setting height property in both columns but when displayed in mobile mode, it get fluttered like app.js (body) container ends between columns
I am trying to Reduce check box width in grid but unable to reduce
There are several options:
You can reduce the width from the column's header (if it does not have AllowResize = False).
The width can be automatically adjusted by clicking the |<->| icon from the grid's toolbar.
Click on the top-left icon (which opens the hidden columns list) and then 'Reset to default) -> this will reset the column's list and also their size.
If you have access as customizer, you can set the width for this column: I would recommend 30px
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.
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
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.