I'm using the Ext.form.field.Tag component. I have configured
createNewOnEnter:true,
createNewOnBlur:true,
forceSelection:true
but if I type in a value that's not the in the dropdown list/store records and tab-out or click enter the value gets selected. I want the value to be selected on enter/blur ONLY if it exists in the dropdown. But when createNewOnEnter and createNewOnBlur are set to true, forceSelection becomes false. I verified this by setting a debugger in the "change" event handler.
I dont have a fiddle but you can copy paste the above config into the live editor in the API Docs here
thanks
There are some configurations that are incompatible with each other, and ExtJS does not provide for all thinkable configurations of components (although they try, but then, Tagfield is quite new). This is the relevant part of the form/field/Tag.js file that explains your experience:
if (me.createNewOnEnter || me.createNewOnBlur) {
me.forceSelection = false;
}
To get what you want, you would have to override some parts of the tag field definition to suit your needs. You should look into overriding the assertValue and the onKeyUp functions.
Related
I am using Select component from Antd 3.x library with mode="multiple" and other options as shown in codesandbox link below. The Search is not disabled even when setting showSearch={false}
Now, I can't upgrade to Antd 4.x. The issue is when I use Axe Accessibility tool on my web app, it complains about an extra "Input" in my Select, which doesn't have aria-label set. If I manually set it in chrome console, all is fine
Is there a way to work around this situation either by removing search field(not sure how?) or someway to set the aria-lable of the input to something like aria-lable="search"?
codesandbox link
TIA
You can use filterOption to control your option list.
In my case, my options's value is a list of accounts, which will change every times I input keyword. Option's value is account.id and label is account.name.
filterOption, set it () => true (that means, all of options are OK).
onSearch, I call API to request new list of accounts, which meet with my keyword.
But in your case, I think, set filterOption to () => true will solve your problem.
Hope you solve with my solution!
A checkbox in ExtJs Form Panel is not binding properly , i.e when the value is changed from checked(value is 1) to unchecked (value is 0) the value in model for the respective field is still checked(1). This issue occurs in version 6.2.0.981, but the issue is not reproducible in latest version 6.2.1.167. Here is the fiddle for the same, toggle between the versions and check the issue. please let us know if there are any workaround for this issue in 6.2.0.981 version. Also in release notes of 6.2.1.167 its told that "EXTJS-21886 - Checkboxes don't return the correct value" is fixed, but how to have this fix in previous versions?
CheckBox Bind issue Fiddle
You can fix this by adding
uncheckedValue: 0
to your checkbox config. Excerpt from the docs:
By default this is undefined, which results in nothing being submitted for the checkbox field when the form is submitted
The bug was that nothing was submitted during model update as well, and since nothing was provided, the value of the model was not updated.
In ExtJS 6.6 I was still trying to figure this out and it wasn't as straight forward as I'd hoped (Having the checkbox bind to the model and pass 1 for true and 0 for false to the binding). I wanted to avoid having a formula with a middle man binding in the model because I'd have to have a formula for every checkbox and that seemed silly.. Extending the combo box class and overriding getValue method like below. The accepted answer worked ok for unchecked but I was still getting true on checked.
Ext.define('Components.BinaryCheckBox', {
extend: 'Ext.form.field.Checkbox',
xtype: 'binary-checkbox',
getValue: function () {
if (this.value) {
return 1;
} else {
return 0;
}
},
});
By default, Parsley only handles updating a single element's class (usually the input field in which the invalid entry is). However, with Bootstrap 4 we must update both the form-group and the input field classes to render them with the validation icons. Otherwise, only the border colour is changed.
How can I use Parsley to correctly, completely style my input fields when validating user input in the client?
In order to correctly style Bootstrap 4 with Parsley, you must modify the classes of the div.form-group surrounding your input fields (assuming you want the validation icons, like I did).
According to the documentation you need to add .has-success or .has-danger to the div.form-group and then specify form-control-success and form-control-danger respectively to the input fields.
However, Parsley only supports updating the class on a single element by default. Fortunately, it supports event binding, so with a little function added to the end of your parsley.js file, we can handle updating the div.form-group styles when the user has fixed a validation error.
First configure Parsley:
errorClass: "form-control-danger",
successClass: "form-control-success"
These are the correct classes to apply to the input fields, which Parsley works on by default. Next, append the following to the parsley.(min).js file.
window.Parsley.on('field:validated', function(e) {
if (e.validationResult.constructor!==Array) {
this.$element.closest('.form-group').removeClass('has-danger').addClass('has-success');
} else {
this.$element.closest('.form-group').removeClass('has-success').addClass('has-danger');
}
});
The above will listen for when fields have been validated, and, hence update the relevant div.form-group according to the Bootstrap 4 documentation to ensure that the input field gets rendered appropriately.
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page
I have an extjs combobox used for auto-complete having following configuration:
xtype:'combo',
displayField: 'name',
valueField:'id',
store: storeVar,
queryMode: 'remote',
minChars:2,
hideTrigger:true,
forceSelection:true,
typeAhead:true
There are two issues being faced by me:
a. If a user chooses a value from the list returned from server, but later wants to remove that value and keep combo-box empty, then also the old values re-appears on blur, not allowing combo-box to remain empty. How can I allow empty value in this combo-box in such a case? I understand it could be due to forceSelection:true, but then I need to keep it true as otherwise user can type any random value.
b. When the server returns an empty list, I want to display a message - No Values Found. I tried doing this, by putting this value in the displayField entity, i.e., {id:'', name:'No Value Found'}. But then in this case, the user is able to choose this value and send it to server which is not what is expected. Thus, how can I display the message for empty list?
Could someone please throw light on this?
For the issue related to forceSelection in the question above, following is the hack created which can serve the expected purpose:
Ext.override(Ext.form.field.ComboBox,{
assertValue: function() {
var me = this,
value = me.getRawValue(),
rec;
if (me.multiSelect) {
// For multiselect, check that the current displayed value matches the current
// selection, if it does not then revert to the most recent selection.
if (value !== me.getDisplayValue()) {
me.setValue(me.lastSelection);
}
} else {
// For single-select, match the displayed value to a record and select it,
// if it does not match a record then revert to the most recent selection.
rec = me.findRecordByDisplay(value);
if (rec) {
me.select(rec);
} else {
if(!value){
me.setValue('');
}else{
me.setValue(me.lastSelection);
}
}
}
me.collapse();
}
});
This needs to be included after library files of extjs have been included.
For the other issue of message to be shown at No Values Found - emptyText - works fine as suggested by Varun.
Hope this helps somone looking for something similar.
I've done this for Ext JS 3.3.1. I don't know if they apply to Ext JS 4, though I guess they should.
For the first problem, set autoSelect : false. autoSelect is by default set to true. This will work only if allowBlank : true is set. From the docs
true to select the first result gathered by the data store (defaults
to true). A false value would require a manual selection from the
dropdown list to set the components value unless the value of
(typeAheadDelay) were true.
For the second problem, use listEmptyText. From the docs
The empty text to display in the data view if no items are found.
(defaults to '')
Cheers.