We Keep Coding

Ext.js 2 checkboxes and the events are firing twice with the change listener

The problem here is that when I press either one of the checkboxes the checbox gets unmarked it sort of fires both of the change events. How can this be avoided?
What I am trying to do is have to checkboxes the possible cases are:
both marked.
one marked (vod or npvr)
both unmarked
In the end what I want is to establish the content_type which receives different values according to what is marked and passes it to the main form.
{
xtype : "checkboxgroup",
fieldLabel: "Content type",
name : "content_type",
id : "fx-form-content_type",
rows : 1,
value : 0,
editable : false,
forceSelection: true,
queryMode : "local",
horizontal : true,
hidden : false,
valueField : "value",
items : [
{
//xtype : "checkboxfield",
boxLabel: "VOD",
checked : false,
name : "VOD",
inputValue: 1,
id: "fx-form-content_type-VOD",
value: 1,
labelWidth: 40,
listeners : {
change: function (checkbox, newValue, oldValue, eOpts) {
console.error(checkbox);
var isVOD = newValue;
var isNPVR = Ext.getCmp("fx-form-content_type-NPVR").value;
if(isVOD && isNPVR)
{
Ext.getCmp("fx-form-content_type").setValue(0);
}
else if(isVOD)
{
Ext.getCmp("fx-form-content_type").setValue({VOD: 1});
console.warn(Ext.getCmp("fx-form-content_type").valueOf());
}
else if(isNPVR)
{
Ext.getCmp("fx-form-content_type").setValue({NPVR: 2});
}
else
{
Ext.getCmp("fx-form-content_type").setValue({});
}
}
}
},
{
//xtype : "checkboxfield",
boxLabel: "NPVR",
checked : false,
name : "NPVR",
inputValue: 2,
id: "fx-form-content_type-NPVR",
value: 2,
labelWidth: 40,
listeners : {
change: function (checkbox, newValue, oldValue, eOpts) {
console.error(checkbox);
var isNPVR = newValue;
var isVOD = Ext.getCmp("fx-form-content_type-VOD").value;
if(isVOD && isNPVR)
{
Ext.getCmp("fx-form-content_type").setValue(0);
}
else if(isVOD)
{
Ext.getCmp("fx-form-content_type").setValue({VOD: 1});
}
else if(isNPVR)
{
Ext.getCmp("fx-form-content_type").setValue({NPVR: 2});
}
else
{
Ext.getCmp("fx-form-content_type").setValue({});
}
}
}
}
]
}

The setValue() of the component always fires the change event. So every time you are clicking on a checkbox, you are firing one change event there, but then inside that change listener/event you are also setting the value for the checkbox group and there is where the second change event firing happens. When you set the value of a checkbox, the checkbox changes, therefore firing its own change event.

This can be avoided by placing the change listener to the checkboxgroup level instead of writing it at the item levels.

Knockout: Alert based on property of list of objects on select option

I know this is a simple change but I have not been able to achieve it despite researching and trying many things. And I am new to Knockout.
I have this select option of a list of objects Payors which has IsValueChecked boolean property.
<select name="InsuranceId" data-bind="options:Payors ,
optionsValue: 'Id',
optionsText: 'Text',
value:InsuranceId">
</select>
I want to create an alert if IsValueChecked is true, however the value that I am updating is InsuranceId. I am trying to achieve this by subscribing to InsuranceId.
vm.InsuranceId.subscribe(function (newValue) {
//doing something here
}
How do I write this logic?

Payors has to be an array or observableArray, with the options that you want to choose from.
When you subscribe to InsuranceId you will get the selected Id. Use this to filter through Payors.
vm.Payors = ko.observableArray([
{IsValueChecked : false, Id : 1, Text: 'False'},
{IsValueChecked : true, Id: 2, Text: 'True'}
]);
vm.InsuranceId.subscribe(function (newValue) {
var boolean = vm.Payors().find(function(payorObject){
if (newValue === payorObject.Id) {
return payorObject.IsValueChecked;
}
});
if (boolean) alert ("IsValueChecked is true");
}

How to get an attribute from selected data item in Webix combo?

I have the following Webix combo:
{
view: "combo",
label: 'Select the name',
labelWidth:130,
options: {
data:[
{ itemId:"120", itemName:"Name 1"},
{ itemId:"121", itemName:"Name 2"}
],
body: { template: '#itemName#' }
},
on:{
onChange:function(id){ alert(id) }
}
}
It looks just as needed, but how can I get itemId after selecting new item? I can only get the auto-generated ID
The same code in a snippet:
http://webix.com/snippet/3a431f1c
Thanks in advance!

You have to get the object of the combobox and then you can get data of the selected item with the help of its getItem() method as:
var obj = this.getPopup().getBody().getItem(newValue); //the object
var id = obj.itemId; //the desired id which is itemId in your code
Please check the snippet here.

Get ID from selectize.js to form

I'm trying to set up a form on my site, and want to use some dynamic dropdown.
I found Selectize.js, which seems like a good solution, however I'm struggling to find out how to get the ID's from the selected option when I post the form.
As in user selects "Banana" and selectize should return 2 as value for the post
The obvious answer would of course be to change valueField to 'id' however that messes up the createFilter so that's a no go..
I've made a jsfiddle with what I have so far: http://jsfiddle.net/imfpa/Lh3anheq/16/
HTML:
<form>
<select id="item-type" placeholder="Choose type...">
</select>
</form>
javascript:
function hasOwnPropertyCaseInsensitive(obj, property) {
var props = [];
for (var i in obj) if (obj.hasOwnProperty(i)) props.push(i);
var prop;
while (prop = props.pop()) if (prop.toLowerCase() === property.toLowerCase()) return true;
return false;
}
var REGEX = '[a-zA-ZæøåÆØÅ][a-zA-ZæøåÆØÅ ]*[a-zA-ZæøåÆØÅ]';
$('#item-type').selectize({
persist: true,
valueField: 'text',
labelField: 'text',
searchField: ['text'],
options: [
{id: '1', text: 'Apple'},
{id: '2', text: 'Banana'},
{id: '3', text: 'Orange'},
{id: '4', text: 'Cherry'},
],
createFilter: function(input) {
var match, regex;
regex = new RegExp('^' + REGEX + '$', 'i');
match = input.match(regex);
if (match) {
console.log(match[0]);
return !hasOwnPropertyCaseInsensitive(this.options, match[0]);
}
return false;
},
create: true
});

jsFiddle demo (http://jsfiddle.net/json/Lh3anheq/35/)
Okay, based on our discussion in the comments above, you want the selectize.js to return the id of the selected item, and also let users create unique items.
You are right about the id: you just need to replace the valueField: 'text' with valueField: 'id'.
Now we need to fix the decision making in your function hasOwnPropertyCaseInsensitive.
The first argument in this function is an object of objects. If you see the console output, for this.options of your selectize element, you will see roughly the following structure (valueField is already replaced with id here):
{
idOfItem1: {
id: idOfItem1,
text: textOfItem1
},
idOfItem2: ...
}
Here is what the web inspector prints out for console.log(this.options):
So, we can iterate over all objects and still have the display value in the field text, and this is exactly the string that we need to compare against the user input for uniqueness.
function hasOwnPropertyCaseInsensitive(options, userValue) {
var exists = false;
for (var option in options) {
if (options.hasOwnProperty(option)) {
if (options[option].text.toLowerCase() === userValue.toLowerCase()) {
exists = true;
break; // break from the loop when the match is found. return true works as well.
}
}
}
return exists;
}
Note! The id of an element created by a user will be the same as the display value. I.e. if I add a new element to the list, e.g. Test, it will look like this:
{
Test: {
id: "Test",
text: "Test"
}
}
Please see the jsFiddle demo (http://jsfiddle.net/json/Lh3anheq/35/) and let me know if I missed something.

Set the value in a toggle-field on Sencha-touch

I am trying save the value of a toggle-field in sencha and send this value to the server, now I am listening the event but it is not working...
My code is:
onHeaderCompleteDelivery: function (button, oldValue, newValue) {
console.log('change fired');
if(oldValue == 0 && newValue == 1){
console.log(oldValue);
this.getCmp('headerCompleteDelivery').setValue(oldValue);
}
else {
console.log(oldValue);
this.getCmp('headerCompleteDelivery').setValue(oldValue);
}
},
What am I doing wrong??
Thanks!!

It's hard to tell what you are doing, as Ricardo mentioned:
It looks like the change event of a togglefield you are listening to
But it seems not to be the standard event as newValue would be the second argument and oldValue the third
You name the firing component with button, which could indicate that you are listening to a button, but that button won't have the values for a togglefield
This will get you nowhere
If this is indeed the togglefield please rewrite your code, to keep it simple
I have changed the values you are about to set to 0 and 1 to show what will be set at the time.
I habe removed the second if clause as it it obvious that it is the opposite value.
I explained what each value is doing as you have the newValue at the wrong position inside the arguments
if else does not make sense here. I added a short form
.
/**
* togglefield change event
*
* #params {object} togglefield
* #params {number} newValue the value after the change
* #params {number} oldValue the value before the change
*/
onToggelNameChange: function (togglefield, newValue, oldValue) {
console.log('Togglefield ' + togglefiled.getName() + ' fired change event');
console.log('Togglefield is now set to: ' + !(!newValue));
// what is the scope of "this"? you better be sure
this.getCmp('headerCompleteDelivery').setValue(newValue);
// or you can try this approach. But make sure header has a value config.
var header = Ext.Viewport.down('#headerCompleteDelivery');
header.setValue(newValue);
},
You should go with a different approach.
Use a form
Put the toggelfield into the form and add a name to the field
Once the submit button is hit get the values from the form (form.getValues())
Inside the values you will have the current value for the togglefield
here an example:
View
Ext.define('App.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
config: {
items: [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name: 'name',
},
{
xtype: 'passwordfield',
name: 'password'
},
{
xtype: 'togglefield',
name: 'isActiveToggle',
label: 'Test Toggle Field'
},
{
xtype: 'button',
itemId: 'btnSubmit',
text: 'Submit'
}
]
}
]
}
});
Controller
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
submitBtn: '#btnSubmit',
},
control: {
submitBtn: { tap: 'onSubmitBtnTap'},
}
},
onSubmitBtnTap: function (btn) {
var form = btn.up('.form'),
values = form.getValues();
// here you will get an Object with
{
name: 'Value of name field',
password: 'Value of password field',
isActiveToggle: true // <== this is the value you want to send
}
this.sendDataToServer(values.isActiveToggle); // your Ajax call with toggleValue
}
});

I did not understand exactly what you are trying to accomplish, but looking at the code, both your if and else branches are executing exactly the same code, which may be the problem.
Also, it appears that the oldValue and newValue arguments are inverted in the change event: the newValue argument comes before the oldValue argument (see http://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Toggle-event-change).