ExtJS: Disable accordion animation - extjs

I've created accordion like this:
layout:'accordion',
layoutConfig:{
animate:true
}
then i add elements by add() method, then re-render it with doLayout() and set the activeItem:
navigation_panel.getComponent(1).expand(false);
i call expand() method with false parameter, but it still animates the transition, so it takes setting from main layout and ignore that i sent to expand(). How to solve this problem?

Two things happen when you expand an item in an according panel:
1. The old active item is collapsed
2. The new active item is expanded
The collapsing of the old active item is handled by the accordion layout and occurs during the "beforeexpand" event. Looking at the source code, I see that the accordion layout calls
var ai = this.activeItem;
ai.collapse(this.animate)
So, the animation of the collapse of the old active item is completely determined by the "animate" property of the accordion layout. The animation flag you pass in is ignored for these purposes. I'm guessing that if you look closely, you'll see your collapse is animated while the expand is not.
Because the animate flag is passed through explicitly, I don't see any standard, supported way to override this behavior for a single operation.
In 3.0+, you may call the documented method getLayout() before or after render to get a reference a Container's layout object. You could simply set the layout object's animate property to false while manipulating the panel, then set it back when your done. This is not documented to work but probably will based on the source.

Related

Toggle ExpansionPanel expand/collapse via ref

I am using react material-ui v4.9 in my project and have multiple ExpantionPanels.
I would like to define a ref for each and have a top level button on my page to let use user Expand All and Collapse All via one click. On that click event, I would like to use the refs for each panel and either collapse or expand them all.
Is that something that is possible?
I see that the panel has an expanded property that maybe I could set to true or false, but I think that will get out of sync if the user expand or collapses some panels. Also, some panels have the defaultExpanded property turned on as well.

MUI Masonry with Collapse in an Item Overflows the Parent Width

Let's say we use MUI Masonry and in each of the items there is a Collapse element that is expanded if it gets clicked. If you click an item that needs to be moved to another column, it moves the items outside the parent's specified width!
This CodeSandbox demonstrates the issue. The original view is like:
Now, after clicking the first item, which does not require moving, I see:
Which is what I expected, but if I click one of the items at the bottom that requires moving it, it creates a new column outside the parent's width.
At the moment dynamic height like that is not supported. See this issue.

Using collapsible panels within react-virtualized List

I've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is updated. Said attribute is used inside the react-virtualized List rowHeight() function top check whether that panel is currently expanded. Then, using a ref to my List, i call the recomputeRowHeights(index) and forceUpdateGrid() methods on saidref.
The thing is, while the List component correctly updates both the height and position of my rows, the animation isn't smooth. I mean, the bootstrap expand animation works fine, but the change in height of the expanded row happens instantly after the click event, and then the animation starts, feeling somewhat chopy.
Is there any workaround for this, or is this an upcoming/planned/in the works feature for react-virtualized?
Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention.
Here's a quick-and-dirty example of one way you may add animation: plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D

Extjs ownerCt undefined

I created a new component in my grid's listeners: beforeload, and when i called .show() on it, the debugger showed that d.ownerCt is undefined. Any suggestions?
ownerCt is set automatically by the framework as soon as a component is added to a container. It seems that you're calling show() manually indicating that your component is not part of a container hierarchy.
See ownerCt in the Ext JS documentation (here Ext JS 6 classic, but that concept hasn't changed).
This Component's owner Container (is set automatically when this
Component is added to a Container).
Important. This is not a universal upwards navigation pointer. It
indicates the Container which owns and manages this Component if any.
There are other similar relationships such as the button which
activates a menu, or the menu item which activated a submenu, or the
column header which activated the column menu.
These differences are abstracted away by the up method.
Note: to access items within the Container see itemId.

Dojo drop-down detaches when scrolling page containing FilteringSelect or ComboBox

Since the ComboBox and FilteringSelect use a 'dijitPopup' whose DOM element gets inserted just before the closing body tag (presumably to help with ensuring it appears above everything else z-index-wise) this means that if the ComboBox is contained in an element that scrolls independent of the window itself and the user opens the dropdown and then scrolls the window (or whatever containing element) using the scroll wheel, that the menu part doesn't move with the control itself.
Is there a straightforward way to ensure that the menu part of the view remains positioned correctly relative to the control itself rather than simply assuming that its starting position is ok?
EDIT: appears to be a known issue (http://bugs.dojotoolkit.org/ticket/5777). I understand why they put the dijit popup just before the closing body tag for z-index stacking and overflow clipping issues, but it seems like it's maybe not the ideal way to do things given the bug in question here and things like:
You can restrict the Dijit theme to only small portions of a page; you
do this by applying the CSS class of the theme to a block-level
element, such as a div. However, keep in mind that any popup-based
widget (or widgets that use popups, such as dijit.form.ComboButton,
dijit.form.DropDownButton, and dijit.form.Select) create and place the
DOM structure for the popup as a direct child of the body
element—which means that your theme will not be applied to the popup.
~ from http://dojotoolkit.org/documentation/tutorials/1.6/themes_buttons_textboxes/
Not sure if this is the very best solution, but here's what I came up with:
Since the widget may be programmatically added/removed, and to avoid coupling a solution with some particular surrounding markup that we can't always count on in all cases, what I did was to hook the _showResultList and _hideResultList methods of ComboBox and when the popup opens, traverse up the DOM till we reach the <html> tag, adding onscroll listeners on each ancestor.
The handler for the onscroll event is simply:
var myPos = dojo.position(this.domNode, true);
this._popupWidget.domNode.parentNode.style.top = '' + (myPos.y + myPos.h) + "px";
where this is the widget in question. I scope the handler to the widget using dojo.hitch. In the close method I remove the listeners. I have to clean up the code a bit before it's presentable, but when it's finalized I'll add it to this answer.
Note: I only show updating the y position here. Part of the cleanup is to add x position updating in case someone scrolls horizontally.
Though its old I just faced this same problem and it looks like a Dojo issue and the fix is available here https://bugs.dojotoolkit.org/changeset/30911/legacy

Resources