Hey, i need to be able to scroll my ExtJS grid to the current selection but have no idea how to do this. I came across a reference in a forum to an ensureVisible method but can find no information. Can anyone make any suggestions?
Thanks
This also seems to work:
grid.getView().focusRow(rowIdx);
Unfortunately ensureVisible() was removed from ExtJS 4. The most straight-forward solution I found is to use scrollIntoView(). In my case, this was after selecting the row based on a value I loaded.
var rowIndex = store.find('fieldName', value);
grid.getSelectionModel().select(rowIndex);
Ext.fly(grid.getView().getNode(rowIndex)).scrollIntoView();
This will show the selected row at the bottom of the grid. More work would need to be done to have it at the top or middle of the grid.
This also seems to work:
grid.getView().getRow(rowIdx).scrollIntoView();
Worked for me on ExtJS 6, even with bufferedRenderer turned on.
var record = grid.getSelectionModel().selected.getRange()[0];
grid.getView().focusRow(record);
Sorry, I'm being really dumb. I just tried ensureVisible and it works fine.
This also seems to work
grid.getView().getNode(rowIndex).scrollIntoViewIfNeeded();
In case of ExtJs 4.X No need to use Ext.fly
To save you all a lot of hair pulling, you should know that the solutions in this thread for scrolling into view will not work if grid bufferedRenderer is turned on.
It is my understanding that in Ext JS 5, bufferedRenderer is turned on by default.
It took me a couple hours before I realized this.
grid.getView().getNode(rowIndex) will return NULL if the indexed row is outside the buffered rows.
In 4.2 at least, using scrollIntoViewIfNeeded fails if you're outside of the buffered range in a bufferedRenderer. The bufferedRenderer has a handy scrollTo method to help with this task though:
grid.getView().bufferedRenderer.scrollTo(index, true);
Scrolls to and optionlly selects the specified row index in the total dataset.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.plugin.BufferedRenderer-method-scrollTo
Related
In order to use the browser level scroll instead of grid level scroll I made domLayout = 'autoHeight' which actually did what I wanted but it is crashing the browser is there any solution to this, I searched for this but didn't find any solution, if anyone have solution for this even a reference link would be helpful.
If you do this, you are getting rid of row virtualization, so you are actually loading as many rows you are passing at once, note that this is not an ag-grid limitation, this is just the fact that you are passing too much data and running out of memory
If you have too much data, in ag-grid you are going to have either pagination or scroll, so that the rows are virtualized and then you don't crash the browser
Hope this helps
I am using Sencha touch grid and I am facing one issue in the development.
The issue is, if I reorder the columns of the grid using ViewOption plugin, the SummaryRow values get disappered. How do I retain the summary row values after Column reordering?
I am using Sencha touch 2.3.x
Thanks in advance!
I was reading the sources and I don't think Grid is finished.
What I found is the ViewOptions.onColumnReorder apparently only change the DOM elements order and not the store order. And reading the SummaryRow.updateGrid I didn't find any bind with both. SummaryRow only bind with store and add/remove/etc columns (not reorder).
I can be wrong, I didnt try grid yet. But I guess your best shot is try to force the SummaryRow.doUpdateSummary after the onColumnReorder.
Im using Extjs 4.1 with a gridpanel. Now I want to get a row by id/index to just hide it (not filter).
I tried that (it says there is no method getRow):
gridpanel.getView().getRow( 0 );
What is the correct way now?
I know gridview has getRow, so why cant I use it?
Edit: there seems to be no such method in 4.
Since ExtJS 4.1.3 no longer returns a GridView you have to work around this.
Take a look at:
Sencha Forum --> Getting gridview row element
In my opinion its a ugly solution, but it's not getting alot of attention..
I have googled, searched forums and stack exchange but nothing seems to work for me. I am running extJS 3.2.1.
Basically I have a gridpanel control which has items that are greyed out as they are completed but the vertical view pane is only about 200 px while the list can grow quite large leaving users to scroll down each time I do a store.reload()
I have discovered I can manually move the next item in the list by calling:
grid.getView().getRow(15).scrollIntoView();
I cannot use selectRow() because I have enabled the checkboxes instead of row selection.
Anyway the above code works great only I cannot determine "where" to call it. I have tried capturing the store.load event as well as the grid.afterrender and neither seem to work.
Any ideas?
If you go to the source of store.reload(); you can see it calls the the load method.
http://docs.sencha.com/ext-js/3-4/source/Store.html#Ext-data-Store-method-reload
So you really should be hooking the load event.
Something like
store.on('load',function(){
grid.getView().getRow(15).scrollIntoView();
})
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.CellSelectionModel-method-select
is the cell selection model equivalent btw ( of row select ).
I'm using an ItemSelector with two lists like the second one from this demo:
http://dev.sencha.com/deploy/dev/examples/multiselect/multiselect-demo.html
I have around 600 items in my first list and the performance when I drag the scrollbars is unacceptable in Firefox 3.x. For some reason, IE7 is not a problem. Are there any optimizations than can be done so scrolling will be faster?
[Update]
Seems like the problem occurs when the widget is placed in a xtype: 'fieldset'
The problem goes away once the widget is moved out of the fieldset.
did you try disabling firebug ?
In the demo I can't see any events firing on scrolling up and down.
Possibly you have some set up in yours.
You could possibly override the renderer of the list to use fewer elements, it's currently three per item. Not holding out a huge amount of hope on that front however.
Your best solution is likely to find a way to not have 600 items displayed on the page at a time.