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.
Related
I've got a WPF form inside a window and a short series of events like this:
1) 1st form has series of selection buttons
2) Clicking a button brings up a progress bar window over the existing window
3) Progress window closes and 1st form switches to a new 2nd form using page navigation
The problem is that the 2nd form (and the entire window) no longer has any focus and what's really killing me is that the window is no longer getting OnKeyDown() calls (it's still the top winow). If I hit the tab key the first menu option is highlighted and the following key stroke will fire a OnKeyDown(). Also, if I alt-tab to another app and then alt-tab back to my window it will begin receiving OnKeyDown() again.
How do I figure out where the focus is after the dialog?
If you are using navigation then the focus will have switched to the Page that you have navigated to, assuming that it is Focusable.
You can check that by setting up a breakpoint in a Focused event handle for the Page.
Alternatively you can use an explicit control.SetFocus() in the page.Navigated handler.
I am following the 'Stock Trader RI' example by the Prism team,
but it does not address this exactly :
I have a Shell with a Main Region in it.
In this shell I have some filter fields and a grid.
When I press on a button - I would like to load a screen that allows me to change the filters,
and then press 'Save'. This would then call a service to update the fields, and close the pop-up.
Here is an illustration of the 'Shell' before pressing the button (left) and after (right) :
Problems are :
The 'Stock Trader RI' sample app only uses a modaless dialog popup. I need a MODAL pop-up (background will continue to refresh, but user will not have access to it as long as pop-up is active).
Need to have Silverlight-like effect when pop-up shows, meaning - 'Shell' needs to appear 'disabled' (like a gray mask over it).
Pop-up window should have no 'X' button and no 'minimize' or 'maximize' buttons. The pop-up window should be simply a rectangle with curved-corners.
I don't think I can use a 'Notification Window' or a 'Confirmation Window' because I cannot put inside them whatever I want. This is an example with 2 fields, but the pop-up might be much more complex with tabs, and a lot of information shown to the user.
So how do I show a modal pop-up from my "WPF+PRISM" Shell-View-Model once the 'Edit' button is pressed ? (Meaning, once the 'EditCommand' is executed...)
I have found a solution here.
Basically it uses InteractionRequest and it allows me to open a window (that I can style however I want, without the 'Maximize' 'Minimize buttons), and also - I can choose for it to be Modal.
Great thing about this solution is - that I can use custom pop-ups and not only Notification or Confirmation pop-ups.
Also - I can pass information back to the class the invoked the 'InteractionRequest'.
Only thing that it doesn't solve - is that I cannot make the calling view look disabled by adding a gray semi-transparent over it ... haven't figured out yet how to do that...
I have some buttons in a bottom toolbar of a gridpanel that control adding, and removing records from the row-editing grid.
The handlers are pretty simple: "new" button creates an instance of the model, appends to the grid and then opens a row-editor on the new row; "edit" button just opens the selected row's row-editor; "remove" destroys the record from the store and refreshes the grid view.
For some reason these buttons don't lose the focus class that gives them a border when they have the focus. Here is a picture:
In the picture both the "New" button and the "Remove" button have the focus class, when I press the "Edit" button it also keeps the focus classes even after doing a complete row-edit operation and closing the row-editor.
I did find that when I mousedown on one of these permanently "focused" buttons and then mouseup away from it and then click something else the focus class goes away.
I know that I could put a blur handler for all button components in my respective controllers but I would have thought that this functionality was built in so I am asking to see if there is something I missed somewhere in the docs.
The classes that it won't let go of are these:
x-focus x-btn-focus x-btn-default-toolbar-small-focus
This is with ExtJS 4.1.0 in FF10 on Windows 7. But I did notice similar behavior in ExtJS 4.02 and 4.07, just haven't needed to handle it until now.
I found out what it was:
At some point in the handler chain for each of these buttons the button gets disabled. When a button is disabled in ExtJS it prevents the blur event from firing.
It was necessary to disable the buttons so the solution to simply add button.blur() in the handler was the correct way to do go about it.
I don't know if this is a browser general issue or if it is related to my code but here is my issue :
Lets say my page contains a link and a menu. I click the link and a popup opens [it contains a textfield or datefield]. When the popup is loaded, the textfield receives focus and the caret appears in the textfield : I can write. Now If i push my cursor on the side and it hovers on the menu, the focus changes and I can't continue writing in the textfield.
Is there a way to fix that ? I've googled it a bit but to no success.
Since you are using an Ext.Window, the browser doesn't know that things behind the window aren't invalid to hover or otherwise interact with. Indeed, someone actually might want their users to be able to interact with the main page behind the window. However, if you don't want this behavior, and the window is supposed to be the only thing the user interacts with, you are looking for modal: true. This will put a mask over the rest of the page, and no hovers or clicks will be applied to anything on the main page.
Example:
new Ext.Window({
modal: true
width: 400,
height: 600,
layout: 'fit',
items: ...
});
I do face the same issue with the following setup
1. using Ext.widget(widg) to create and open (show) a popup window
2. the widg is defined with modal: true configuration
3. one of widg's items is a form with several fields (fields are dynamically created and each time the form might contain different number of fields)
the issue: when I move the mouse out of the form's area (the mouse even stays inside the popup are), the filed that was on focus looses the focus. Happens 100% of the times.
Thanks, Charlie
I have a window containing a form (formPanel). Users can show this window clicking on a button in an ExtJS environment. I would like that when the user clicks the button to show the window, a specific field inside the form contained by the window will focus (by this I mean that the cursor should move to that field so that the user can insert data without needing to click on the field itself first).
I tried some solutions, but could not get them work. Any hints?
Here is what I tried, using some examples I found... but it does not work as expected. This function() is called by the ExtJS button in my interface:
function openCardForm(IDUser){
//Reset the value of this field which may be still there from the prev. usage
Ext.getCmp('assignFormCARDNUMBER').reset();
formAssignCard.getForm().load({
url: 'gen/jsonUser.php',
params:{IDUser:IDUser},
waitMsg: 'Loading...'
});
//Try to focus the Card field when rendering the form
Ext.getCmp('assignFormCARDNUMBER').on("render",function(){
Ext.getCmp('assignFormCARDNUMBER').focus(true,10);
});
win.show();
}
try on show instead.
Or Use
defaultButton : yourComponentToFocusOn
A bit confusing but the defaultButton can be any component (not necessary to be an actual button)
You can also try setting the tabindex of the field to zero in its config options...that way you wont even need to add a listener to detect the show event.
ie:
tabIndex:0