В форме ExtJS, как запретить ввод-как-отправлять только для полей textarea? - PullRequest
4 голосов
/ 17 марта 2011

У меня есть следующая форма, которая перехватывает клавишу ENTER, поэтому, когда пользователь находится в текстовом поле и нажимает ENTER, форма будет отправлена 1008 *, который отлично работает.

Проблема в том, что когда пользователь находится в поле textarea , событие также запускается, что нежелательно, поскольку в этом случае пользователь просто имел в виду, что ENTER должен переместить курсор вниз на одну строку. *

Как изменить следующий код, чтобы обработчик событий мог выполняться, когда курсор находится в любом поле, кроме поля textarea?

var simple_form = new Ext.FormPanel({
    labelWidth: 75,
    frame:true,
    style: 'margin: 10px',
    title: 'Simple Form',
    bodyStyle:'padding:5px 5px 0',
    width: 700,
    defaults: {width: 230},
    defaultType: 'textfield',

    items: [{
            fieldLabel: 'Name',
            name: 'name'
        }, {
            fieldLabel: 'Description',
            name: 'description',
            xtype: 'textarea'
        }

    ],
    buttons: [{
            text: 'Save',
            handler: function() {
                if(simple_form.getForm().isValid()){
                    simple_form.getForm().getEl().dom.action = 'save_form.php';
                    simple_form.getForm().getEl().dom.method = 'POST';
                    simple_form.getForm().submit({
                        success : function(form, action) {
                            changeMenuItemInfoArea(start_info_panel2, 'Data was saved2, check file: output.txt (this is a new component)');
                            simple_form.hide();
                        }
                    })
                } else {
                    Ext.Msg.minWidth = 360;
                    Ext.Msg.alert('Invlaid Form', 'Some fields are invalid, please correct.');
                }
            }
        },{
            text: 'Cancel',
            handler: function(){
                Ext.Msg.alert('Notice', 'Cancel was pressed.');
            }
        }],
    keys: [
        { key: [Ext.EventObject.ENTER], handler: function() {
                Ext.Msg.alert("Alert","(this will save the form)");
            }
        }
    ]
});

Добавление

Спасибо @Robby, это работает, вот мой код после того, как я встроил ваше решение:

var simple_form = new Ext.FormPanel({
    labelWidth: 75,
    frame:true,
    style: 'margin: 10px',
    title: 'Simple Form',
    bodyStyle:'padding:5px 5px 0',
    width: 700,
    defaults: {width: 230},
    defaultType: 'textfield',

    items: [{
            fieldLabel: 'Name',
            name: 'name'
        }, {
            fieldLabel: 'Description',
            name: 'description',
            xtype: 'textarea'
        }

    ],
    buttons: [{
            text: 'Save',
            handler: save_the_form
        },{
            text: 'Cancel',
            handler: function(){
                Ext.Msg.alert('Notice', 'Cancel was pressed.');
            }
        }],
    keys: [
        { key: [Ext.EventObject.ENTER], handler: function(key, event) {
                var elem = event.getTarget();
                var component = Ext.getCmp(elem.id);
                if(component instanceof Ext.form.TextArea) {
                    return;
                }
                save_the_form();
            }
        }
    ]
});

function save_the_form() {
    if(simple_form.getForm().isValid()){
        simple_form.getForm().getEl().dom.action = 'save_form.php';
        simple_form.getForm().getEl().dom.method = 'POST';
        simple_form.getForm().submit({
            success : function(form, action) {
                changeMenuItemInfoArea(start_info_panel2, 'Data was saved2, check file: output.txt (this is a new component)');
                simple_form.hide();
            }
        })
    } else {
        Ext.Msg.minWidth = 360;
        Ext.Msg.alert('Invlaid Form', 'Some fields are invalid, please correct.');
    }
}

1 Ответ

2 голосов
/ 17 марта 2011

Нечто подобное может работать.Замените обработчик этим.

handler: function(key, event) {
    var elem = event.getTarget(); // get the element that the event targets
    var component = Ext.getCmp(elem.id); // get the Ext component by id
    if(component instanceof Ext.form.TextArea) { // if its a text area return
        return;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...