How to make a property as mandatory using EXTJS? | Community
Skip to main content
GK-007
Level 9
October 16, 2015
Solved

How to make a property as mandatory using EXTJS?

  • October 16, 2015
  • 7 replies
  • 3941 views

Hi All,

I have custom dialog and it has text fields.I need to make these search text fields as mandatory and if there is no value for these text fields further action should not be happened and has to prompt an alert.

If any one come across this kind of requirement and please help me.

Thanks,

Kishore

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by edubey

Okay...Create a similar listeners given in this file /libs/cq/ui/widgets/source/widgets/wcm/Page.Actions.js at line 138 ( w.r.t AEM 5.6.1 )
The reference i have given is for the dialog where we create New page in siteadmin

7 replies

edubey
Level 10
October 16, 2015

use allowBlank=false

edubey
Level 10
October 16, 2015
   What u mean by nothing is controlling? If you havent given any value in this field, dialog will give a prompt when try to click "OK" button.    
GK-007
GK-007Author
Level 9
October 16, 2015

Added this property and it's highlighting in red color but nothing is controlling.

GK-007
GK-007Author
Level 9
October 16, 2015

Controlling means when i click on OK button,nothing is prompting.

Below is the configuration.

"title": {
                    "fieldLabel":CQ.I18n.getMessage("Title"),
                    "fieldSubLabel":CQ.I18n.getMessage("Mandatory"),
                    "fieldDescription":CQ.I18n.getMessage('Title Is Mandatory To Create Category'),
                    "name":"title",
                    "allowBlank": false,
                    "blankText": CQ.I18n.getMessage("Title is a Mandatory Field"),
                     xtype: "textfield"

edubey
Level 10
October 16, 2015

Are you able to see "*" mark near that textfield?, I am unable to see jcr:primaryType in your code, here is the simple example:-

<title jcr:primaryType="cq:Widget" allowBlank="false" fieldLabel="Image Title" name="./imagetitle" xtype="textfield"/>
GK-007
GK-007Author
Level 9
October 16, 2015

I could see * mark and also my jcr:primaryType is "cq:Panel".

var createCategoryDialog = {
        "jcr:primaryType": "cq:Dialog",
        "title":CQ.I18n.getMessage("Create Category"),
        "id": CQ.Util.createId("cq-createfolderdialog"),
        "height": 440,
        "params": {
            "_charset_":"utf-8"
        },
        "items": {
            "jcr:primaryType": "cq:Panel",
            "items": {
                "jcr:primaryType": "cq:WidgetCollection",
                "label": {
                    "fieldLabel":CQ.I18n.getMessage("Name"),
                    "fieldDescription":CQ.I18n.getMessage('The name that will appear in the URL, e.g. "myfolder"'),
                    "name":"label",
                    "vtype":vtype
                },
                "title": {
                    "fieldLabel":CQ.I18n.getMessage("Title"),
                    "fieldSubLabel":CQ.I18n.getMessage("Mandatory"),
                    "fieldDescription":CQ.I18n.getMessage('Title Is Mandatory To Create Category'),
                    "name":"title",
                    "allowBlank": false,
                    "blankText": CQ.I18n.getMessage("Title is a Mandatory Field"),
                     xtype: "textfield"

                },
                 "description": {
                    "fieldLabel":CQ.I18n.getMessage("Description"),
                    "name":"description",
                     xtype: "textarea"
                },
                 "EndofSupportLife": {
                    "fieldLabel":"End of Support Life/Expiration Date",
                    "name":"EndofSupportLife",
                     xtype: "datetime"
                },
                 "ProductIdentifier": {
                    "fieldLabel":"Product Identifier",
                    "name":"ProductIdentifier",
                     xtype: "textfield"
                },
                 "CreatedDate": {
                    "fieldLabel":"Created Date",
                    "name":"CreatedDate",
                     xtype: "datetime"
                }
            }
        },
        "buttons": {
            "jcr:primaryType":"cq:WidgetCollection",
            "custom": {
                "text":CQ.I18n.getMessage("Create"),
                "cls": "cq-btn-create",
                "handler":function() {
                    var title = this.getField("title").getValue();
                    var label = this.getField("label").getValue();
                    var description = this.getField("description").getValue();
                    var ProductIdentifier = this.getField("ProductIdentifier").getValue();
                    var EndofSupportLife = this.getField("EndofSupportLife").getValue();
                    var CreatedDate = this.getField("CreatedDate").getValue();
                    if (!label) {
                        label = title ? title : CQ.I18n.getMessage("Folder").toLowerCase();
                    }
                    if (!CQ.Ext.form.VTypes[vtype](label)) {
                        var dialog = this;
                        var msg = CQ.Ext.form.VTypes[vtype + "Text"];
                        msg += "<br/><br/>";
                        msg += CQ.I18n.getMessage("Click 'Yes' to have the name auto-corrected and continue, or 'No' to cancel and change the name.");
                        CQ.Ext.Msg.confirm(
                            CQ.I18n.getMessage('Invalid Name'),
                            msg,
                            function(btnId) {
                                if (btnId == 'yes') {
                                    CQ.wcm.SiteAdmin.internalCategoryFolder(selectedNode, label, title, vtype,description,EndofSupportLife,ProductIdentifier,CreatedDate);
                                    dialog.hide();
                                } else {
                                    dialog.getField("label").markInvalid(CQ.Ext.form.VTypes[vtype + "Text"]);
                                }
                            }
                        );
                    } else {
                        CQ.wcm.SiteAdmin.internalCategoryFolder(selectedNode, label, title, vtype,description,EndofSupportLife,ProductIdentifier,CreatedDate);
                        this.hide();
                    }
                }
            },
            "cancel":CQ.Dialog.CANCEL
                 }
    };
    var dialog = CQ.WCM.getDialog(createCategoryDialog);
    dialog.show();
};

edubey
edubeyAccepted solution
Level 10
October 16, 2015

Okay...Create a similar listeners given in this file /libs/cq/ui/widgets/source/widgets/wcm/Page.Actions.js at line 138 ( w.r.t AEM 5.6.1 )
The reference i have given is for the dialog where we create New page in siteadmin