.. / 9.3 ExtJS: Форма. Submit

  1. ExtJS-4

Добрый автор книги «Ext JS 3.0 Cookbook» выложил в открытый доступ главу из своей книги, посвященную формам. Пример сабмита из этой книжки, с небольшими модификациями, я и использовал, снабдив его комментариями.

    new Ext.form.FormPanel({ // инициализация панели с формой.
        bodyStyle:'padding: 10px',
        width:400,
        renderTo: 'ex0', // результат поместить в контейнер с ID='ex0'
        id: 'login-form',   // ID панели. Он понадобится для сабмита формы
        bodyStyle: 'padding:15px;',
        url:'test.php', // url по которому будет оправлена форма
        items: [            // массив полей формы
                {   xtype: 'textfield',
                    fieldLabel: 'Login',
                    name: 'login'           // имя поля <input name=«login»

                },
                {
                    xtype: 'textfield',
                    name: 'pass',           // имя поля <input name=«pass»
                    fieldLabel: 'Password',
                    inputType: 'password'   // Не просто  textfield, а  password

                }],
          buttons: [{                         // набор кнопок. Здесь она всего одна
                    text: 'Login',
                    handler: function()
                      { Ext.getCmp('login-form')    // По ID адресуемся к панели
                            .getForm()              // берем форму
                            .submit();
                    }}]
        });

Для отправления сообщения в форму ввели кнопку, на которую навесили функцию отвечающую за отправление данных формы. рассмотрю по шагам

  1. Сначала определяется форма, которую нужно засабмитить. При инициализации этой форме указали свой внутренний ID компонента
    id: 'login-form',
    И теперь к этому компоненту можно обратиться следующим образом:
    Ext.getCmp('login-form')
    т.е. getCmp посволяет получить компонент по id
  2. Из полученного компонента вытаскиваем форму
    Ext.getCmp('login-form').getForm()
  3. Вызываем метод submit формы. Пока я не задал параметры и результат действия формы можно наблюдать только в FireBug'e на вкладке «Сеть». ПРи нажатии на кнопку данные отправляются и какой-то ответ получается. Но результат уже есть - данные отправляются. Далее рассмотрю как получать и обрабатывать эти данные.

2. Обработка отклика

Теперь можно рассмотреть рассмотреть подробнее параметры Submit. Ниже я приведу только ту часть кода, которая изменилась.

.getForm()              // берем форму
.submit({               // сабмитим
        success:        // устанавливаем обработчик норм. завершения
           function(form, action){
               //  action.result - json отклик сервера Ext.Msg.alert(action.result.msg);
                                                   },
        failure:            // устанавливаем обработчик ошибки
                function(form, action){ Ext.Msg.alert(action.result.msg);
           }
});

В качестве данных передается объект, в котором указаны действия, которые отвечают за получение отклика сервера
success - удачный результат;
failure - неудачный результат;
До кучи среди параметров Submit можно задать какие-то дополнительные параметры, URL который перекрывает тот, что задан в форме, методы отправки (post,get), заголовки (headers) и др. Подробнее, см документацию.

Сервер должен прислать нечто в формате JSON, в котором в качестве подтверждения должно быть свойство «success», которое свидетельствует о том что обработка прошла.
Пример отклика сервера об успешной обработке:

{success:true,myFirstMsg:'OK!'}

Пример отклика сервера об ошибке:

{success:false,msg:'Error for example!'}

Через failure так же можно передавать поля, которые заполнены с ошибкой и соответствующие тексты сообщения об ошибке. Но это отдельная тема, которую буду рассматривать в следующей части.

Если сервер в момент запроса обвалился, результат все равно поступит на failure.

  1. 2011-12-04
  2. ExtJS-4
  1. docs.sencha.com/ext-js/4-0/#%21/api/Ext.form.Basic - Полный список параметров для Submit
  2. docs.sencha.com/ext-js/4-0/#!/api - Form API на официальном сайте
  3. www.sencha.com/learn/a-basic-login/ - sencha / Learn / Ext JS A Basic Login
  4. www.quizzpot.com/2009/10/ext-js-basic-forms-and-fields/ - quizzpot.com ExtJS basic forms and fields
  5. www.packtpub.com/ext-js-30-cookbook/book - packtpub.com Ext JS 3.0 Cookbook — Load, Validate, and Submit Forms
Go Index Test