I have a form and a tabpanel The user is supposed to enter some information in the form and click a submit button at the end. I have a controller that controls that button click event and fires various application level events depending upon the input. I catch those events in controllers for all the tabs and do individual processing. What happens is that as not all the tabs are rendered in the beginning and therefore, only the first tab displays the output and others give error. I would like to know if there is a way that i can catch the event in a way that it first waits for the components to get rendered and then does the processing.
Thanks.
Please have a look at deferredRender : Boolean config for tabpanel.
True by default to defer the rendering of child items to the browsers DOM until a tab is activated. False will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
How about yor inital handler queues some sort of pendingJob object for those tabs !rendered and then on the afterrender or show event you check that, process it and clear it? I do something similar with a cards layout and it works very well.
Related
I've added ScaleImageLabel to swipe Tabs. I want to calculate amount of time each tab remains in focus. I added focus listener to Tabs/ScaleImageLabel but it's not getting fired. It's working when added to the form. Any suggestions on how to achieve it?
If I understand correctly what you need is a tab selection listener. Focus listener will only work for focusable components and labels are by default non-focusable. I would recommend avoiding it since focus is used for key based navigation. It might produce different results than you would expect.
I have a classic dropdown menu on an Angular project with a main link always shown and a tree of sublinks shown only when hovering this one.
I have two events on the parent:
ng-mouseenter="vm.toggleDropdown($event)"
ng-mouseleave="vm.hideDropdowns($event)"
And they work perfectly fine. The main link has a simple:
ng-click="vm.navToState(item.urlState, $event)"
With a $state.go within to go to the string passed as parameter. On mobile devices, ng-mouseenter is being triggered on tap, showing the dropdown menu and this is perfect. The thing is that ng-click is being triggered too so the menu is only visible a fraction of a second before the next state loads. Is there any way to detect if ng-click is being fired by a touch event so I could add an if statement to navToState() and prevent the $state.go()? I understand that this way that main link would be unreachable in mobile but I'll take care of that adding an extra link within the dropdown.
Any other workaround for the same result is fine too.
Thanks!
Could you set a variable based on whether it is a mobile browser and use that as a check navToStart as to whether you state change or not, then have a separate state change function that doesn't care whether it's mobile or not so you can still change states in the mobile browser? That's one idea, but if it doesn't work, could be worth putting some code in your question for a reference.
Here's an answer on detecting mobile browsers:
https://stackoverflow.com/a/11381730/5349719
Demo Fiddle
I'd like to show some help text using a popover for the entire group of fields, not for each individual input.
In the fiddle, I'm simply using a mouseenter trigger to show how it should look like, but what I really want is to trigger it on focus for any input, but have the popover be positioned based on the parent element.
In non-angular land, I'd trigger a custom event (say groupenter) when any one of the fields is in focus, and have the popover listen to that event. I'd also debounce the corresponding groupleave event so the popover won't flicker as I tab around the inputs.
What's an angular-y way to accomplish that here?
(I think this patch helps, but it just got committed days ago)
Got it working!
I had to fork tooltip.js to add 'groupenter': 'groupleave' to triggerMap since there's no public api to add to the map.
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
In an Ext Js-application I am working on I have a formpanel that contains (among other controls) three comboboxes, each with a different datastore. I need to load the form with existing data and display that in the form. This works for all simpel controls (textboxes, checkboxes) but there is a problem with the comboboxes.
The comboboxes each use a datastore but I can see that there is only one store loaded before the form loads its own data, causing that one combobox to display the correct text and the other two the value. If I click and close the combobox without making a selection the correct text appears.
Is there a way to either delay the loading of the form or the binding of the form until all datastores have loaded? The datastores are local stores with autoload and the formpanel calls its own load in the afterlayout-event.
The problem is that the setValue executed by loading your form is executed before the stores of the combo boxes are actually loaded.
You could try to implement the fix condor and animal of ExtJS have propsed in this forum thread on sencha.com: http://www.sencha.com/forum/showthread.php?75751-OPEN-42-ComboBox-s-setValue-call-with-a-remotely-loaded-Store
It basically just delays the setValue call on any combobox until the store of the combobox is fully loaded.
Load the form panel after the rendering is complete. Is there any specific reason you are loading the form in afterlayout event?
Load the form in afterrender event rather than afterlayout. the afterrender event happens when all form is completely rendered.