I use these two functions suspendLayouts and resumeLayouts in order to optimize large grid rendering. In particular, I use them just before and after I hide programmatically some grid columns. I do it like this:
Ext.suspendLayouts();
... a lot of code, some code may hide a lot of grid columns
Ext.resumeLayouts();
If I do not use them, browser either does not respond or responds with an alert about a long lasting script. If I use them, then it runs quite quickly, but not in all browsers. For example, in Chrome I see some columns do not get hidden, while their column titles/headers hide.
In small grids with a relatively small amount of columns, this code without suspending and resuming layouts works nice. But I need it to work in large grids.
By the way, I hide columns like this
var cols=grid.headerCt.getGridColumns()
Ext.each(cols, function (item, index, all){
... some code
if(ok) item.setVisible(false);
})
Probably, there is another better way of hiding grid columns.
Well, I found a solution. I should have used grid.suspendLayouts() and grid.resumeLayouts() instead of Ext.suspendLayouts() and Ext.resumeLayouts(). Now, it works as expected.
Ext.suspendLayouts() didn't worked for me. Grid is still very slowly redrawn.
I used grid.reconfigure():
Ext.each(grid.initialConfig.columns, function (columnCo, index, all){
... some code
if(ok) columnConfig.hidden = false;
})
grid.reconfigure(grid.store, grid.initialConfig.columns);
Related
Sorry for no code sample, I can try to get a small sample at some point. But hoping someone has seen this behavior before.
I have a DHTMLxGrid (3.0) that was created from an HTML table. The column widths are set using grid.setColumnWidthsP. When you click on the header to sort the columns, it continually expands the widths of most of the columns. If I remove the setColumnWidthsP and allow the grid to calculate the widths, it works fine. Another issue that might be tied to it, the sort image never appears. Again both items work fine if the column widths are not set by percentages.
Please, check width of your HTML table. if it has the relative sizes it may expand to the parent.
If the problem still occurs for you please, provide any kind of snippet or a complete demo, where the problem can be reconstructed.
You can also try to create a snippet here:
https://snippet.dhtmlx.com/5/
I'm working on a form that shows many our company's products in a FlowLayout, but on some categories that hold many products, performance in scrolling is noticeably affected. I switched to a List so I could leverage the performance benefits of using a renderer, but now I'm not happy with the layout since there's a lot of wasted space, especially if the device is in landscape mode.
My next thought was to use a Table, which I believe also uses renderers to optimize the display of its data; but to mimic a FlowLayout, I'd need to get the preferred width of some placeholder component, then divide the container's width by that to get the number of columns, and then fill the model with that number of columns in mind. I'd also need to change all that if the device changes orientation.
Before I go down that rabbit hole, I'm wondering if I'm making things unnecessarily complicated for myself and if there's already something that I can use to achieve that goal. So to summarize, what would be the most efficient way to display data (that would be shown as buttons) sequentially from left to right, and top to bottom?
I wouldn't use FlowLayout for anything serious although I doubt its the reason for your performance issues, those probably relate to something else. There is a performance how do I video which is a bit old but mostly still relevant: http://www.codenameone.com/how-do-i---improve-application-performance-or-track-down-performance-issues.html
In design terms flow layout is hugely problematic since the elements are not aligned properly thus producing a UI that doesn't look good when spanning multiple rows. I suggest using a grid layout which has a mode called auto fit. By using setAutoFit(true) on a grid of even 1x1 all the elements will take up all available space uniformly based on screen size and adapt with orientation changes.
Is there a standardized way to create a multiline toolbar? I'm dinamically loading the items and they are usually more than enough to make the toolbar overflow. But I don't want the overflow functionality, I just want the items to span several lines. As the items are loaded dinamically, I can not create several stacked toolbars beforehand. An observation: I switched the layout from the implicit default 'hbox' to 'auto' and the items do span several lines, but then, features like separators have undesired collateral efects, like having only one item or separator on each line, and also different looks in different browsers.
I could dinamically calculate the suposed total width of the items and divide by the max desired width of a toolbar to obtain the number of toolbars I need, but I don't know exactly at what point the items get a valid useful width.
This is an old question posted by someone else sometime ago. I'm re-asking because perhaps with the latests releases of Ext JS, they shiped 'undocumentedly' the sooo needed layout solution for this issue.
Thanks!
I don't think there is an out of box component that can do all of the things you want.
The default toolbar layout of HBox just places everything horizontally spaced.
If you know that you need more space you can always put in a container with whatever layout you want for it's items. You can get creative and nest all kinds of layouts.
Personally I think this would end up looking ugly. Perhaps there is a better solution with an alternative approach to your design needs.
I have a grid and I would like to automatically resize the columns. I'm running into inconsistencies when using different parameter values for PerformAutoResize(). When passing in the values below, where the true means include column headers:
PerformAutoResize(PerformAutoSizeType.VisibleRows, true);
some columns will be resized based solely on the header, while others will resize properly based on both the header and the row values.
However, if I hardcode in a value:
PerformAutoResize(20);
It works fine for every column.
Why is this?
UPDATE
Through some trial and error I've come to the conclusion that I think the issue is that I bring in the data and then have it auto-sort by a certain row. When using a hard coded value, it appears to auto-size the columns after that initial auto-sort, whereas when I use PerformAutoSizeType.VisibleRows it appears to auto-size the columns before the initial auto-sort.
Does PerformAutoResize(PerformAutoSizeType.AllRowsInBand, true); give you the results that you are looking for?
If so then is it possible that when you make the call that the row that you want to size the grid by isn't visible?
I have a Silverlight datagrid with custom code that allows for +/- buttons on the lefthand side and can display a table with a tree structure. The +/- buttons are bound to a IsExpanded property on my ViewModelRows, as I call them. The visibility of rows is bound to an IsVisible property on the ViewModelRows which is determined based on whether or not all of the parent rows are expanded. Straightforward enough.
This code works fine in that if I scroll up and down the grid with PageUp/PageDown or the arrow keys, all the right rows are hidden and everything has the right structure and I can play with the +/- buttons to my hearts content. However, the vertical scroll bar on the right hand side, although it starts off the correct size and it scrolls through the rows smoothly, when I collapse rows and then re-expand them, doesn't go back to its correct size. The scrollbar can still usually be moved around to scroll through the whole collection, but because it is too big, once the bar moves to the bottom, there are still more rows to go through and it sort of jerkily shoots all the way down to the bottom or sometimes fails to scroll at all. This is pretty hard to describe so I included a screenshot with the black lines drawn on to show the difference in scrollbar length even though the two grids have the same number of rows expanded.
I think this might be a bug related to the way the Datagrid does virtualization of rows. It seems to me like it isn't properly keeping track of how tall each row is supposed to be when expansion states change. Is there a way to programmatically "poke" (read hack) it to recalculate its scrollbar size on LoadingRow or something ugly like that? I'd include a code sample but there's 2 c# files and 1 xaml file so I wanted to see if anyone else has heard of this sort of issue before I try to make it reproducible in a self-contained way. Once again, scrolling with the arrow keys works fine so I'm pretty sure the underlying logic and binding is working, there's just some issue with the row height not being calculated properly.
Since I'm a new user, it won't let me use image tags so here's the link to a picture of the problem:
http://img210.imageshack.us/img210/8760/messedupscrollbars.png
This is a known issue according to what I read today (and is apparently still an issue in the as-yet-unreleased Silverlight 4):
http://forums.silverlight.net/forums/p/153997/343790.aspx