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
Related
i'm new of Extjs; i have a panel with the item "collapsible: true" and it works fine but...
when my specific condition is true, i want to collapse the panel, and i want to disable the button used to expand it (therefore the panel doe not show anymore, even if the click is made).
It's possible do it?
I want a type of override method that doing other things, for example to show a div with few specific information in the page.
I use only javascript and Extjs.
thanks in advance and happy holidays
I added a bindable version
Fiddle
Using databinding to collapsible, you might also add the binding to the collapsed param
Please see my snippet. Can it resolve your issue ? Tell me if you have any question.
https://fiddle.sencha.com/fiddle/1fk9
Ext.application({
name : 'Fiddle',
launch : function() {
var parent = Ext.create('Ext.container.Container', {
title : 'Demo',
renderTo : Ext.getBody(),
layout : 'vbox',
items : [{
xtype : 'checkbox',
fieldLabel : 'Enable collapsible',
handler : function(self, v){
var panel = parent.down('panel');
panel.collapseTool.setVisible(v);
panel.getHeader().down('tool[type=up]').setVisible(!v);
},
checked : true
}, {
xtype : 'panel',
width : 500,
height : 400,
title : 'Collapsible demo',
collapsible : true,
tools : [{
type : 'up',
hidden : true
}]
}]
});
}
});
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 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 );
{
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 ...',
...
}
I have below requirement of a page with sencha touch:
A drop down of some options
A question posted by users (length may vary big time)
a text area to display get the answer
Two buttons for submit and ignore
I am using vbox layout. Now the problem is I want the page to be fully scrollable instead of partial scrolls on dataview etc.
How can I achieve it. I have similar requirements for different screens.
Below is the code:
Ext.define('HCMDoctor.view.PFQuestion', {
extend : 'Ext.form.Panel',
xtype : 'PFQuestion',
id : 'pfView',
config : {
layout : {
type : 'vbox',
align : 'stretch'
},
flex : 1,
scrollable : true,
items : [{
xtype : 'container',
html : 'Public Forum Question'
}, {
xtype : 'selectfield',
store : 'CommunityWiseQuestions',
name : 'pfCommId',
id : 'pfCommId',
valueField : 'communityId',
displayField : 'displayFull'
}, {
store : 'PFQuestion',
xtype : 'dataview',
flex : 1,
id : 'pfQuestionHolder',
itemTpl : ['{discussionTitle}<br>{description}',
'<br>Posted in {postedInCommunityName}']
}, {
xtype : 'hiddenfield',
id : 'pfQuestionId',
name : 'pfQuestionId'
}, {
xtype : 'textareafield',
id : 'pfAnswer',
name : 'pfAnswer'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Ignore',
id : 'ignorePFQuestion'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Submit',
id : 'submitPFQuestion'
}
]
}
});
Thanks
onload of store iterate over records and in every iteration create panel with tpl by passing record data to it and add the panel to its parent. something like this:
var parentPanel = Ext.getCmp("pfView");
for(var i=0; i++; i<records.size){
var mypanel = Ext.create("Ext.Panel", {
data : records[i]
});
parentPanel.add(myPanel);
}