{
xtype:'combo',
name : 'policyId',
fieldLabel : 'policyTyep',
padding : 'padding-left: 20%',
displayField : 'analysisName',
valueField : 'analysisId',
queryMode : 'local',
//value:-1,
value: {analysisName:'Select..',
analysisId:0},
store : policyDetailTypeStore
}
If I the policyDetailTypeStore is loaded ,but have no data.
then I want to show "Select..." in the combox.I also have configure the value as the code, but Can't work at all..
you should actually be using the emptyText config attribute for this
{
...
emptyText : 'Select ...',
...
}
Related
I have a form with two input fields 'test1' and 'test2' and one combo box. I want to validate this form, the input fields should be not emtpy. I use therefore the config ' allowBlank: false' and the controller method 'onFormValidityChanged'. This works fine.
Now I hide the input field 'test2' when I change the value in the combo box with the controller method 'onChangeCombo' dynamically. Also, I set config ' allowBlank: true' of input field 'test2'. But my form is not valid when the hidden input field 'test2' is empty.
How can I exclude the hidden input field from the validity check?
I use the ExtJS version 6.6.
Thank you for your hints, Thomas
View:
items : [{
xtype : ' formpanel',
trackResetOnLoad : true,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [
{
xtype : ' textfield',
name : 'test1'
itemId : 'test1',
allowBlank : false,
fieldLabel : 'test1'
},
{
xtype : ' combobox',
name : 'combo',
itemId : 'combo',
store: myStore,
listeners : {
change : 'onChangeCombo'
}
},
{
xtype : ' textfield',
name : 'test2'
itemId : 'test2',
allowBlank : false,
fieldLabel : 'test2'
}],
listeners : {
validitychange : 'onFormValidityChanged'
}
}];
Controller:
onFormValidityChanged : function(form, valid) {
var win, button;
win = form.owner.up('window');
button = win.down('[xtype=button]');
button.setDisabled(!valid);
},
onChangeCombo : function(combobox) {
var win, test2;
win = combobox.up('window');
test2 = win.down('textfield[itemId=test2]');
test2.hide();
test2.allowBlank = true;
}
to turn off the validation, just disable this hidden input.
test2.disable();
I have a suggestion for You too:
use test2.setAllowBlank(true) instead of test2.allowBlank = true
don't use reference like win.down(etc.), check out the ViewController options with reference and lookup method
Norbeq's proposal
test2.disable()
get not provide a solution. I don't know why...
I did not follow the dh117's formBind suggestion.
I solved this problem as follows:
test2 = win('textfield[itemId=test2]');
win.remove(test2);
Thank you for your hints, also for the further hints,
Thomas
For example, I have textfield with input type 'email'. I have set the default color of the field to pink. if the input is in a proper email format, i want the textfield's color to be changed to white. how do i do that?
the eg code:
xtype: 'textfield',
labelWidth : 250,
fieldStyle: 'background-color : #F5A9A9',
vtype : 'email',
fieldLabel: 'email address'
In this case first we need to check weather input value is an email or not. For that we are using
var fieldValidation = Ext.form.field.VTypes.email(val);
If fieldValidation is true then it input value is an email. Once we verified input value simply we change our background color. this.setFieldStyle("background-color : #FFFFFF")
Your code will like :
{
xtype: 'textfield',
fieldStyle: 'background-color : #F5A9A9',
vtype : 'email',
fieldLabel: 'email address',
validator : function(val){
var fieldValidation = Ext.form.field.VTypes.email(val);
if(fieldValidation == true){
this.setFieldStyle("background-color : #FFFFFF");
}
}
}
I created a fiddle for you. Please have a look. Working Fiddle.
Also I am attaching doc of Vtype for you which help you understand properly. Doc
I want to disable a file Upload field dynamically. Like I have a variable say isUploadAllowed. If this variable is true only then FileUpload field is enabled and user can click Browse button.. Else this button is disabled.. How to do it in ExtJs 3.0? I did find few examples but they were all of ExtJs 4.. I have tried:
FileUploadField.setDisabled(true);
but it's not working..
Here is my code, I want to disable it on reset button click!
var fileUploadField = new Ext.ux.form.FileUploadField({
id : 'fileUpload',
name : 'upLoadedFile',
fieldLabel : 'Supporting File(s)',
width : 410,
convertToUpperCase : false,
tabIndex : 9,
allowBlank : true
});
var requestForm = new Ext.form.FormPanel({
id : 'requestForm',
labelAlign : 'right',
labelWidth : 130,
buttonAlign : 'right',
frame : false,
split : false,
fileUpload : true,
autoHeight : true,
collapsible : false,
width : 635,
monitorValid : true,
border : false,
bodyStyle : 'text-align:left;padding:10 10 10 10',
// Layout the form fields here.
items : [{
layout : 'column',
border : false,
items : [{
layout : 'form',
bodyStyle : "text-align:left",
border : false,
items : [fileUploadField]
}],
buttons : [{
id : 'submitBtn',
text : 'Submit',
formBind : true,
handler : doSubmit,
type : 'submit',
scope : this
}, {
text : 'Reset',
formBind : false,
type : 'reset',
handler : function() {
// disable file upload field
}
}]
});
try this:
fileUploadField.disable();
sometimes it works better. Also check letter case
I made a hasty comment before which was deleted. I had the same issue with the upload functionality not being disabled, even though I disabled the field. I realized that was due to Plupload which was enabled on that field, so to disable the upload functionality of the uploader I disabled Plupload:
uploader.disableBrowse(true);
So check if don't have some similar plugin working as well...and disable that as well. Hope that this will help someone...it gave me some headaches.
I am working in extjs4. I have view with following components-
1. xtype: 'boxselect',
displayField: 'emailAddress',
valueField: 'id',
store : store
2.xtype : 'grid',
selModel:Ext.create('Ext.selection.CheckboxModel', {
headerWidth : 40,
showHeaderCheckbox : false,
ignoreRightMouseSelection : true,
checkOnly : true
}),
width :350,
border : true,
store : store,
columns : [{
dataindex : 'firstName',
header : 'firstName'
},{
dataindex : 'lastName',
header : 'lastName'
},{
dataIndex : 'emailAddress',
header : 'email'
}]
3.xtype : 'button',
text : 'Add'
On this add button click, i want to add grid selected multiple values to boxselect's selected values along with its previous selected values and want to show those values in combobox as selected.
i tried it as=
var previousvalues = [12,13,14]
var newvalues = [15,16]
Ext.getCmp('comboId').setValue(previousvalues + newvalues );
But its forming combinely one emailId and setting it as one value, not individual emailId
So how to perform this in extjs4
You can not contact two arrays with + operator in javascript.
ExtJs framework has build in function for merging two arrays Ext.Array.merge()
So you can set new values like this:
var values = Ext.Array.merge( previousvalues, newvalues );
Ext.getCmp('comboId').setValue( values );
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Cascading Combobox in extjs
Hi I have two comboboxes ,viz..
AcademicClass
{
xtype : 'combobox',
emptyText : 'Academic Class',
displayField : 'name',
id:'comboacademicclass',
valueField : 'id',
store:classstore,
triggerAction:'all',
mode:'local',
listeners : {
'select' : {
fn: function(combo1, value) {
var comboSubject=Ext.getCmp('combo-subject');
var classId=Ext.getCmp('comboacademicclass').getValue();
comboSubject.setDisabled(true);
comboSubject.setValue('');
comboSubject.getStore().removeAll(true);
comboSubject.getStore().load({url:'http://localhost:8080/WebService/rest/type/academicSubjectByClass/'+classId+'.json'});
// Using this loading data in second combobox by passing first combobox Id.:- 'classId'.
comboSubject.setDisabled(false);
}
}
}
}
AcademicSubject:
{
xtype : 'combobox',
emptyText : 'Academic Subject',
id:'combo-subject',
displayField : 'name',
valueField : 'id',
disabled:true,
store:subjectstore,
triggerAction:'all',
mode:'local'
,lastQuery:''
}
Its showing output only first time selection but on second time selection its just showing "Loading" and not dispalying output. Please Help.
Well you should listen with the AcademicSubject combo on the AcademicClass for the select or the change event and activate the listening combo along with it. You will also get the selected value and can so prepare the query for the activate combo. You could do this like
combobox.queryData = [{ property: 'fieldName', value: value}];
combobox.reset();
combobox.doQuery(combobox.queryData);
where combobox is a reference to the activated combo (AcademicSubject ) and value a propertyvalue from the AcademicClass combo. To ensure the use of your new query use
combobox.on('beforequery', function (e) {
e.query = e.combo.queryData;
});
Please note:
For the snippets above I recommend to use queryParam: 'filter' which would enable you to use default serverside filter behavior without the need to introduce a new param.