Отлично, теперь у нас есть таблица отображающая материал. Вы уже можете увидесть все отличные возможности, которые предоставляет ext. Вы можете изменять или перемещать колонки. Вы можете решать, что показывать, а что нет. И самое лучшее, вы можете сделать маленькие красные треугольники в углах ячеек при редактировании.
Теперь вы спросите меня.Что на самом деле происходит когда я редактирую содержимое ячейки? Чтож, ответ достаточно простой... Ничего. Однако, Ext будет делать множество полезных вещей, он позволяет нам обрабатывать сохранение данных ,что означает... Это то что мы должны запрограммировать сами. Об этом и пойдет речь в этой части.
Ограничим некоторые поля.
До того, как мы двинемся вперед, есть одна вещь, которую нам нужно исправить. Как вы можете видеть в SQL таблицах, политические партии это предопределенный список (6 партий вобщем) и он не должен выходить за пределы этого списка.
Лучший путь реализовать это - изменить текстовое поле на выпадающий список в ColumnModel и задать ему различные свойства. Есть два простых варианта:
Вы можете создать новый DataStore который будет подключаться к database.php и запрашивать список партий для отображения. Просто подключите выпадающий список к этому DataStore и все сделано. Это особенно полезно, когда данные могут изменится за это время, но это не случай нашей программы.
Вы можете создать невидимый список в главном HTML файле и обновлять значения своего списка в соотетствии с этим. Это хороший подход, когда вы полностью уверены в статичности данных. Это делается через команду "transform".
Вы можете создать Simplestore, SimpleStore это DataStore который определен прямо в скрипте. Он затем доступен для изменения, но не подключен к прокси и не запрашивает никакие данные.
Теперь, это было бы очень хорошей практикой сделать все с помощью DataStore. Я уверен что это на самом деле вариант, который вы будете употребляять чаще всего и я бы посоветовал вам сделать это сейчас. В качестве маленькой подсказки я напишу изменения в ColumnModel, которые надо сделать.
{
header: 'Party',
dataIndex: 'Name',
width: 120,
editor: new Ext.form.ComboBox({
store: PartiesListingDataStore, // or whatever you've called it
displayField:'Name', // we have two indexes, ID and Name
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true
}),
hidden: false
}
Вы его получили? Отлично, тогда давайте перейдем к третьему варианту решения с помощью SimpleStore.
Нам понадобится хранилище, содержащее все наши статичные данные. Давайте сделаем его сейчас.
header: 'Party',
dataIndex: 'PartyName',
width: 150,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
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',
valueField: 'partyValue',
listClass: 'x-combo-list-small'
})
Как вы можете видеть, мы можем определить какое поле отображать а какое поле использовать как значение. Теперь это выглядит привлекательно. Это означает что мы может напрямую посылать нашему PHP скрипту значение партии (IDparty) и нам не надо дополнительных запросов для этого.
Вот мы и сделали это. Испытайте его работу, вам понравится так, как будто вы только что попробовали вкусный шоколад.
Редактирование
И вот начинается сердце этой части... Как нам сохранять измененные внесения. Есть несколько путей решения этой проблемы...
Вы можете сохранять ряд каждый раз, как только какие то данные изменились. Это будет хорошо работать если у вас несколько независимых ячеек. Это не будет лучшим решеним, если вам надо сохранить много данных.
Вы можете пройтись циклом по таблице и лишь сохранить только те ячейки, которые были изменены в данной точке (регулярное автосохранение или кнопка для сохранения)
Вы можете просто сохранить всю таблицу в какое-то время.
Вы можете ничего не сохранять а пойти съесть чизбургер.
Выбор по-правде за вами, но это зависит от того, что надо сохранять в данный момент. Я не могу сказать что один метод луше чем другой...
Мы выберем первый вариант и будем сохранять президента каждый раз когда одна из этих ячеек изменяется. Мы сделаем это с помощью функции saveThePresident. Эта функция будет делать запрос к файлу database.php с видом задачи 'UPDATEPRES' и отсылать все данные строки. Затем она будет ожидать ответ от нашего серверного PHP скрипта. Все просто: database.php будет отсылать 1 если все сохранено удачно или 0 в другом случае. Если измение было успешно, мы просто перезагрузим наше хранилище и изменения автоматически отобразятся в таблице.
function saveThePresident(oGrid_event){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'database.php',
params: {
task: "UPDATEPRES",
IDpresident: oGrid_event.record.data.IDpresident,
FirstName: oGrid_event.record.data.FirstName,
LastName: oGrid_event.record.data.LastName,
PartyName: oGrid_event.record.data.PartyName,
TookOffice: oGrid_event.record.data.TookOffice.format('Y-m-d'), // this time we'll format it thanks to ext
LeftOffice: oGrid_event.record.data.LeftOffice.format('Y-m-d'),
Income: oGrid_event.record.data.Income
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
PresidentsDataStore.commitChanges(); // changes successful, get rid of the red triangles
PresidentsDataStore.reload(); // reload our datastore.
break;
default:
Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
Ок, теперь, когда наша функция готова нам нужно прикрепить ее к событию изменения содержимого ячейки пользователем.
Это делается в самом конце скрипта.
PresidentListingEditorGrid.on('afteredit', saveThePresident);
Запомните: место, где она будет вставлена неудачное. Я бы мог вставить эту строку в конструктор или сразу после того как моя таблица была создана.
Отлично, клиентская часть сделана. Теперь нам надо перейти к нашему серверу и исправить наш файл database.php file.
Сперва нам надо будет распознавать название задачи, поэтому добавим еще одно значение в список выбора:
case "UPDATEPRES":
updatePresident();
break;
Этого недостаточно. Давайте напишем функцию updatePresident()
function updatePresident()
{
$IDpresident = $_POST['IDpresident'];
$FirstName = addslashes($_POST['FirstName']);
$LastName = addslashes($_POST['LastName']);
$PartyName = $_POST['PartyName'];
$TookOffice = $_POST['TookOffice'];
$LeftOffice = $_POST['LeftOffice'];
$Income = $_POST['Income'];
// First, find the $IDparty
$query = "SELECT IDParty FROM parties WHERE Name='".$PartyName."'";
$result = mysql_query($query);
if(mysql_num_rows($result)>0){
$arr = mysql_fetch_array($result);
$IDparty = $arr['IDParty'];
} else {
echo '0'; // failure
}
// Now update the president
$query = "UPDATE presidents SET firstname = '$FirstName', lastname = '$LastName', tookoffice = '$TookOffice', leftoffice =
'$LeftOffice', IDparty = '$IDparty', income='$Income' WHERE IDpresident=$IDpresident";
$result = mysql_query($query);
echo '1'; // success
}
Отлично, теперь протестируйте то что у нас получилось. Увидели как это работает? Нравиться?
Запомните: Мы просто сделали два запроса (хотя можно было бы сделать и с помощью одного - Догадалиь как?)
один - для получения IDparty для выбранной партии а другой запрос для самого изменения. Запомните, что эти запросы не проверяют ошибки при запросе.
Вы можете скачать файлы этого задания здесь
Комментариев нет:
Отправить комментарий