Version 4.2.1
In a form I use a checkbox which should not be changed for a certain type of user.
So I disable the checkbox and set checked and value to `true. I want this value to be submitted.
{
name: 'myName',
itemId: 'myItemId',
xtype: 'checkboxfield',
fieldLabel: "test",
checked: true,
value: true,
disabled: true,
},
When I submit the form I see that there is no parameter for this checkbox.
Only when I set disabled to true I get a parameter with value on
When I look at:
var data = form.getValues();
console.log(data);
this checkbox is not submitted with an on value.
When I use readonly: true I can check/uncheck the checkbox and that value is submitted.
So how can I disable the checkbox for editing, set the value to checked and get it submitted to the server?
Found this thread from 2008/2009 which has a simple solution.
Form Submit is not sending values of disabled field
Sending disabled field
This code sets the checkbox to readonly is shown and a user cannot change the value.
And the field is submitted to the server.
readOnly: true,
fieldClass: "x-item-disabled"
Related
I am using ext5 multiselect combo. If we select a value from the dropdown, say 'Other' and click outside to cancel the dropdown.
Now the value 'Other' will be shown in combo.
Again click the dropdown and select tha same value 'Other', it should remove 'Other' from its values. But rather it adds same value once again.
My code is given below:
xtype: 'combo',
emptyText: 'Retail BI',
name: 'chainRefId',
store: Ext.create('shared.store.filter.ChainRefs'),
displayField: 'name',
multiSelect: true,
valueField: 'chain_ref_id',
listeners: {
expand: function(){
this.getStore().load();
},
change: function(combo, newVal) {
if (!combo.eventsSuspended) {
var storeCombo = Ext.ComponentQuery.query('combo[name=storeId]')[0];
storeCombo.getStore().removeAll();
storeCombo.setValue(null);
var chainCombo = Ext.ComponentQuery.query('combo[name=chainId]')[0];
chainCombo.getStore().removeAll();
chainCombo.setValue(null);
}
}
}
Is there a solution for this?
Thanks in advance.
Your combo's store gets reloaded on each expand. Technically the record corresponding to the value you selected the first time disappears on the second store load, so the removing logic does not "see" it and therefore leaves it in the field.
Remove this:
expand: function(){
this.getStore().load();
}
and just use autoLoad: true on the store.
I have faced the same problem. I have provided a workaround for this. This fix holds good for tagfield too.
//on combo store load event
load: function () {
// I am assuming reference to combo
var rawVal = combo.getValue();
// If combo is multiselct, getValue returns an array of selected items.
// When combo is configured as remote, everytime it loads with new records and therefore removes the old reference.
// Hence, do setValue to set the value again based on old reference.
combo.setValue(rawVal);
// Here you can see, based on old reference of selected items, the drop down will be highlighted.
}
My filter looks like this:
{
type: 'boolean',
dataIndex: 'FutureProfile',
value:false,
defaultValue : false
},
This does not add any sort of default filtering for my data. This brings back every row in the table.
If I do this:
{
type: 'boolean',
dataIndex: 'FutureProfile',
value:true,
defaultValue : false
},
Everything works fine and when the grid is loaded, the FutureProfile rows only display for items that have the boolean value of true.
So it seems if the value is set to false, extjs completely ignores this and does not send this as part of the ajax call, if it's set to true, the filter is sent via ajax. How would I make the grid actually default to rows with a false value for FutureProfile?
Figured it out after much trial and error.
If you want the default value of a boolean filter to work, you must set active to true:
{
type: 'boolean',
dataIndex: 'FutureProfile',
value:false,
active: true
}
i am working in extjs4. I have view with component as=
xtype : 'comboboxselect',
id : 'Id1',
displayField: 'emailAddress',
typeAhead: true,
editable : true,
hideTrigger:true,
forceSelection: false,
i want to allow users to enter new emailIds also. So i kept editable as true. But when i am trying to get combobox's selected value on sumbit button click, its not giving me newly inserted emailsId's in combobox.I tries it as =
Ext.getCmp('Id1').getSubmitData() or Ext.getCmp('Id1').getRawValue()
But its not giving me newly inserted emailId's. So how to perform this in extjs4
If this is Ext.form.field.ComboBox (xtype:'combobox') then getValue() returns the current value of the combobox. More info available on sencha docs
I have a number field in my form named cashPay and another field name is totalPayable. Now if cashPay is less then totalPayable I need to alert a message and focus on the cashPay field. But I am not being able to do it. focus method works on textfield in other form but on number field it is not working for me. Can anyone please help me on this. Here is my code below :
in my view page >>>
{
xtype: 'numberfield',
name: 'cashPay',
id: 'cashPay',
keyNavEnabled: false,
mouseWheelEnabled: false,
enableKeyEvents: true,
allowBlank: false,
hideTrigger: true,
fieldLabel: 'Cash Pay',
action: 'cashCalculation'
}
in my controller >>>
Ext.Msg.alert("Warning !","Sorry Cash Pay is less than this month's installment. Please pay the right amount")
Ext.getCmp('cashPay').focus(false, 1);
The focus method is defined by and inherited from Ext.component. So, if it works for textfield, it should also work for numberfield. It may be something else. You may try to delay a little bit more using
numberfield.focus(undefined, 20);
Btw: I don't think you should use Ext.getCmp if your numberfield is within a Ext JS form. If you can, use up and down methods to get from your component that is firing the event to your numberfield.
Use 'show' and a callback:
Ext.Msg.show({
title: 'Warning !',
msg: "Sorry Cash Pay is less than this month's installment. Please pay the right amount",
width: 300,
buttons: Ext.Msg.OK,
closable: false,
fn: justAnotherFunc
});
justAnotherFunc: function() {
Ext.getCmp('cashPay').focus(false, 1);
}
Alert is asynchronous, so the field gets the focus and automatically loses it when you close the alert message.
In ExtJs4, I have a form with a combo box, where the data gets loaded from the database in json via
this.getForm().load({url: '/ext/get-patient', ...
where the user is allowed to enter a custom value besides the predefined ones, configured via the forceSelection attribute set to false.
The problem I experience is:
when the user selects any of the predefined values from the store in the combo box, saves and reloads the entry again, everything works fine.
But when the user enters a custom value (i.e. "abcde") into the combo box field, saves (and I can see that the entered custom value is stored correctly in the database), and then loads the form data again (correct custom value is in json response), the combo box would then not be populated with this custom value after the loading process.
Why - or how to solve it?
This is the store definition used by the combo box:
// The data store for the diagnoses combobox
var diagnosisStore = Ext.create('Ext.data.Store', {
fields: ['label', 'value'],
data: (function() {
var data = [
{label: '结膜炎', value: '结膜炎'},
{label: '角膜炎', value: '角膜炎'},
{label: '青光眼', value: '青光眼'},
{label: '白内障', value: '白内障'},
{label: '葡萄膜炎', value: '葡萄膜炎'},
{label: '屈光不正', value: '屈光不正'},
{label: '眼部异物', value: '眼部异物'},
{label: '翼状胬肉', value: '翼状胬肉'},
{label: '泪囊炎', value: '泪囊炎'},
{label: '倒睫', value: '倒睫'},
{label: '角膜溃疡', value: '角膜溃疡'},
{label: '角膜白斑', value: '角膜白斑'},
{label: '眼内炎', value: '眼内炎'}
];
return data;
})()
});
... and the combo box, note that forceSelection is set to false.
{
xtype: 'combobox',
name: 'diagnosis',
fieldLabel: lang["patient.diagnosis"],
labelWidth: 60,
flex:1,
store: diagnosisStore,
valueField: 'value',
displayField: 'label',
typeAhead: true,
queryMode: 'local',
forceSelection: false
}
I also tried to run this line of code, in the listener after the json response has been successfully retrieved:
formPanel.getForm().findField('diagnosis').setValue(rec.data.diagnosis);
but it wouldn't populate unless the value I am settings is part of the store. So, why is it that a user can type anything into the combo box, but I can't do the same with setValue in code? Doesn't make sense to me.
Edit/Update:
The funny thing is: even though the custom value doesn't populate/isn't displayed to the user, it seems that the combo box nevertheless holds the custom value. Because when I call this line:
alert( formPanel.getForm().findField('diagnosis').getValue() );
it would actually show the value, which I've just tried to set via setValue(), in the alert dialog.
Seems that this combo box component is a bit buggy.
Another issue I just found with this combo box in ExtJs: Also noted that blank values in the combo box don't get submitted in the form (json parameter in the request), only if I enter one empty space (" "), then the field is actually included in the submitted json parameters.
I found a workaround, even though I still don't see why this should be necessary:
In the success listener, after the json response is loaded, I add the custom value to the store, then set the combo box to this newly added value:
success: function() {
diagnosisStore.add({label: rec.data.diagnosis, value: rec.data.diagnosis});
formPanel.getForm().findField('diagnosis').setValue(rec.data.diagnosis);
},
No idea why I would need to add the custom value to the store in this case when I want to use setValue, while the user can enter anything manually via keyboard.