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
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 have a Dropdown, I select a value, lets say "myName", then I have a button that I click and it will display a form to fill with "myName" in one of the fields. But there is a UI issue. When I click that form button it display the form but the Dropdown selected item will disappear.
I tried debugging and it seems there is an issue when rendering it for second time. it fails in a function called commitRoot(root, finishedWork); in react-dom.js file and I don't know what it means as i'm very new in this area.
render() {
return (
<Dropdown
className='titlebar__dropdown'
options={this.myOptions}
onChange={this.selectedNameChanged}
selectedKey={PlanSelector.selectedName}
placeholder='Select a Plan'
/>
before clicking the form:
After clicking, and it doesn't show the options anymore:
You are probably overwriting the state of the property holding the value of the dropdown.
Make sure it is not again set to "" as you must have kept.
On the click of the button, the state is changed and as a result, render() is ran again because of which it is getting overwritten make sure to hold your state when the button is clicked and check if you are changing the state of selectedNameChanged property.
Hopefully, this helps,if not can you please provide the method which is called on button click.
Thanks
How to close the list of a Tagfield in Ext.js 6.0.2 by clicking on its label in Internet Explorer 11?
Look into the Fiddle to test it.
https://fiddle.sencha.com/#fiddle/1h9n
First, you need to understand what's going on better. The tag field isn't closing because you clicked on the label; it's closing because the tag field has lost focus. In Chrome, you can click anywhere outside of the tag field and it will close - not just on the label.
This in turn gives a hint as to what's going on - the tag field isn't losing focus. Now, when you look at the label HTML code, it's configured with a for attribute - it's the label for the tag field, after all.
And it turns out that when you click on a label, it's meant to transfer focus to the associated field. So, in Internet Explorer, the tag field never loses focus, so the tag field never closes.
I'd argue that IE is closer to the intent of the spec in this situation. But, in any case, if you really want this behaviour, you'll need to code it yourself with an onclick listener for the label.
When somebody expands "selected list" of our tagfield, than the label gets a onClick Listener. This listener collapses the "selected list" on click on the tagfields label.
listeners: {
expand: function (field) {
// Collapse List when click on Label
field.getEl().el.component.labelEl.on('click', function () {
setTimeout(function () {
field.collapse();
}, 100);
}
);
}
}
I'm using a property grid with editors set in sourceConfig. I want only some rows to be editable and not all. Returning false in beforeedit disables all. The reason is, I have a button in a grid. When I click the button, the grid turns to a textfield! Any way to do this?
The beforeedit event should provide you with the editor and the editing context. Lets say your callback function looks like this:
function(editor,context) { ... }
Using the context you will get the record which get edited by accessing context.record while the editor can provide you with the editor form from where you have access to all rendered fields within that form. To get the form you have to get the editor first and after that you can fetch the form
var form = editor.getEditor().getForm()
This way you can be sure that the editor has been set up. To get a field within that form simply call
form.findField('fieldname') // fieldname is the dataIndex of the column
You can now do nearly anything based on your conditions.
In addition the record is also loaded into this form an can be accessed by calling form.getRecord()
I have to make a form codename-one in which i have a check box. if check box is checked then bellow it i want to display 2 combo box and if check box is unchecked then i want to display 2 text field.
How can i do it.
I have tried setVisible(true/false) but in it space consumed by label or text field is never covered up.
Please help.
You need to remove/add the components and then invoke either revalidate() or animateLayout(int) to refresh the UI.