ExtJS: компонент выбора местонахождения : Программирование для всех. Языки программирования, программирование баз данных, технологии. Статьи для програмиста скачать бесплатно учебники книги документация форум : Статьи

Автор: http://web-dev.info/

Многие проекты на данный момент используют информацию о местонахождении своих клиентов. К таким относятся интернет-магазины, сайты знакомств, банковские операционные ресурсы и прочее. Именно об элементе указания такого рода информации и будет данная статья: Ext.ux.locationSelect реализованный в поле фреймворка ExtJS 2.

Маленькая демка поможет ответить на вопрос о необходимости вчитываться в дальнейшее.

Synopsis

Так сложилось исторически, что управляющим элементом по выбору локации (будем пользоваться этим словом для определения месторасположения, местонахождения и иного) является некоторое количество взаимосвязанных списков <select>, позволяющих последовательно уточнять локацию часть за частью. Выглядеть это может примерно следующим образом. Контрол в сумме удобен, малопротиворечив, но несколько устарел. Вот первые, бросающиеся в глаза, минусы решения:

popup окно для донесения до посетителя всего контрола;
отсутствие кеширования данных селектов;
слабая расширяемость и гибкость — любой функционал необходимо реализовывать самостоятельно.

Что необходимо получить

В одном из проектов мне понадобилось обойти всё вышеперечисленное и ко всему прочему соблюсти следующее:

window based дизайн — ресурс интенсивно редактируется и back end было решено выполнять в виде оконного интерфейса;
т. к. страница могла не перезагружаться при работе на ней часами, то вопрос кеширования данных стоит очень остро;
необходимо не только позволять выбирать локации, но и верно отображать их, в такой, например, ситуации как редактирование, когда все селекты уже означены, а соответствующие списки в них уже загружены.

Инструментарий

Нам потребуется:

Zend Framework;
ExtJS JavaScript Library;
Класс Application_Db_Table_Nestedset, описанный в предыдущей статье.

Использование ExtJS обусловлено требованием №1 — интерфейс window based. Только этот фреймворк способен был справиться со всеми требованиями, которые были предъявлены к процессу работы с данными.

ZF и базирующийся на его составляющих Application_Db_Table_Nestedset это ответ на вопрос стандартизации кода, ответ в ряде мест противоречивый, но все же ответ.

кстати:

данные ZF-элементы дизайна контрола можно исключить и заменить на что-либо более привычное буквально в течении получаса.

Контрол в действии

Использование, благодаря мастерству и прозорливости разработчиков ExtJS, практически ничем не отличается от использования стандартных компонент этого пакета — создать и применить Ext.ux.locationSelect также легко как и создать обычную панель.

Подключение

Подключение реализуется в обычном порядке. Если ExtJS уже используется, то необходимо подключить только само расширение:

view plain copy to clipboard print ?

<head>
<script type="text/javascript" src="/lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/lib/ext/ext-all.js"></script>
<script type="text/javascript" src="/lib/ext/ux/locationSelect.js"></script>
<link href="/lib/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>

<head>
    <script type="text/javascript" src="/lib/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="/lib/ext/ux/locationSelect.js"></script>
    <link href="/lib/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>

для галочки:

используйте правильный DOCTYPE документа, часто многие нетривиальности можно решить раз и навсегда только начав работать в правильном режиме.

Конфигурирование и создание

Ввиду того, что контрол расширяет Ext.form.FieldSet, то видеть себя он предполагает в поле Ext.FormPanel, однако это необязательное требование.

важно:

подробнейшее описание API, конфигураций и немного примеров по каждому из контролов можно обнаружить в ExtJS API Documentation в соответствующей части дерева компонент, пакетов и классов.

Таким образом включить контрол в форму можно простым добавлением его конфигурационного объекта в items формы:

view plain copy to clipboard print ?

var myForm = new Ext.form.FormPanel({
items: [{
xtype: 'locationselect',
url: '/someURL',
prefix: 'some_location_',
title: 'someFieldSetTitle',
valueNotFoundText: 'Не важно',
validator: function(){/*some js-code*/}
autoHeight: true
}]
});

var myForm = new Ext.form.FormPanel({
    items: [{
        xtype: 'locationselect',
        url: '/someURL',
        prefix: 'some_location_',
        title: 'someFieldSetTitle',
        valueNotFoundText: 'Не важно',
        validator: function(){/*some js-code*/}
        autoHeight: true
    }]
});

Нестандартными конфигурационными полями являются:

url — адрес куда хранилища контрола будут обращаться за списками частей локаций (страны, регионы и города), по этому же адресу будет отправляться запрос на полную единовременную загрузку локации целиком. Например, Россия | Рязанская обл. | Рязань;
prefix — префикс имен переменных в которых будут сохранены ID частей локации. Для случая выше при сабмите контрол «сгенерирует» и отправит на сервер переменные _some_location_country, _some_location_region, _some_location_city;
valueNotFoundText — значение этого поля будет присвоено одноименному конфигурационному полю всех Ext.form.ComboBox контрола;
validator — функция будет вызываться при событии выбора любой части локации и позволит обязать, например, к указанию локации полностью.

о незаметном:

обратите внимание на символ подчеркивания в именах генерируемых по префиксу переменных. Дело в том, что комбобокс в ExtJS реализации состоит из двух полей ввода — одно из которых и отправляет значение при сабмите формы т.е. приходится генерировать два похожих имени для каждого комбобокса.

Все остальные поля — наследие конфигурации суперкласса.

Загрузка локации целиком

Существуют задачи когда необходимо позволить выбирать локацию и при этом начать выбор с той, что уже установлена — редактирование анкетных данных, оформление переезда и прочее.

Для этой цели контрол имеет метод loadLocation(), который принимает конфигурационный объект формата {country: integer, region: integer, city: integer}. При его вызове будет произведено обращение по url, указанном при создании, с передачей параметров локации. Если вернувшиеся данные соответствуют допустимому формату, то в соответствующие комбобоксы будут загружены списки с данными, а те части локации, которые были заданы в конфигурационном объекте будут выбраны.

Серверная часть

Так как контрол подкачивает данные с помощью AJAX, необходимо «договориться» о протоколе общения его с сервером. Здесь имеется развилка:

При выборе какой-либо одной части локации посредством комбобокса контрол «расчитывает» на один массив со значениями для следующего комбобокса в json-формате {rows: [{id: numeric, name: string}, …]};
При полной загрузке локации контролу необходимы массивы для двух последних комбобоксов единовременно в json-формате {rows: {region: [{id: numeric, name: string}, …], city: [{id: numeric, name: string}, …]}}.

Мне было удобнее реализовать обе подгрузки в одном действии locationSelectGetSublocations() контроллера AjaxController.

view plain copy to clipboard print ?

public function locationSelectGetSublocationsAction() {
$this->_helper->viewRenderer->setNoRender();
$filter = new Zend_Filter_Digits();
$location = new Location();
if ($this->getRequest()->getParam('country', 0) && $this->getRequest()->getParam('region', 0)){
$countryId = $filter->filter($this->getRequest()->getParam('country', 0));
$regionId = $filter->filter($this->getRequest()->getParam('region', 0));
$result = array(
'region' => $location->getSublocations($countryId),
'city' => $location->getSublocations($regionId)
);
//добавляем опции по умолчанию
array_unshift($result['region'], array('id' => 0, 'name' => 'Не имеет значения'));
array_unshift($result['city'], array('id' => 0, 'name' => 'Не имеет значения'));
echo json_encode(array('rows' => $result));
} else {
$id = $filter->filter($this->getRequest()->getParam('parentId', 1));
$result = $location->getSublocations($id);
//добавляем опцию по умолчанию
array_unshift($result, array('id' => 0, 'name' => 'Не имеет значения'));
echo json_encode(array('rows' => $result));
}
}

public function locationSelectGetSublocationsAction() {
        $this->_helper->viewRenderer->setNoRender();
        $filter = new Zend_Filter_Digits();
        $location = new Location();
        if ($this->getRequest()->getParam('country', 0) && $this->getRequest()->getParam('region', 0)){
            $countryId = $filter->filter($this->getRequest()->getParam('country', 0));
            $regionId = $filter->filter($this->getRequest()->getParam('region', 0));
            $result = array(
                'region' => $location->getSublocations($countryId),
                'city' => $location->getSublocations($regionId)
            );
            //добавляем опции по умолчанию
            array_unshift($result['region'], array('id' => 0, 'name' => 'Не имеет значения'));
            array_unshift($result['city'], array('id' => 0, 'name' => 'Не имеет значения'));
            echo json_encode(array('rows' => $result));
        } else {
            $id = $filter->filter($this->getRequest()->getParam('parentId', 1));
            $result = $location->getSublocations($id);
            //добавляем опцию по умолчанию
            array_unshift($result, array('id' => 0, 'name' => 'Не имеет значения'));
            echo json_encode(array('rows' => $result));
        }
    }

на заметку:

вы можете не использовать ZF, хранить данные локаций в любом удобном для вас виде и делать, что заблагорассудится, главное — возвращать данные как это указано выше.

Белым пятном действия является класс Location — модель таблицы location. Это ничто иное как наследник класса Application_Db_Table_Nestedset о котором велась речь в предыдущей статье. Код модели имеет вид:

view plain copy to clipboard print ?

class Location extends Application_Db_Table_Nestedset{
protected $_name = 'location';
protected $_primary = 'id';
/**
* Return child locations of location
*
* @param integer parent location id
* @return array location items
*/
public function getSublocations($id){
$result = array();
foreach ($this->getChildren($id) as $row)
$result[] = array('id' => $row['id'], 'name' => $row['name']);
return $result;
}
}

class Location extends Application_Db_Table_Nestedset{

    protected $_name = 'location';
    protected $_primary = 'id';

    /**
     *  Return child locations of location
     *
     * @param integer parent location id
     * @return array location items
     */
    public function getSublocations($id){
        $result = array();
        foreach ($this->getChildren($id) as $row)
            $result[] = array('id' => $row['id'], 'name' => $row['name']);
        return $result;
    }
}

Таблица данных локаций

Таблицу локаций было решено вынести в отдельный пункт из-за самой её сути. В свое время пришлось попотеть, чтобы найти в Сети довольно полные данные по странам, регионам и городам. Теперь, когда эта задача решена можно скачать порядка 20к объектов одним кликом.

Локации упорядочены и собраны в одной таблице по схеме Вложенных Множеств. Лично мне кажется, что эта схема является очень удачной для такого рода задач:

данные очень редко изменяются, но часто выбираются;
нет многих таблиц данных и таблиц связей между ними.

Ресурсы

Дата проведения: 28 октября 2008 г.; Место проведения: Амбер Плаза, Москва, Россия. Конференция для веб-разработчиков и разработчиков мобильных приложений в Москве. Узнайте, как наилучшим образом использовать инструменты разработки и API от Google, чтобы создавать социальные, мобильные и картографические приложения, как использовать AJAX/JavaScript инструменты и библиотеки от Google и многое другое из первых уст.

ТОП 10 самых раздражающих факторов для программиста.

Совсем недавно наткнулся в интернете на забавный "хит-парад" наиболее раздражающих вещей для программиста. Поскольку он был на английском — решил перевести текст и несколько адаптировать к нашим реалиям…

К написанию этой статьи меня побудили недавние изыскания Мэри Джо Фоли (Mary Jo Foley) по поводу Windows 7 Server и Windows Server 2008 R2. Если бы не она, я, наверное, и не вспомнил бы о массе информации, имеющейся по этому поводу у меня. Если вы не слышали, Microsoft удалось смутить львиную долю пользователей своим заявлением о том, что Windows Server 2008 R2, чей релиз должен состояться в 2010 году, есть ничто иное, как Windows 7 Server.