Question

我对EXT.js很新;当我按下ENTER时，我需要提交表单是我的代码，但我不知道在密码字段的监听器中调用什么是我的代码： ie：在侦听器中调用的函数是什么

 <script type="text/javascript">
    Ext.onReady(function() {
        Ext.tip.QuickTipManager.init();

        Ext.create("Ext.container.Viewport", {
            layout: "border",
            rtl: <spring:theme code='theme.rtl' text='false' />
        });


        Ext.create("Ext.window.Window", {
            title: "<spring:message code='title.login' text='Login' />",
            height: 310,
            width: 450,
            closable: false,
            layout: "border",
            items: [{
                    xtype: "panel",
                    border: false,
                    bodyCls: "login-header",
                    height: 160,
                    region: "north"
                }, {
                    id: "<%=loginFormId%>",
                    url: "<spring:url value='/secure/auth'/>",
                    xtype: "form",
                    layout: "form",
                    region: "center",
                    bodyPadding: 10,
                    border: false,
                    buttons: [{
                            handler: function() {
                                var form = this.up("form").getForm();
                                if (form.isValid()) {
                                    Ext.getCmp("<%=submitBtnId%>").disable();
                                    form.standardSubmit = true;
                                    form.method = "POST";
                                    form.submit();

                                }
                            },
                            id: "<%=submitBtnId%>",
                            text: "<spring:message code='button.submit' text='Submit' />"
                        }, {
                            handler: function() {
                                var form = this.up("form").getForm();
                                form.reset();
                            },
                            id: "<%=clearBtnId%>",
                            text: "<spring:message code='button.clear' text='Clear' />"
                        }],

                    defaultType: "textfield",
                    defaults: {
                        msgTarget: "side",
                        labelWidth: 100
                    },

                    items: [{
                            fieldLabel: "<spring:message code='input.username' text='Username' />",
                            name: "selfcare_username"
                        }, {
                            fieldLabel: "<spring:message code='input.password' text='Password' />",
                            name: "selfcare_password",
                            enableKeyEvents:true,
                            inputType: "password",
                            listeners: {
                                scope: this,
                                specialkey: function(f, e) {
                                    if (e.getKey() === e.ENTER) {

                                    }
                                }
                            }

                        }]
                }]
        }).show();

    <c:if test="${not empty param.error}">
        var errorMsg = "<c:out value="${SPRING_SECURITY_LAST_EXCEPTION.message}" />";
        if (errorMsg !== "") {
            Ext.MessageBox.show({
                title: "<spring:message code='title.error' text='Error' />",
                msg: errorMsg,
                closable: false,
                buttons: Ext.Msg.OK
            });
        }
    </c:if>
    });
</script>

Answer 1

现在最好在表单上使用defaultButton属性来指定表单上的默认按钮。这是处理器将处理您的ENTER键的按钮。：

http://docs.sencha.com/extjs/6.0/6.0.2-classic/#!/api/Ext.panel.Panel-cfg-defaultButton

Answer 2

您应该附加组件侦听器的键事件，如果该字段非空并且在字段内按下键ENTER或TAB，则此示例正在运行。

suppliers是一个JsonStore，我在params加载商店，这意味着你可以调用你在应用程序中写的任何内容。

{
    xtype: 'textfield',
    id: 'supplier-id',
    flex: 1,
    tabIndex: 1,
    fieldLabel: 'SUPPLIER NO',
    fieldStyle: 'text-align: right; font-size: 12pt',
    margins: '0 5 0 0',
    enablekeyEvents: true,
    listeners: {
        specialkey: function (field, e) {
            if (field.getValue() != 'null') {
                if (e.getKey() === e.ENTER || e.TAB) {
                    suppliers.load({
                        params: {'supplier': field.getValue(), 'type': 'supplier'},
                        callback: function () {
                            Ext.getCmp('supplier-name').setValue(suppliers.data.items[0].data['MATCH_NAME']);
                        }
                    });
                }
            }
        },
        focus: function (e) {
            e.setValue('');
            Ext.getCmp('supplier-name').setValue("");
            suppliers.loadData([], false);
        }
    }
}

Answer 3

使用afterrender

添加侦听器

listeners: {
            afterRender: function(thisForm, options){
                this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                    enter: fnLogin,//give here to login function
                    scope: this
                });
            }
}

Answer 4

对于Sencha：

           listeners: {
                specialkey: function(field, e){
                    if (e.getKey() == e.ENTER) {
                        //submitLogin();
                    }
                }
            },

在ENTER上提交表格按int EXT js

4 个答案: