I have a textfield and a button, I want to popout an error message when the user clicks on the Send button if the textfield is left blank or empty. My code is as follows;
According to my code, i am able click on the Send button and submit even if the textfield value is empty. But when i click on the text field and leave it blank the border of the textfield becomes red, and when i hover over the textfield an error message will pop out.
What i want to do is to, popout an error message (If the textfield is empty) when the user clicks on the Send button.
{
xtype: 'button',
text: 'Send',
action: 'send1'
},
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false,
blankText: 'Name left blank'
},
{
xtype: 'button',
text: 'Send',
action: 'send1'
},
{
xtype: 'textfield',
id:'nameField',
name: 'name',
fieldLabel: 'Name',
allowBlank: false,
blankText: 'Name left blank'
}
By giving the id of the textfield, u can have the below code in the handler of the button
if(Ext.getCmp('nameField').getValue().length== 0)
Ext.Msg.alert('FormSubmissionError','TextField should not be empty');
else
Submit the form.
If you need to present a popup message you need to do this manually in button click handler. ExtJs doesn't provide built-in capabilities for that. However you can add
formBind: true
into your button definition and ExtJs will disable button until all validators on all elements will pass.
Related
I have requirement to enable a button , lets say Submit button , when user will start writing in TextArea using EXT JS.
At start, as TextArea is empty , Submit Button is disabled. As soo as user starts writing in TextArea , it should get enabled .
Please tell me if there is any event which tracks writing in TextArea in EXT JS
Something like this should do -
{
xtype : 'textareafield',
grow : true,
name : 'MyTextField',
fieldLabel: 'MyTextField',
listeners : {
blur: function(event, eOpts){
// here you can get reference to the button and enable
},
change: function(newValue, oldValue, eOpts) {
// this event will be fired whenever the value of the text field changes when you type.
// You can even listen to this function and enable the button when this event fires
}
}
}
To get a list of the events that you can listen to, I suggest you check the API doc. Here's the TextArea api doc for Ext 5.0
Use: formBind: true will be enabled/disabled depending on the validity state of the form.
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
allowBlank: false,
name : 'message',
fieldLabel: 'Message',
anchor : '100%'
},{
xtype: 'button',
text: 'My Button',
formBind: true,
disabled: true
}]
});
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;
...
}
I have a toolbar with some buttons and one of the buttons needs to be invisible at creation and visible at some point in my app.
I'm currently adding the button when it needs to be visible but that is not exactly what I want.
When you create the button you can set hidden: true in the config.
Or you can 'hide()' the button soon after adding it and then 'show()' it at a later date.
find the button and make it invisible
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
items: [
{
text: 'Button',
id: 'my-btn',
hidden: true
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});
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
For making a toolbox, I want to know how to make a radiogroup with regular buttons and not radiobuttons in latest extJS
Like this with jQueryUI: http://jqueryui.com/demos/button/#radio
Thanks in advance,
Chielus
I think you should look at using a set standard ExtJS buttons. A button can be assigned to a group so that they act as the elements shown in your link.
See this example:
{
xtype: 'button',
text: 'Choice 1',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 2',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 3',
toggleGroup: 'mygroup'
}
Buttons also have a property called enableToggle, that allows them to toggle, and is automatically set to true when you set a toggleGroup, and toggleGroup tells ExtJS how they are related.
Note, they look like regular ExtJS buttons, but behave like you want.
There is a less complicated (better?) way to disallow deselecting a button. Set the allowDepress config option to false:
{
xtype: 'radiogroup',
layout: 'hbox',
defaultType: 'button',
defaults: {
enableToggle: true,
toggleGroup: 'mygroup',
allowDepress: false,
items: [
{ text: 'Choice 1'},
{ text: 'Choice 2'},
{ text: 'Choice 3'}
]
}
}
Just to answer #mastak's comment (in the answer above), in order to disallow the action of de-selecting a button, add this listener to each button:
listeners: {
click: function(me, event) {
// make sure a button cannot be de-selected
me.toggle(true);
}
}
That way, each click on a button will re-select it.
-DBG
Just adding to the #deebugger post. You can also use the following button property to not allow to deselect a selection
Ext.create('Ext.Button', {
renderTo : Ext.getBody(),
text : 'Click Me',
enableToggle : true,
allowDepress : false
});