Alpha-Beta-Release Blog

Приветствуем читателей. Этот материал первый в нашей новой рубрике, посвященной различным небольшим хитростям, практикам и просто реализации каких-то частных но интересных или полезных задач при помощи ExtJS. Так как я уже достаточно долгое время работа с ExtJS, начиная еще с версии 1.0, и реализовал уже несколько достаточно сложных проектов, то у меня (и моих коллег-разработчиков) уже набралось некоторое количество таких решений, вот и будем ими делится. В то же время эти заметки некоим образом не рецепт успеха, не объект копи/паста, а часто даже не предмет обсуждения - понятно, что в большинстве случаев можно сделать по другому, лучше, а для каких-то целей наше решение вообще не подойдет, кому-то не понравиться стиль или архитектура. Так что рассчитывайте на эти заметки как на руководство к действию, описание того, что и как вообще можно сделать на ExtJS и как просто на некоторую выжимку чужого опыта. Сегодня мы расскажем вам о создании красивого списка, например, товаров или других объектов, когда надо визуально полностью показать параметры объекта и, допустим, его фотографию. Кстати, почему мы - это решение предложено моим сотрудником и просто хорошим другом, Богданом Хрупой (связаться с ним можно здесь, а также посмотреть его личный блог), так что это наш совместный материал.

И так, вот скриншот из пробного макета одного из наших внутренних проектов, иллюстрирующий, что же может выйти в результате. Список помещён внутрь панели-контейнера и может скроллироваться, при наведении мыши на отдельную позицию она подсвечивается. Управление в таком списке лучше всего реализовать через перехват двойного клика по выделенному объекту. А теперь детальнее о создании. Сначала добавим элемент-контейнер, куда будем рендерить список:

span style="color: #3366CC;">'all_cars_list'), {id:'all-tpl'

Далее нам надо определить JSON Store, то есть хранилище, которое будет получать описание того, что отображаем от сервера в формате JSON и эту информацию использовать для заполнения списка.

	// создаем и подгружаем новое хранилище, для SamplePanel и шаблонов
'/test/get_cars_json', // url где спрятан массив
		fields: ['datastore'],
	});
	store.load(); // загрузили store с сервера

При обращении вот по такому адресу (/test/get_cars_json) мы получим от сервера JSON-обьект, в поле datastore которого хранится массив наших данных. Вот пример получаемых данных для формирования такого же списка, как на рисунке выше:

[{datastore: [
{car_id:'1',
  title:'Mazda SX 5',
  desc:'Просто обычная трековая гоночная машина.',
  max_speed :'234',
  fiel_per_km:'12',
  massa_kg:'2333',
  max_power:'1900',
  is_4x4:'no',
  have_turbo:'no',
  icon:'car_1.png' }
]}]

Каждый объект списка строится по следующей структуре:

• car_id - идентификатор объекта, уникальный
• title - название, будет выделено полужирным начертанием
• desc - описание предмета, произвольная строка
• max_speed, fiel_per_km, massa_kg, max_power, is_4x4, have_turbo - произвольные параметры для описания наших объектов, зависят от специфики вашей предметной области
• icon - путь к изображению, которое будет представлять наш объект.

Конечно же, структура описания вашего проекта может отличаться, эти детали не принципиальные. В определении JSONStore мы указывает корневой элемент, который содержит массив объектов, у нас это "datastore". А теперь основное. Компонент, который отвечает за отображение данных и их форматирование - это расширение стандартного класса Ext.DataView, к которому мы добавляем форматирование при помощи шаблона.

span style="color: #3366CC;">'dd''over''dd''car', 'name''Выбор гоночной машины','Выбрано: <strong>''</strong>
 
Ты точно хочешь прокатиться именно на этой машине?');
	}
	});

А вот отдельно шаблон, который в примере выше в переменной tpl, которая передается в XTemplate:

<div id="tpl-ct">
  <tpl for=".">
    <dl>
      <tpl for="datastore">
      <dd car:id="{car_id}" car:name="{title}">
        <img src="/images/cars/{icon}" />
        <h4>{title}</h4>
        <div>
         <p><b>Макс. скорость: {max_speed} км/ч.</b></p>
         <p>Расход топлива: {fiel_per_km} л/100 км.</p>
         <p>Снаряженная масса: {massa_kg} кг.</p>
         <p>Макс. мощность мотора: {max_power} л.с.</p>
         <p>Привод: <b>передний</b></p>
         <p>Турбонаддув: <b>нет</b></p>
         <br />
         <p>{desc}</p>
         <p>Цена: <b>145 000</b> USD</p>
        </div>
      </dd>
      </tpl>
   <div style="clear:left"></div>
   </dl>
  </tpl>
</div>

Сначала мы расширяем существующий класс Ext.DataView, добавляя к нему шаблон, который как раз и отвечает за всю "красивость". Заметьте, что в шаблон передаются переменные, определенные в JSON-объекте. Кроме этого, мы выбрали себе элемент, тег dd, который ограничивает элемент и служит также контейнером для выбора (свойство itemSelector указывает на элемент), ему надо присвоить уникальный id, который будет использоваться для идентификации выбранного. Когда указатель мыши попадает в этот контейнер, срабатывает выделение, мы определяли CSS для этого случая - параметр overClass.

Осталось описать реакцию на клик мыши, то есть выбор указанного элемента. Мы остановились на обычном клике, но, конечно, вы можете переопределить любое событие. В элементе dd, который мы определили как контейнер, есть несколько атрибутов, чтобы облегчить обработку и не трогать, к примеру, store. Нам надо было подтвердить выбор конкретной машины, поэтому у нас два атрибута - идентификатор и название машины. В следующем коде обработки клика мы получает эти параметры из того элемента, где произошел клик:

span style="color: #3366CC;">'dd''car', 'name');

Ну и дальше уже обработка - в данном случае вывод сообщения пользователю и запрос у него подтверждения на выбор. Для этого мы не просто спрашиваем, но и показываем, что же пользователь выбрал - ведь сообщение перекрывает список, поэтому иногда определение выбранного элемента может быть затруднено. Да и просто это более корректное поведение по отношению к пользователю.

Осталось определить для всего этого CSS-стили:

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