I noticed that every time I open and close (by clicking on a menu item or clicking at some area out of the menu) a contextmenu (Ext.menu.Menu) the <div>s won't get removed from the DOM, they somehow just get invisible.
How to change this?
You can try this to destroy entire component -
listeners: {
hide:function(menu, opt){
Ext.destroy(menu);
}
}
But you have to create Ext.menu.Menu, when click menu button next time.
Related
I have a popup opening next to the textbox. When I click on the tab key from the textbox it should be navigated to the close icon of the popup (top right corner) and when I click on the close button from the popup, focus should be set to the next control in the form and popup should be closed.
Here is the fiddle
So in fiddle, when I click on the tab from business structure drop down, focus should be set to the close icon(top right corner) and on each next tab it should be move to the next control inside the popup and from close button it focus should be on type dropdown
Its all about the method how to grab a component, which seems to have no connection to another component.
Here the solution is, that you set an alignTarget by using showBy.
Focus:
focus: function(field){
field.popup= Ext.create('tooltip' );
field.popup.showBy(field.el, 'l-r',[10,0]);
},
Listener:
listeners: {
'destroy' : function(win,ev) {
const field = win.alignTargetFly,
next = field.next().component;
next.focus();
}
},
By the pure number of questions you are asking here for the same component (3 or 4 so far), it might be better to grab professional help. Just ask someone to build a component by an image and a short description. This description could be instantly part of your documentation too. This might cost a one day of work.
From what I see so far I would do a custom component, that includes a field.base with the popup. This can be added as a single component to your library and be included instead of your field.
At the end this will be way cleaner in your codebase than what you are currently doing. Just for an example: Always keep the same order for components. After the extend line should be the xtype ... At the end it is easer to read for everyone.
I am using #material-ui with react. I've got the following problem:
With the keyboard, open the context menu, select "Assignee details" or "Requester details"
Close the dialog. When you tab again, the focus is now back at the top of the page, it should stay on the menu. How can I achieve this behavior?
https://codesandbox.io/s/hardcore-breeze-s4mkez?file=/src/Test.js
You can save the current focused element (you can get it with document.activeElement) and after closing the menu, set focus to the desired element with element.focus()
I have grid and action column in this grid. When I click on action column on grid it displays menu. when I clicked anywhere else after menu shown, menu gets hide.
But when I scroll grid with mouse wheel, menu doesn't hide. Instead its position changes as per scrolling...so I want solution for this to handle this situation so that I can hide menu on mouse-wheeel scroll
Hi Could you please add this in the afterRender of your grid
this.body.on('scroll', this.handleScroll);
handleScroll: function() {
//hide your menu.
},
Hope it helps you.
I have a nested list with a template by using getItemTextTpl. Template is simple it checks for a flag and if true it shows a button on a list item. If false show no button.
When on the list item I press the button (It's a delete button) I want to refresh that list item to not show the button. To make the button change I have to navigate up two levels and back down for it to update the list item.
My problem is getting the list item to refresh/Update. Can force the template to check the list item again etc? I can get the button to fire the event.
Thanks!
for the display layer:
why not just use css to apply/change the class of the delete button to hide it? then you don't have to refesh anything.
then you can programically set the value in your code, or send to the server to make sure the status is set when the view reloads at another point.
I have a button inside a panel that once clicked will call out a child window. I already created it and there are already items inside it. Once the child window is opened the parent panel will be disabled.
Inside the child window I have a Button that closes the window which will then enables the parent panel.
childWindow.close();
parent.enable();
My problem is the default close button on the Window on the upper right side of the window. If I click it it, I cannot enable the parent panel. it stays disabled, because of course I disabled it.
How do I enable the parent panel once it is closed using the default close button?
Place a listener to the close event of the "child" window inside your "main" window. The listener will work, even if it is disabled. In the following example I assume that the win ref is a reference of your "main" window while "child" is the one of your child.
openWin: function(child) {
child.on('close', reactivate, this);
child.show();
this.disable();
},
reactivate: function() {
this.enable();
}
If you want disable everything behind the window, use the modal config of Ext.window.Window
modal : Boolean
True to make the window modal and mask everything
behind it when displayed, false to display it without restricting
access to other UI elements.
Defaults to: false