Отлично.. Как вы можете видеть мы может форматировать нашу таблицу так как захотим. Сегодня мы собираемся научиться как что-нибудь искать в таблице. Легко найти Джона Кеннеди, не потому конечно, что знаешь дату его избрания, но так же потому, что в нашей таблице всего 40 записей. Другое дело, если мы включили всех политиков США... Следовательно мы должны дать пользователю возможность сужать поиск.
Создание формы поиска
Когда мы создали форму мы объявили некоторые поля как глобальные переменные и работали с ними через методы name.setValue() или getValue(). Помните, что из-за этого мы можем иметь только одну форму для добавления записей. В нашем случае это не ограничивает ничего, а целью было сосредоточиться на табличной системе ext. Однако, чтобы показать как подобные вещи следует делать мы создадим следующую форму без глобальных переменных. Следовательно мы сможем открывать несколько форм поиска одновременно. Это очень полезно в наши дни.
Вот как мы сделаем. Когда мы наживаем на кнопку Advanced Search (Расширенный поиск) мы хотим, чтобы открылось новое окно для поиска с пустыми полями и готовое для поиска. Мы бы хотели сделать окно с расширенным поиском по нескольким полям.
Сначала, довайте добавим кнопку поиска Search в панель инструментов (в PresidentListingEditorGrid):
}, '-', {
text: 'Search',
tooltip: 'Advanced Search',
handler: startAdvancedSearch, // search function
iconCls:'search' // we'll need to add this to our css
}
Давайте определим нашу функцию startAdvancedSearch. Вот немного для начала:
function startAdvancedSearch(){
// local vars
var PresidentSearchForm;
var PresidentSearchWindow;
var SearchFirstNameItem;
var SearchLastNameItem;
var SearchPartyItem;
var SearchEnteringItem;
var SearchLeavingItem;
SearchFirstNameItem = new Ext.form.TextField({
fieldLabel: 'First Name',
maxLength: 20,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});
SearchLastNameItem = new Ext.form.TextField({
fieldLabel: 'Last Name',
maxLength: 20,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});
SearchPartyItem = new Ext.form.ComboBox({
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',
valueField: 'partyValue',
anchor:'95%',
triggerAction: 'all'
});
SearchEnteringItem = new Ext.form.DateField({
fieldLabel: 'Entered Office after',
format : 'm/d/Y',
anchor:'95%'
});
SearchLeavingItem = new Ext.form.DateField({
fieldLabel: 'Left Office before',
format : 'm/d/Y',
anchor:'95%'
});
}
Знакомо выглядит? Так и должно быть!!! Это почти тоже самое что мы делали при создании формы.. За исключеним того, что мы не указываем никакие идентификаторы (запомните, что они должны быть уникальны, мы не можем иметь несколько элементов с одинаковыми id) Другое огромное отличие в том, что каждое поле, форма или окно определено прямо в функции. Нам не нужно беспокоится о скрытии окна, мы просто можем открыть другое окно как только это закроется.
Продолжим:
PresidentSearchForm = new Ext.FormPanel({
labelAlign: 'top',
bodyStyle: 'padding: 5px',
width: 300,
items: [{
layout: 'form',
border: false,
items: [ SearchFirstNameItem,SearchLastNameItem,SearchPartyItem,SearchEnteringItem, SearchLeavingItem ],
buttons: [{
text: 'Search',
handler: listSearch
},{
text: 'Close',
handler: resetSearch
}]
}]
});
PresidentSearchWindow = new Ext.Window({
title: 'President Search',
closable:true,
width: 200,
height: 400,
plain:true,
layout: 'fit',
items: PresidentSearchForm
});
Важный момент в этом коде - просто вызовы двух функций, listSearch и resetSearch, которые должны быть определены здесь же локально (смотри следующий параграф) чтобы позволить им получить доступ к локальным значениям полей. У нас есть кнопки Search (искать) и Close (закрыть). Кнопка Search будет запускать поиск а кнопка Close, то очень интересно, также будет выполнять поиск. Вот почему...
function listSearch(){
// render according to a SQL date format.
var startDate = "";
var endDate = "";
if(SearchEnteringItem.getValue() != "") {
startDate = SearchEnteringItem.getValue().format('Y-m-d');
}
if(SearchLeavingItem.getValue() != "") {
endDate = SearchLeavingItem.getValue().format('Y-m-d');
}
// change the store parameters
PresidentsDataStore.baseParams = {
task: 'SEARCH',
firstname: SearchFirstNameItem.getValue(),
lastname : SearchLastNameItem.getValue(),
party : SearchPartyItem.getValue(),
enteringoffice : startDate,
leavingoffice : endDate
};
// Cause the datastore to do another query :
PresidentsDataStore.reload();
}
function resetSearch(){
// reset the store parameters
PresidentsDataStore.baseParams = {
task: 'LISTING'
};
// Cause the datastore to do another query :
PresidentsDataStore.reload();
PresidentSearchWindow.close();
}
// once all is done, show the search window
PresidentSearchWindow.show();
Видите почему? Все что мы делаем это берем оригинальный datastore и изменяем его параметры. Мы затем просим его перезагрузится. А это выполняет новый запрос. Результаты затем отображаются так же как и в начале учебника.
Это объясняет функцию resetSearch. Чтобы сбросить поиск, мы должны установить оригинальные параметры DataStore (а это просто задача listing). Затем мы перезагружаем наш DataStore.
Маленькое упражнение с запросами
Вы уже использовали эти Ajax запросы? Серверный скрипт просто обрабатывает это вызов как любой другой... Давайте запишем ( в database.php)
Сначала в выборе :
case "SEARCH":
searchPresidents();
break;
а затем идет наша функция searchPresidents()
function searchPresidents()
{
$query = "SELECT * FROM presidents pr, parties pa WHERE pr.IDparty = pa.IDparty";
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$enteringoffice = $_POST['enteringoffice'];
$leavingoffice = $_POST['leavingoffice'];
$party = $_POST['party'];
if($firstname != ''){
$query .= " AND firstname LIKE '%".$firstname."%'";
};
if($lastname != ''){
$query .= " AND lastname LIKE '%".$lastname."%'";
};
if($party != ''){
$query .= " AND pr.IDparty = '".$party."'";
};
if ($enteringoffice) {
$query .= " AND tookoffice >= '".$enteringoffice."'";
};
if ($leavingoffice) {
$query .= " AND leftoffice <= '".$leavingoffice."'";
};
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);
if($nbrows>0){
while($rec = mysql_fetch_array($result)){
// render the right date format
$rec['tookoffice']=codeDate($rec['tookoffice']);
$rec['leftoffice']=codeDate($rec['leftoffice']);
$arr[] = $rec;
}
$jsonresult = JEncode($arr);
echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
} else {
echo '({"total":"0", "results":""})';
}
}
Итак мы рассмотрели простой поиск. И он работает достаточно хорошо. Теперь у вас может быть сотни записей а найти любую из них вы сможете очень быстро.
Что запомнить из этой части:
id обьектов должны быть уникальны
Работа с параметрами DataStore
Файлы этой части можно скачать здесь
Источник: http://extjs.com/learn/w/index.php?title=Tutorial:Grid_PHP_SQL_Part8
Комментариев нет:
Отправить комментарий