Отлично, мы создали нашу таблицу и теперь даже можем вносить в нее изменения. Они записываются прямо в нашу SQL таблицу. Эта часть учебника научит вас добавлять новые записи в таблицу.
Есть много путей сделать это. Один из вариантов - это вставка пустой новой записи и ее редактирование. Это вариант, предпочитаемый M. LeCompte. Мы собираемся сделать это несколько другим способом. Мы создадим новое окно, которое будет содержать форму для заполнения данных президента.
Создание формы
Отлично, давайте посмотрим, какие поля формы нам понадобятся:
* Текстовое поле имени президента
* Текстовое поле фамилии
* Два поля даты - для ввода дат президентсва.
* Числовое поле для ввода поступлений
* Выпадающий список для партии
Все это надо поместить в форму и отобразить в окне. Давайте сделаем это вначале скрипта:
var PresidentCreateForm;
var PresidentCreateWindow;
Чтобы каджому все было ясно и понятно мы будем создавать каждое поле до того, как добавлять его в форму. Каждое поле будет глобальной переменной (это не лучший вариант, позже вы сможете создавать различные идентификаторы для каждого поля и ссылаться на них) Просто запомните, вам бы не захотелось иметь 35078 глобальных переменных в программе... Также, почему мы делаем сейчас все таким способом - это защита от запуска двух форм одновременно.
Запомните: Если вы еще не ознакомились с нашей "подложкой" для кода приложения, позже вам лучше посмотреть учебник по Подложке (Структуре) Приложений сделаный Jozef Sakalos.
Давайте определим наши поля вначале скрипта:
var FirstNameField;
var LastNameField;
var EnteringOfficeField;
var LeavingOfficeField;
var IncomeField;
var PartyField;
Нам нужно написать код который описывает назначения каждого поля: (внутри функции onReady):
FirstNameField = new Ext.form.TextField({
id: 'FirstNameField',
fieldLabel: 'First Name',
maxLength: 20,
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});
LastNameField = new Ext.form.TextField({
id: 'LastNameField',
fieldLabel: 'Last Name',
maxLength: 20,
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});
EnteringOfficeField = new Ext.form.DateField({
id:'EnteringOfficeField',
fieldLabel: 'Entering Office',
format : 'm/d/Y',
allowBlank: false,
anchor:'95%'
});
LeavingOfficeField = new Ext.form.DateField({
id:'LeavingOfficeField',
fieldLabel: 'Leaving Office',
allowBlank: false,
format : 'm/d/Y',
anchor:'95%'
});
IncomeField = new Ext.form.NumberField({
id:'IncomeField',
fieldLabel: 'Income',
allowNegative: false,
allowBlank: false,
anchor:'95%'
});
Все очень просто и понятно. Теперь у нас есть поля... Вам нравится? Запомните, что поле должно быть связано с данными в SQL таблице. В 3 Части мы говорили об этом при использовании DataStore. В 4 части мы видим три различных варианта заполнения нашего выпадающего списка.
В этой части учебника мы продолжим использование SimpleStore. Вам следует держать в памяти, что заполнение нашего списка из предопределенного HTML списка может создать некоторые проблемы совместимости броузера (я подумал о бедных пользователях IE немножко...)
PartyField = new Ext.form.ComboBox({
id:'PartyField',
fieldLabel: 'Party',
store:new Ext.data.SimpleStore({
fields:['partyValue', 'partyName'],
data: [['1','No Party'],['2','Federalist'],['3','Democratic-Republican'],['4','Democratic'],['5','Whig'],['6','Republican']]
}),
mode: 'local',
displayField: 'partyName',
allowBlank: false,
valueField: 'partyValue',
anchor:'95%',
triggerAction: 'all'
});
Создание формы
Теперь все поля созданы и готовы, надо создать форму для них:
PresidentCreateForm = new Ext.FormPanel({
labelAlign: 'top',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:0.5,
layout: 'form',
border:false,
items: [FirstNameField, LastNameField, PartyField]
},{
columnWidth:0.5,
layout: 'form',
border:false,
items: [EnteringOfficeField, LeavingOfficeField, IncomeField]
}]
}],
buttons: [{
text: 'Save and Close',
handler: createThePresident
},{
text: 'Cancel',
handler: function(){
// because of the global vars, we can only instantiate one window... so let's just hide it.
PresidentCreateWindow.hide();
}
}]
});
PresidentCreateWindow= new Ext.Window({
id: 'PresidentCreateWindow',
title: 'Creating a New President',
closable:true,
width: 610,
height: 250,
plain:true,
layout: 'fit',
items: PresidentCreateForm
});
Ок... неплохо да? Недо запомнить одну важную вещь, то что каждый вложенный элемент имеет поле layout (подложка). Не забудьте его, так как это тема множества топиков на форумах... Ну хорошо, теперь у нас есть отличная форма. До того, как мы ее покажем, нам нужно перехватывать события кнопок и создать функции для каждого из них для сохранения данных. Хорошая штука в том, что мы так создали форму в том мы можем напрямую получать значения полей с помощью методов setValue() или getValue().
Давайте сначала создадим небольшие функции для работы с формой.
// reset the Form before opening it
function resetPresidentForm(){
FirstNameField.setValue('');
LastNameField.setValue('');
EnteringOfficeField.setValue('');
LeavingOfficeField.setValue('');
IncomeField.setValue('');
PartyField.setValue('');
}
// check if the form is valid
function isPresidentFormValid(){
return(FirstNameField.isValid() && LastNameField.isValid() && EnteringOfficeField.isValid() && LeavingOfficeField.isValid() && IncomeField.isValid() && PartyField.isValid());
}
// display or bring forth the form
function displayFormWindow(){
if(!PresidentCreateWindow.isVisible()){
resetPresidentForm();
PresidentCreateWindow.show();
} else {
PresidentCreateWindow.toFront();
}
}
Создание президента
Теперь нам нужно реализовать метод сохранения. Вы найдете его достаточно простым по сравнению с тем, что мы делали при редактировании ячеек:
function createThePresident(){
if(isPresidentFormValid()){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'database.php',
params: {
task: "CREATEPRES",
firstname: FirstNameField.getValue(),
lastname: LastNameField.getValue(),
enteringoffice: EnteringOfficeField.getValue().format('Y-m-d'),
leavingoffice: LeavingOfficeField.getValue().format('Y-m-d'),
income: IncomeField.getValue(),
party: PartyField.getValue()
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
Ext.MessageBox.alert('Creation OK','The president was created successfully.');
PresidentsDataStore.reload();
PresidentCreateWindow.hide();
break;
default:
Ext.MessageBox.alert('Warning','Could not create the president.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
} else {
Ext.MessageBox.alert('Warning', 'Your Form is not valid!');
}
}
Отлично... Это было неплохо, да? Теперь все что нам нужно это каким-нибудь образом вызывать displayFormWindow(). Мы можем делать это через контекстное меню (правый клик) который опишем позже, или мы можем сделать это с помощью панели инструментов. Давайте сделаем эту панель:
Нам просто нужно добавить следующее в наш конструктор EditorGrid:
tbar: [{
text: 'Add a president',
tooltip: 'Great Tooltip',
iconCls:'add', // this is defined in our styles.css
handler: displayFormWindow
}]
Последние штрихи
Отлично. Мы еще не все сделали. Нам нужна серверная обработка запроса CREATEPRES.
Идем в файл database.php и вставим ее:
В выборе:
case "CREATEPRES":
createPresident();
break;
И напишем саму функцию:
function createPresident(){
$firstname = addslashes($_POST['firstname']);
$lastname = addslashes($_POST['lastname']);
$enteringoffice = $_POST['enteringoffice'];
$leavingoffice = $_POST['leavingoffice'];
$income = $_POST['income'];
$party = $_POST['party'];
// Here we should probably do some database checking, to make sure that we do not have the same entry twice for ex... And we would return a different error code (ECHO '0' or whatever you want...) For now we'll pretend like the entry is valid.
$query = "INSERT INTO presidents (`IDpresident` ,`IDparty` ,`firstname` ,`lastname` ,`tookoffice` ,`leftoffice` ,`income` ) VALUES (NULL , '$party', '$firstname', '$lastname', '$enteringoffice', '$leavingoffice', '$income')";
$result = mysql_query($query);
echo '1';
}
Вот теперь вы можете добавлять президентов в вашу таблицу.
Что надо запомнить из этой части:
-Обязательно про SimpleStore
Файлы этой части учебника доступны здесь
Иточник: http://extjs.com/learn/Tutorial:Grid_PHP_SQL_Part5
Комментариев нет:
Отправить комментарий