I have a tree panel and am trying to do an animated scroll to certain locations. I'm doing something like this:
myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/);
The view scrolls to the correct location, but the "slider" in the scroll bar doesn't move. Any ideas why?
Some additional info: if I do the following instead, the scrollbar slider moves correctly (but of course scroll() doesn't support animation--I'd prefer to use .scrollTo() so the user can see the scrolling):
myTreePanel.getView().getEl().scroll('down', yDiff);
Thanks for any help/advice!
#MoleculeMan's suggestion of disabling the custom scrollbars (which ExtJS uses in 4.0.x but not in 4.1) does work. After doing this you can call myTreePanel.getView().getEl().scrollTo('top', yCoord, true) and everything works as expected: scrolling is animated and the scrollbar moves. The only problem is that it seems to break the ability for the view to scroll if you use the up/down arrow keys to move through the tree.
It's not very elegant, but the work-around I'm going to use is this:
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
myTreePanel.setScrollTop(yCoord);
}, 300);
This has the cosmetic disadvantage of the scroll bar "jumping" into place instead of smoothly moving with the animation, but the benefit of not breaking the up/down key scrolling. Also, because it doesn't involve changing config params or overriding the tree view's style, I'm assuming it will still work once we upgrade to ExtJS 4.1 (i.e., the timer call to setScrollTop() will be unnecessary but shouldn't break anything).
Note that calling setScrollTop() moves the scrollbar, but also causes the view to "jump" to that position. You therefore need to ensure that the timer doesn't fire until after the animation finishes. I'm actually using some custom code to poll every 10ms and see if the destination row is visible, then calling setScrollTop(), instead of using a timer that always waits for some hard-coded amount of time:
var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
clearInterval(timerId);
myTreePanel.setScrollTop(yCoord);
}
}, 10);
The isTreeElementWithinVisibleArea() function just checks to see if element's current Y coordinate (absolute) is between the top and bottom of the tree view box.
Not surprising. They use their own scrollbar. The correct code would be:
myTreePanel.verticalScroller.setScrollTop(yCoord);
However, it doesn't support animation either. So I recommend to get rid of custom scrollbar as I've described here and use your original code.
Related
I have a 3d scene built with react threefibre and I'm able to zoom in and out with both mousewheel and a DOM eleemnt zoombar in this scene.
the demo of the scene can be seen here:
https://codesandbox.io/s/zooming-using-multiple-inputs-lub391
right now, when you zoom with mousewheel, zoombar stays the same, but I want the it change dependant on the mousewheel.
note that I don't want to use mouse wheel event because I may have more sources that also change the zoom and I want the zoombar to be dependant on them too. so the proper way is to add an event listener on camera movement. I wasn't able to do that because whatever I do makes an endless loop.
Perhaps you could use an EventListener on the identified Canvas that listens for mousewheel events like so:
useEffect(() => {
document.getElementById('map-canvas')?.addEventListener('mousewheel', onMouseWheel, false)
return () => {
document.getElementById('map-canvas')?.removeEventListener('mousewheel', onMouseWheel, false)
}
}, [])
return (
<Canvas id="map-canvas"></Canvas>
)
The onMouseWheel function adds the desired value to the previously created context.
I have a list of contacts.
If the user scrolled down to "Simon" and then resized the window, the scroll position jumps to the top (equal to 0) and i want it to stay at the same position.
I tryied saving the scroll position to the state using onScroll like this:
this.savePosition(params.scrollTop);
and then on window resize event to read the position from the state and scroll to there like this:
this.ref.current.scrollToPosition(this.state.scrollPosition);
but the problem is, the resize event causes onScroll to happen and onResize the state is always getting updated to 0 so my state is worth nothing.
How can i get this to work?
Solved.
Instead of scrolling to position via resize event, i do it via scrollTop like this: scrollTop={this.state.scrollPosition}
i have created a plunker
So, i have onResize event, and i think it a buggy, you can see timeout on componentDidMount what pushed new items to state, after 2s please scroll to bottom and try resize page, you will see blink on first time, and normal resize behavior after,
so what correct way to fix this blink or clear cache after resize?
When I open the item-accordion I have used the animation .But the item-accordion has the image that is wrap in the multiple row using display flex property of the CSS3. Whenever I open the accordion the extra content is displayed on the right during transition.So can anyone suggest what can be done to solve it?And this happens when width of the content is small
Another problem is i have used the animate-repeat animation to delete the item.But when i open the item-accordion the animation is applied to them also hence animating the image as a list.
.list .item-accordion {
-webkit-transition:0.09s all linear ;
transition: 0.09s all linear;
}
This is the animation I am using.
The demo of the code is over here:
http://plnkr.co/edit/FnQVCYrSGOlpk5wNxAZ6?p=preview
I have had similar issues when having to meet complex animation requirements. I have used greensock for more complex animations but that doesn't seem to be needed here. The general concept is that you are going to want to animate something but change/alter the properties before and after the animation has completed. You are going to have to be using a few callback promises to run additional animation after the first part of the animation has completed or do some manual calculations and adjust properties before starting or ending.
Angular Animate
Ionic Animate
It seems like ionic is allowing for onStart and onEnd callbacks. I would hide or force certain properties onStart and reset them onEnd so that you can get around what you are trying to work with. If you are not wanting to work with a fixed width or height you are going to have to grab window/screen size and so some basic calculations based on that. So you would get your window size set the size based on the window for the animation then reset back to auto when completed.
I have a toolbar inside a simple container. They get rendered on a window's div. When I resize the window the toolbar remains stationary. If the window gets smaller the toolbar starts disappearing (overflowing outside). If the window gets bigger the toolbar stays in its position instead of trying to remain to the far right where it started. I've tried the resize and enable overflow configs but nothing seems to work. I'm thinking that its positioning through the div might be the problem but I'm not sure how to test or fix that. Any ideas?
Some sample code:
var toolbar = Ext.create('MyToolbar');
var toolbarContainer = Ext.create('widget.contaienr', {renderTo: 'myDiv', items: [toolbar]});
.
.
.
<div id='myDiv'></div>
Check this function in the EXtJs docs
onWindowResize( fn, scope, [options] )
Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds), passes new viewport width and height to handlers.
Example code looks like the below(I guess you have to write it in your afterRender .(You have to add this event and then fire it.))
Adding the event in the init component looks like below
this.addEvents('setInboxTileSource');
Firing the event in the afterRender looks like below
Ext.EventManager.onWindowResize(function (w, h) {
this.fireEvent('BROWSER_WINDOW_RESIZE')
}, this, {buffer: 150});
You have to listen the event and set your width and height for your toolbar.
listeners: {
BROWSER_WINDOW_RESIZE: this.handleResize,
scope: this
}
handleResize:function(){
this.setHeight(Ext.getBody().getViewSize().height - 270);
this.setWidth(Ext.getBody().getViewSize().width- 100);
}
Hope this helps you...
Toolbars should not be configured that way. If you have a window, it should be configured this way:
Ext.create('Ext.window.Window',{
title:'some title'
,width:400
,height:300
,tbar:[{
// here come toolbar items
}]
});
For more examples see http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/menu/menus.html and other toolbar examples.