I need to add a little blip about an update to a form and I'm making it unnecessarily hard on myself. How do I add a text field that simply says Notice: XYZ underneath the Transfer date field? Is it a certain xtype I need to implement?
There are many possible way to add textfield/ displayfield in your form. Get hold of form and then add the textfield. Or simply add the textfield in form panel.
I created a fiddler for you in that I am adding next to 'Transfer Date' by this way.
{
xtype :'textfield',
name: 'last',
editable :false,
allowBlank: false,
fieldLabel: 'Notice',
value: 'xyz'
}
Since you asked for textfield so we can do like that and make editable :false, but the easier option is to achieve this is
{
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
}
Both type of solution is available in fiddler. Have a look and choose as per your choice. Fiddle
Add in your form object
formPanel.add({
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
})
try adding a new component of xtype: label to your form panel.
for example:
formPanel.add({
xtype: 'label',
text: 'Notice: XYZ'
});
Related
I have a form panel with dynamic items. Some items has hidden like example:
items: [{
xtype: 'textfield',
fieldLabel: 'Field 1',
name: 'theField'
},{
xtype: 'textfield',
fieldLabel: 'Field 2',
name: 'theField'
},{
xtype: 'textfield',
fieldLabel: 'Field 3',
name: 'theField',
hidden: true,
allowBlank : false
}]
But when i submit my form like
if (form.isValid()) {
alert('submit');
}else alert('fail');
that will check all field, and my form will not submit.
Has anyway to valid form (only field is shown) ? how to do that thanks
Here is my example to check http://jsfiddle.net/jZYcQ/
As you've said, hidden fields will still be validated. Instead, you should disable the field, which means it won't be submitted, but also won't be included in validation.
Hidden fields are validated. To disable or skip validation for hidden fields, you can set 'skipValidation' to true. Also, set 'allowBlank' to true if that is set too.
So, normally when a field is defined and you've added validations on it, setting skipValidation to true will disable form submit validations for that field. However, it does not disable the allowBlank validation. You still cannot set your field to be empty on submit. Hence, you would require both if your field has other validations on it apart from making the field required. Reset them when fields are shown..
//View
xtype:'textfield',
allowBlank:false,
validator: function(){
//custom validation
}
...
//Controller
function(){
...
form.down("#field").skipValidation = true;
form.down("field").allowBlank = true;
...
}
How would I select all the child components of a FormPanel that are of the component type TextField?
I want to loop through only the TextField components and set their values to "".
I have this inside a method on a FormPanel
this.query('textfield').forEach(function(item) { console.log(item.id); } );
It selects too much stuff, it selects all the nested TextFields inside of ComboBox and DateField and what not.
How can I get only the Ext.form.field.TextField instances?
You need call the function getXType().
Extjs documentation http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Component-method-getXType
Example
var t = new Ext.form.field.Text();
alert(t.getXType()); // alerts 'textfield'
Using this form of query causes the Ext.ComponentQuery to lookup if the current component either is a textfield or extend from textfield. Simply use a property query for such a case like [xtype=textfield]. Is doesn'T matter if you create the textfield without setting the xtype or creating it by it's xtype it be set on the instance.
Here's example will return two results.
var form = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [Ext.create('Ext.form.field.Text',{
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}), {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // requires value to be a valid email address format
}]
});
console.log(Ext.ComponentQuery.query('[xtype=textfield]', form));
I need to implement validation messages that appear right next to invalid field. Any help would be appreciated.
msgTarget: 'side' will Add an error icon to the right of the field, displaying the message in a popup on hover only.
if you read the documentation carefully, one more option is there for msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget
[element id] Add the error message directly to the innerHTML of the specified element.
you have to add a "td" to the right side of the control dynamically with the id. then if you specify msgTarget: 'element id' it will work.
The msgTarget: 'elementId' can work, but it seem very limited, particularly when you want multiple instances of one reusable ExtJs component (and therefor multiple instances of the same msgTarget element). For example I have an MDI style editor where you can open multiple editors of one type in a tab interface. It also doesn't seem to work with itemId or recognize DOM/container hierarchy.
I therefor prefer to turn off the default handling if I don't want exactly one of the built in message display options by setting msgTarget: none and then performing my own message display by handling the fielderrorchange event which is designed for exactly this scenario. In this case I can now respect hierarchy of my forms even with multiple instances of the same editor form as I can select the error display element relative to the editor.
Here's how I do it:
{
xtype: 'fieldcontainer',
fieldLabel: 'My Field Label',
layout: 'hbox', // this will be container with 2 elements: the editor & the error
items: [{
xtype: 'numberfield',
itemId: 'myDataFieldName',
name: 'myDataFieldName',
width: 150,
msgTarget: 'none', // don't use the default built in error message display
validator: function (value) {
return 'This is my custom validation message. All real validation logic removed for example clarity.';
}
}, {
xtype: 'label',
itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
cls: 'errorBox' // This class lets me customize the appearance of the error element in CSS
}],
listeners: {
'fielderrorchange': function (container, field, error, eOpts) {
var errUI = container.down('#errorBox');
if (error) {
// show error element, don't esape any HTML formatting provided
errUI.setText(error, false);
errUI.show();
} else {
// hide error element
errUI.hide();
}
}
}
}
See the msgTarget config of the control. msgTarget: 'side' would put the validation message to the right of the control.
Use msgTarget 'side' for validation in right side and msgTarget 'under' for bottom
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false,
name: 'name',
msgTarget: 'side',
blankText: 'This should not be blank!'
}]
You can use 'msgTarget: [element id]'. You have to write html in order to use element id instead of itemId. The validation function adds a list element under an element that you set as 'msgTarget'.
In case you want to show elements that you want for the validation, you can pass html instead of just a text.
{
xtype: 'container',
items: [
{
xtype: 'textfield',
allowBlank: false,
msgTarget: 'hoge'
blankText: '<div style="color:red;">validation message</div>', // optional
},
{
xtype: 'box',
html: '<div id="hoge"></div>' // this id has to be same as msgTarget
}
]
}
To show the error message under/side the input text box, msgTarget property will work only in case of you are using the form layout.
To work around this in other than form layout we need to wrap the element in "x-form-field-wrap" class.
you can find more on thread :
https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem
I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items
I can't seem to be able to focus a field in a form in extjs 4.
The doc lists a focus function for Text field (inherited from Component) but it doesn't do anything in terms of focusing to the input field.
Here's a sample code from the docs
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false
}, {
xtype: 'textfield',
id:'email',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email'
}]
});
If I call Ext.getCmp('email').focus() nothing visible happens.
What's the correct way to focus a field in extjs 4?
Sometimes a simple workaround is to slightly defer the focus call in case it's a timing issue with other code or even with the UI thread allowing the focus to take place. E.g.:
Ext.defer(function(){
Ext.getCmp('email').focus();
}, 0);
There isn't anything wrong with your code. I've made a jsfiddle for it and it works fine. Are you wrapping code in and Ext.onReady()? Also what browser are you using?
Try this:
Ext.getCmp('email').focus(false, 20);
Rather than work around with a delay, look for what is getting focus instead. Look out for focusOnToFront property on the parent.