i have small query i created four text fields and one button,in text fields i gave property allowblank:true if user enter shows error message,it's working perfect.If the click the button the inserted perfect,after that the textboxes becomes empty it's showing blank errormessage.If iam using Allowblank:false it's working fine.but i require if user not enter in that textbox i need to show error message.
how can i resolve this issue.Any one can share any idea to me.
There are two solutions to do that :
1st : use a Ext.form.Panel with all your textfield and your button inside. The allowBlank : false property will check if your texfields are empty and if they are the button will stay disabled if it's got the property formBind : true. Fiddle : http://jsfiddle.net/binoss/ubLcycht/
2nd : use a normal Ext.panel.Panel the same way than with Form.Panel, but you will have to handle the click event on button to check that all your texfields are not empty, and display a Error Message. Fiddle : http://jsfiddle.net/binoss/yz339z7w/
Related
Need help on this.I created the following code http://play.ionic.io/app/b9c6216003eb
When the user click on the search button after typing in some text,if the text is present in 'myArray' then it should be displayed in the popover otherwise nothing
Implemented example whenever text field contains more than 4 characters, it shows popup and hides popup when it is empty.
Following is the link
http://play.ionic.io/app/1b21d83b71ba
I am working on a form that contains a grid panel with checkbox selection model to select users. After the submission the users ID's (as well as other form field values) are POSTed to the server. This works perfect.
But I need to add a custom validation for that special (custom) field - if no user is selected, display an error icon with an error tooltip text. Here is the custom field component screenshot:
As You can see within the image, there is a title (done by xtype: label), then an empty space, that is currently filled with label with no text (the area marked by red rectangle) and the grid itself. If I select a user (or more), their names (blanked data) are displayed in that empty label.
But within a process of validation I need to show an error icon with tooltip somewhere here if no user is selected.
I can check for the selected data using
grid.getSelectionModel().getSelection().length > 0 ? true : false
therefore I am wise of the selection is valid or not, but I do not know how to display that error icon, nor where should I best display it. I think the best position for that icon should be within the section title label (either left or right, this does not matter that much).
Any help on how to display that icon is highly appreciated!
As nobody answered and I found a solution myself, I want to put it here so that maybe somebody could tell me about a better approach.
So after the validation
if(grid.getSelectionModel().getSelection().length > 0) {
// valid, let's submit the form...
} else {
// invalid, let's show the error hint
}
I only need to address the concrete label and set the text for it - while adding a concrete HTML markup that is the same as of when error icon is displayed by calling form.isValid():
label.setText(myPreviousText
+ '<span role="presentation" class="x-form-error-msg x-form-invalid-icon" data-errorqtip="<ul class="x-list-plain"><li role="alert">'
+ 'MY ERROR MESSAGE'
+ '</li></ul>" style="display: inline-block;"></span>', false);
Now I have the error icon with a styled hint. I set the label text back (set back to valid) on grid.select event and check the validity again on grid.deselect event.
I have to make a form codename-one in which i have a check box. if check box is checked then bellow it i want to display 2 combo box and if check box is unchecked then i want to display 2 text field.
How can i do it.
I have tried setVisible(true/false) but in it space consumed by label or text field is never covered up.
Please help.
You need to remove/add the components and then invoke either revalidate() or animateLayout(int) to refresh the UI.
I write simple Validation code for wpf . There is text box . If I enter invalid value or textbox is empty then Validation Error Temple appears on windows. This is okay. It works very well.
But I use this code another project. I use ribbon menu. When I clicked ribbon button in ribbon menu, My page is navigated in frame but Validation Error temple does not seem at page. If a enter a value and then delete then Temple appears. I don't Understand. What does same code behave
Your validation code is getting triggered when property text of your text box get changed. Some how on frame navigation property changed event is not firing on page load event. I will be able to help more if you provide your validation logic and the way you are binding the text box.
I have a window containing a form (formPanel). Users can show this window clicking on a button in an ExtJS environment. I would like that when the user clicks the button to show the window, a specific field inside the form contained by the window will focus (by this I mean that the cursor should move to that field so that the user can insert data without needing to click on the field itself first).
I tried some solutions, but could not get them work. Any hints?
Here is what I tried, using some examples I found... but it does not work as expected. This function() is called by the ExtJS button in my interface:
function openCardForm(IDUser){
//Reset the value of this field which may be still there from the prev. usage
Ext.getCmp('assignFormCARDNUMBER').reset();
formAssignCard.getForm().load({
url: 'gen/jsonUser.php',
params:{IDUser:IDUser},
waitMsg: 'Loading...'
});
//Try to focus the Card field when rendering the form
Ext.getCmp('assignFormCARDNUMBER').on("render",function(){
Ext.getCmp('assignFormCARDNUMBER').focus(true,10);
});
win.show();
}
try on show instead.
Or Use
defaultButton : yourComponentToFocusOn
A bit confusing but the defaultButton can be any component (not necessary to be an actual button)
You can also try setting the tabindex of the field to zero in its config options...that way you wont even need to add a listener to detect the show event.
ie:
tabIndex:0