Дополнительные кнопки Extjs button на форме
Итак. У нас есть extjs form. Обычная такая форма с кнопками save которас сабмитит форму и reset которая ее очищает. И тут нам значит присписило прикрутить на форму еще одну кнопку. Ну к примеру для проверки какой-то. Вот как на картинке. Кнопка используется для проверки xml rpc сервиса. Вот и разберем на этом прмере как эта кнопка работает.
extjs штука неплохая, и позволяет более0менее малой кровью делать в интерфейсе вещи, которые ранее были доступны лишь десктопным приложениям. Итак наша кнопка. По ее нажатию, скрипт должен собрать с формы введенные значения из некороых полей, потом собрать на ихоснове запрос, послать его на сервер и показать нам ответ. Причем как самой extjs формы , так и страницы в целом эта функция касаться не доложна.
Создаем extjs form и добавляем туда необходимые нам поля:
form1Form = new Ext.FormPanel
({"title":"Настройки сайта","labelAlign":"right","labelWidth":150,"width":500,"waitMsgTarget":true,"monitorValid":true}
);
form1set4rpcurlTextField = new Ext.form.Field
({"fieldLabel":"URL сервиса","name":"xmlrpc_url","width":200,"maxLength":255,"allowBlank":true,"xtype":"textfield"}
);
form1set4rpcloginTextField = new Ext.form.Field
({"fieldLabel":"Логин","name":"xmlrpc_login","width":200,"maxLength":25,"allowBlank":true,"xtype":"textfield"}
);
form1set4rpcpasswordTextField = new Ext.form.Field
({”fieldLabel”:”Пароль”,”name”:”xmlrpc_password”,”width”:200,”maxLength”:25,”allowBlank”:true,”xtype”:”textfield”}
);
form1set4rpcidTextField = new Ext.form.Field
({”fieldLabel”:”ID”,”name”:”xmlrpc_id”,”width”:200,”maxLength”:25,”allowBlank”:true,”xtype”:”textfield”}
);
form1set4Fieldset = new Ext.form.FieldSet
({”title”:”Xml Rpc”,”autoHeight”:true,”defaultType”:”textfield”}
);
form1set4Fieldset.add(form1set4rpcurlTextField);
form1set4Fieldset.add(form1set4rpcloginTextField);
form1set4Fieldset.add(form1set4rpcpasswordTextField);
form1set4Fieldset.add(form1set4rpcidTextField);
form1Form.add(form1set4Fieldset);
Вот мы имеем часть формы с полями. Теперь создадим кнопку и тоже добавим ее на форму:
form1set4rpcbuttonButton = new Ext.Button
({"text":"Проверить список"}
);
form1set4Fieldset.add(form1set4rpcbuttonButton);
Затем опишем поведение нашей кнопки. По нажатию на нее мы собираем в кучку значения из некоторых полей формы и на их основе создаем запрос на сервер. А потом в Ext.Msg.alert показываем ответ:
form1set4rpcbuttonButton .on('click',
function (e)
{
var url = form1set4rpcurlTextField.getValue();
var login = form1set4rpcloginTextField.getValue();
var password = form1set4rpcpasswordTextField.getValue();
var conn = new Ext.data.Connection();
conn.request({
url: ‘http://…………………/testrpc/’,
method: ‘POST’,
params: {”url”: url,”login”: login,”password”: password},
success: function(responseObject) {
Ext.Msg.show({
title:’Status’,
msg: responseObject.responseText,
buttons: Ext.Msg.OK,
minWidth: 500,
});
// Ext.Msg.alert(’Status’, responseObject.responseText);
},
failure: function(responseObject) {
Ext.Msg.alert(’Status’, ‘Connect to server lost.
‘+responseObject.responseText);
}
});
}
);
Вот и все.
Comments
Leave a Reply
-
---------- extjs -----------
Powered by FireStats