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.
Related
I could have been in a search for this. Once the form is submitted , if the errors are available it shows on top as the validation summary (May be it will be done). Here is the critical. When i click on the error message, the focus should go to the corresponding error field. The field may be in the same tab or other tabs or other panels etc
Could it be possible to achieve?
A simple way to achieve that would be to make the error message a label for that particular field:
<label for="myField">some error</label>
&
<input id="myField">
Clicking on the message would then automatically focus the field, no matter how far in the DOM the two elements are from each other.
An input can also be focused by JavaScript (see .focus() documentation). In both cases, the input needs to actually be present in the DOM before it can be focused.
I'm using a property grid with editors set in sourceConfig. I want only some rows to be editable and not all. Returning false in beforeedit disables all. The reason is, I have a button in a grid. When I click the button, the grid turns to a textfield! Any way to do this?
The beforeedit event should provide you with the editor and the editing context. Lets say your callback function looks like this:
function(editor,context) { ... }
Using the context you will get the record which get edited by accessing context.record while the editor can provide you with the editor form from where you have access to all rendered fields within that form. To get the form you have to get the editor first and after that you can fetch the form
var form = editor.getEditor().getForm()
This way you can be sure that the editor has been set up. To get a field within that form simply call
form.findField('fieldname') // fieldname is the dataIndex of the column
You can now do nearly anything based on your conditions.
In addition the record is also loaded into this form an can be accessed by calling form.getRecord()
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.
Using reporting services and trying to hide a field placeholder value when it does not equal "View" The value is hyperlinked to a subreport and is located in a bordered textbox inside a tablix. If I use the visibility feature for the text box, I can hide the non-view hyperlinks with an expression, but it hides the entire textbox and the textbox borders go away for that cell--I really want them to remain and just show the empty cell. If, instead, I try to hide the value on the placeholder level, which does not present the visibility option, and I attempt to evaluate the expression for the placeholder value to Nothing or '' when it is not valued as "View" then I get a hyperlink dash display in the column where I think it's attempting to render an unvalued hyperlink, which I really don't want. I just want an empty, bordered textbox.
Any way around this?
One solution is to change the visibility of the textbox value like this
IIF(fields(View.value) = 'true' , fields(TextBoxVariable.value), " ")
note that " " at the end will hide your dash
Or you can put a rectangle in the tablix cell and set its border, the you can put a textbox inside of the rectangle and change the visibilityof the textbox easily
put you link action on placeholder properties: Action - go to subreport, then put hidden expression on textbox: IIF(Fields!NameFields="View", true, false)
it works for me.
I know this is an old post, but I recently ran into this same issue.
Remove the expression from the text box properties and add it to the expression box of the field (right-click on the field and instead of choosing Text Box Properties>Visibility, choose Expression from the context menu). This will replace the field with an expression and the border lines will still exist.
Here's what I added to my expression:
=IIF(FORMAT(CDATE(Fields!ApprovedDate.Value),"dd-mm-yyyy") > "01-01-1980",Fields!ApprovedDate.Value," ")
I think that the easiest way to get rid off this hyperlink dash, is to change the font effect of the text-box. Just select Font-tab from text-box properties and from there, click fx-button of Effects and put somethin like this as expression:
=IIF(Fields!YourValueField.Value is nothing, "None", "Underline")
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