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.
Related
I am using React DnD to handle dragging and dropping in a React app. I am using the touch backend. In this implementation, I am using a custom drag preview. While dragging, I hide the element that is "being dragged" by animating its max-height to 0. The custom drag preview shows as the user drags. If the user drops the element in an area that is not allowed, the item "being dragged" animates back to it's original height. This is good.
When the item is dropped, I send a redux action that reorders the list of items and puts the previously dragged element into its new location.
However, there is a moment where the dragged item flashes in its current location before the DOM updates and animates the item in its new location.
The max height animations are controlled by CSS classes that are added and removed when isDragging is true.
I have scoured the React DnD docs and examples (which are generally very thorough) and looked at some other open-source projects that have used React DnD, but cannot seem to locate the solution. I'm assuming I am missing something simple like a prop that I can pass. Essentially, I would like isDragging to stay true until the drop action is complete or be able to update a prop in either the endDrag method on the draggable target or the drop function on the droppable target.
I could use vanilla javascript to update the classList inside the endDrag method, but would prefer to use React tools if possible.
Has anyone encountered this issue?
I was able to get around this problem by fixing a known issue with Touch events stopping when a DOM node is unmounted in React.
https://github.com/yahoo/react-dnd-touch-backend/issues/31
In this solution, you create a copy of the DOM node that has the touch event attached to it so that it remains even if React unmounts the component as elements are added and removed during dragging.
I know that i require foundation/components/parbase as a sling:resourceSuperType, as Parbase allows components to inherit attributes from other components.
As an Example, i removed parbase as resourceSuperType from foundation/components/image component and the dialog was not able to load properly as seen in the Screenshot, Crop, Rotate, Clear functionality is no longer working.
I've confirmed that Ext Js library is being loaded properly for xtype 'html5SmartImage', So what extra things does foundation/components/parbase provides for this functionality ?
Parbase allows components to inherit attributes from other components.
The above statement is a bit wrong in my opinion. It doesn't allow you to inherit attributes from other components. Rather any component which defines foundation/components/parbase as it's parent would inherit the scripts of parbase.
If you look at the parbase component within AEM, you would find a servlet which renders an image, when the URL contains img selector. Additionally you may also find a script that caters to the selector scaffolding.
Thus, whenever you define parbase or any other component inheriting from parbase as the super type for your component, you are able to use the image rendering features without the need to write separate logic for the same.
Coming to your example of the image component, the html5smartimage makes a request to the resource using the request suffix (.img.png), which is when your Image rendering servlet kicks in and draws the image. Since you have removed parbase from the super type, you would receive a 404 for the request thereby showing empty panel. However, the buttons displayed as disabled is altogether a different issue. It's a bug/feature in AEM, that when the requested image is not found, further processing of the panel stops thereby rendering them disabled.
I have page with three columns,details of each of the columns are as follows(in the attached image)
![Image showing column desc for the jspx page1
The use case is :I want to display one of the jsff's in the second &one in the third column based upon the tree node selected.
The approach i used is to generate a contextual event on tree node click with payload and a subscriber for the same for second and third column ,Now while trying to use the router to render the content conditionally,i'm failing .
The router gets invoked only for the time page loads and second time the control does not even go the router ,can anyone tell me what is that I'm missing here to achieve the use case.
Jdev version :11.1.1.7.1
Thanks.
Contextual events are done in the view so once the event hit the taskflow, your router will already been evaluated and your contextual event gets passed on to the current view.
It doesn't make the TF to initialize again.
Something you could do, it when the events triggers inside the TF view, you need to fire an action which points to the router.
So in your event handler you just navigate to your router.
Have a look at this one for navigation: https://blogs.oracle.com/jdevotnharvest/entry/how-to_navigate_in_bounded_task_flows
If you tree is in the parent jspx page you don't really need contextual events to manipulate taskflows. Just pass required data as taskflow's parameter and set Refresh property to IfNeeded for your taskflow binding to rerun your taskflow when its parameters changed.
If your tree also resides in taskflow and its sibling taskflow for details view then you indeed need contextual event, that should be catched at the parent jspx page (or taskflow) and then follow approach I've described earler with only change that parameter will come not from tree directly, but from payload of event.
In Ext JS 4, is there a simple way to determine if a component is actually in view? That is both visible and within the area currently displayed in the browser window.
I am aware of isVisible(), which will tell me if it is visible in the DOM, but I would also like to know if the component has been scrolled out of view (and therefore does not need updating visually).
You could use Component.getX(), Component.getY(), Component.getHeight(), Component.getWidth() of your main container and your component and compute that manually (also check the scroll methods of the main component).
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.