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).
Related
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.
The title says much about it. I will pass you an example below:
let scalesField = {
xtype: 'combo',
name: property.name + 'scale',
listeners: {
change: function (combo, selectedValue) {
// here would be some logic
// Tried with:
Ext.Array.each(possibleValues, function (single, index) {
possibleValues[index].disabled = true;
if (possibleValues[index].scale_id === selectedValue) {
possibleValues[index].disabled = false;
}
});
}
}
};
if (possible_values.length > 0) {
Ext.Array.each(possible_values, function (single, index) {
fields.push({
xtype: 'checkboxfield',
fieldLabel: possible_values[index].name,
name: possible_values[index].name,
labelWidth: 100,
});
});
}
Variable 'possible_values' contain all possible checkboxes as are defined in the 'if' block. I want to disable or enable checkboxes depending on what option user choose in combo(select option dropdown).
After running code as below I can see in the console that property disabled is changed but it does not apply to a view.
How to solve this in ExtJS?
You can use it like below:-
Ext.ComponentQuery.query('checkboxfield[name=' + possibleValues[index].name + ']')[0].setDisabled(true /*/false*/ );
I am working on extjs 3.4.0 and I wanted to add extra parameter in request to identify whether respective button is clicked or not (lets say clear filter button).
I have added that parameter in following way-
tbar: new Ext.PagingToolbar({
pageSize: 25,
store: PHOPHTStore,
displayInfo: true,
displayMsg: 'Displaying reports {0} - {1} of {2}',
emptyMsg: "No reports to display",
plugins: [PHOPHTFilters],
items:['-',{
text: 'Clear Filters',
iconCls:'x-btn-text-icon',
icon:'../images/tmp/cancel.gif',
tooltip:'Clear currently applied filters',
handler: function() {
PHOPHTGrid.filters.clearFilters();
PHOPHTStore.load({ params: { actionFilter: "clear" } });
}
}
})
Now the situation is I have added this { actionFilter: "clear" } when clear filter button is clicked.But this parameter is carried forward in every next request.I want to remove this as soon as this request is occurred OR when next request is demanded like ascending/descending column OR any other request.
I was planning to to this in -
listeners: {
'beforeload' : function() {
loadMask.msg = "Loading Reports(s), please wait...";
loadMask.show();
},
'load' : function() {
loadMask.hide();
}
}
Is there any other any way to store this parameter at this button click
OR
How can I remove this added parameter in any way?
please suggest
You can try Ext.Ajax.extraParams. I use this approach when loading data from server.
Partial example:
xloaddata: function() {
var me = this;
var v = me.edit_search.getValue();
me.store.proxy.extraParams = {
tablename: me.xtablename,
filter: v
)
};
me.store.loadPage(1);
me.store.proxy.extraParams = {
tablename: me.xtablename
};
}
Need to bind my form elements separately for different buttons. Using allowBlank in elements for sending binding conditions and formBind in buttons for binding the buttons. Need to do this like in this simplest way. (ExtJs 4.2.1 Classic)
Example
Ext.create('Ext.form.Panel', {
......
items: [
Ext.create('Ext.form.field.Date', {
.....,
allowBlank: false, //bind for both search & download button.
.....
}),
......, //// All rest elements bind for both search & download button.
Ext.create('Ext.form.ComboBox', {
......,
allowBlank: false, //bind for only download button.
......
})
],
buttons: [
{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
},
{
text: 'Download',
formBind: true, /// Need to bind for all.
},
............
});
If any other data or details is necessary then please don't hesitate to ask.
I created a fiddle here that I think should accomplish what you're trying to do. The idea to use an event listener on the combobox, instead of the formBind config of the Download button:
https://fiddle.sencha.com/#view/editor&fiddle/289a
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
itemId: 'exampleForm',
items: [Ext.create('Ext.form.field.Date', {
allowBlank: false, //bind for both search & download button.
}),
Ext.create('Ext.form.ComboBox', {
allowBlank: false, //bind for only download button.
listeners: {
change: function (thisCombo, newValue, oldValue, eOpts) {
if (Ext.isEmpty(newValue)) {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(true);
} else {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(false);
}
}
},
store: ['item1', 'item2']
})
],
buttons: [{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
}, {
itemId: 'btnDownload',
text: 'Download',
disabled: true
//formBind: true, /// Need to bind for all.
}]
});
There is no standard quick way to do this, you might want to write a plugin for this. I've put together one:
Ext.define('App.plugin.MultiDisableBind', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.multidisablebind',
/**
* #cfg
* Reference to the fields that this button depends on.
* Can contain either direct references, or a query selectors that will be
* executed with the button as the root
*/
depFields: null,
/**
* #property
* A map object with field ids as key, and field values as value
*/
valuesMap: null,
init: function (cmp) {
this.setCmp(cmp);
cmp.on('render', this.setup, this);
},
setup: function () {
var cmp = this.getCmp(),
depFields = this.depFields,
valuesMap = {};
if (!Ext.isArray(depFields)) {
depFields = [depFields];
}
Ext.Array.forEach(depFields, function (field) {
if (Ext.isString(field)) {
field = cmp.query(field)[0];
}
cmp.mon(
field,
'change',
Ext.Function.createThrottled(this.updateValuesMap, 300, this),
this
);
valuesMap[field.getId()] = field.getValue();
}, this);
this.valuesMap = valuesMap;
this.updateCmpDisabled();
},
updateValuesMap: function (depField, newValue) {
this.valuesMap[depField.getId()] = newValue;
this.updateCmpDisabled();
},
updateCmpDisabled: function () {
var cmp = this.getCmp(),
toDisable = true;
Ext.Object.each(this.valuesMap, function (fieldId, fieldValue) {
if (!Ext.isEmpty(fieldValue)) {
toDisable = false;
return false
}
});
cmp.setDisabled(toDisable);
}
});
You can use this plugin in your buttons like so:
xtype: 'button',
text: 'My button',
plugins: {
ptype: 'multidisablebind',
depFields: ['^form #fieldQuery', fieldVar]
}
In the depFields config you specify references to the fields that button's disabled state depends on, and the plugin will monitor these fields, so that on each field value change it will update the disabled state.
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/28cm
I have created a fiddle for you. The code uses bind and formBind respectively for the two different buttons. May be you want something like this.
Given the following code in Sencha Touch (pr3), I allways get "all" in the alert.
{
xtype:'selectfield',
options: [
{text: 'AllInboxes(5)', name:'all',value: 'all'},
{text: 'Correspondence(2)',name:'cores', value: 'correspondence'},
{text: 'ERP(2)', name:'erp',value: 'erp'},
{text: 'Media(1)', name:'med', value: 'media'}
],
listeners: {
change: function(value){
alert(value.originalValue);
//Pass value parameter to the 2nd select field's store
}
},
}
Could some one please let me know what is the issue ?
Below code works:
change: function(field, value) {
if (value instanceof Ext.data.Model) {
value = value.get(field.getValueField());
}
console.log(value);
//Pass value parameter to the 2nd select field's store
}
See the documentation for the change listener.
It take three parameters
field
new value
old value
So try to use it this way :
change: function(field, newValue, oldValue){
alert(newValue);
}
Hope this helps