We Keep Coding

React state object attribute is getting set as undefined

I have the following state object initialized called myCriteria
const [myCriteria, setMyCriteria] = useState({
myFieldStatusDropdown: myFieldStatusDropdown,
selectedMyFieldStatus: myVarMyFieldStatusDropdown?.value,
});
Now I have the breakpoint set right above this line
setMyCriteria({
...myCriteria,
selectedMyFieldStatus: myCriteria.myFieldStatusDropdown[0]
});
and at the breakpoint, I inspect and see myCriteria.myFieldStatusDropdown as below
[
{
code: 'Select',
value: 'Select'
}, {
code: 'AA',
value: 'A 1'
}, {
code: 'BB',
value: 'B 1'
}
]
However for some strange reason, after the setMyCriteria line is executed, when I inspect the value of myCriteria.selectedMyFieldStatus, it is wrong
i.e. instead of it being set to
{
code: 'Select',
value: 'Select'
}
it is getting set as undefined
Not sure why it gets set as undefined

I simply initialized using myCriteria and put three objects in it, in form of an array
var myFieldStatusDropdown = [
{
code: 'Select',
value: 'Select'
}, {
code: 'AA',
value: 'A 1'
}, {
code: 'BB',
value: 'B 1'
}
]
const [myCriteria, setMyCriteria] = useState({
myFieldStatusDropdown: myFieldStatusDropdown,
selectedMyFieldStatus: myFieldStatusDropdown[1]
});
then I use setMyCriteria to update the myCriteria
setMyCriteria({
...myCriteria,
selectedMyFieldStatus: myFieldStatusDropdown[0]
},[myCriteria]);

selectize.js and vue.js 2 ajax loaded optons

I'm using vuejs#2.3.3, selectize#0.12.4, vue2-selectize.
I have a pretty big form with a few select inputs.
All options are loaded by ajax into a one property, which is initialized with a demo data before being replaced by ajax data:
addTrackData : {
styles : [
{ id: 1, title: 'style 1' },
{ id: 2, title: 'style 3' },
{ id: 3, title: 'style 2' },
],
authors: [
{inn: '111', name: 'demo 1'},
{inn: '222', name: 'demo 2'},
{inn: '333', name: 'demo 3'}
]
....
},
And I've got 2 problems:
1) If I use settings in this way, options doesn't loads at all:
<selectize v-model="form.data.authors[i]['id']" :settings="selectize.authors"></selectize>
selectize: {
authors: {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: this.addTrackData.authors // that doesn't works, but hard coded array works
}
}
Because of error Error in data(): "TypeError: Cannot read property 'authors' of undefined".
Both this.addTrackData.authors and addTrackData.authors makes this error.
But this way works:
<selectize v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
2) Options are not reactive - when ajax data comes, all selects elements still shows a demo data. And I have no idea how to update them all...
UPDATE
Second problem could be fixed with If Conditional and empty initial array:
<selectize v-if="addTrackData.authors.length" v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
addTrackData : {
styles : [],
authors: []
....
}
But the first problem still makes me cry

I just read the source code of vue2-selectize and noticed that it's watch code for options key is incorrect.
his code is this way:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clearOptions()
this.$el.selectize.addOption(this.current)
this.$el.selectize.refreshOptions(false)
this.setValue()
}
}
},
while it should be this way to work:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clear();
this.$el.selectize.clearOptions();
var vm = this;
this.$el.selectize.load(function(callback) {
callback(vm.current);
});
this.$el.selectize.refreshOptions(false);
this.setValue();
}
}
},
I just prepared a hacky way to make it working but I dont encourage you using it in production.
Here is the fiddle's link: https://jsfiddle.net/ahmadm/h8p97hm7/
I'll try to send a pull request to his creator as soon as possible but until that time, your solution is already the only possible solution.

Grouping ExtJS radio buttons with different names to save in database

I'm trying to group radio buttons in ExtJS without using the same name config. Is this possible? This is my code:
items:
[
{
xtype: 'radio',
name: 'is_self_employed',
boxLabel: 'Self Employed:'
},
{
xtype: 'radio',
name: 'is_voluntary',
boxLabel: 'Voluntary:'
},
{
xtype: 'radio',
name: 'is_ofw',
boxLabel: 'OFW:'
},
{
xtype: 'radio',
name: 'is_non_working_spouse',
boxLabel: 'Non Working Spouse:'
},
{
xtype: 'radio',
name: 'is_farmer_or_fisherman',
boxLabel: 'Farmer or Fisherman:'
}
]

you want radio buttons with different names?
Radio buttons are grouped by their name and that will break their functionality, unless you do some JS Code to fix what you broke.

The best way is to set the same name to all radios and set different inputValue for each.
Another possible way of implementation would be to trigger uncheck of other radio buttons manually while enabling one.
listeners: {
change: function(rd, value) {
if (value) {
var radios = rd.up("form").query("radio");
Ext.each(radios, function(r) {
if (r != rd)
r.setValue(false);
});
}
}
}
Fiddle: http://jsfiddle.net/gilsha/s48FD/51/

Interaction with gridData on ui-grid edit events

I am using Angular ui-grid and am pretty new at it. I receive an array of objects to render data for each row. Each object, hence each row , has a field change:false which marks whether any field on that row has been edited or not. I have kept this field visible : false on screen.
However, whenever any change is made to any column of any row, I want to set this field as change:true.
How can this be achieved on the change of a ui-dropdown field or any other field for that matter.
I have this as my changing column:
{ name: "carrier_influence_group", displayName: "Carrier influence group", enableCellEdit: true,
editableCellTemplate: 'ui-grid/dropdownEditor', type:'object', cellFilter: 'cigFilter', editDropdownValueLabel: 'name',
editDropownOptionsArray: [{ id: 10, name: 'Small' }, { id: 11, name: 'Medium' }, { id: 12, name: 'Large' }]
},
I tried looking for any options available. But couldn't find any way in official docs. Kindly suggest a way or some relevant links

You can use the afterCellEdit event for this.
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
if (newValue !== oldValue) {
rowEntity['change'] = true;
}
});
});

how to disable a particular option in sencha touch

I have a select field in sencha touch as below.
var filter = new Ext.form.Select({
options: [
{ text: 'Availability', value: 'Availability' },
{ text: 'Price', value: 'Price' },
{ text: 'Proximity', value: 'Proximity' }
],
id:'FilterSelect'
label: 'Filter By'
});
I would like to know how to disable or hide a particular option value, as on some events I need to hide/disable the "Proximity option" and vice versa.

Whenever you want to change the options, simply call setOptions() like this:
filter.setOptions([
{ text: 'Availability', value: 'Availability' },
{ text: 'Price', value: 'Price' }
]);
The docs have an additional example: http://docs.sencha.com/touch/1-1/#!/api/Ext.form.Select