Главная > AJAX, ExtJS Framework, ExtJS Tips, Open Source, Разное > ExtJS Tips and Hacks — делаем красивый список с DataStore, DataView и XTemplate

ExtJS Tips and Hacks — делаем красивый список с DataStore, DataView и XTemplate

28 января 2009

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

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

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

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

  1. // создаем и подгружаем новое хранилище, для SamplePanel и шаблонов
  2. '/test/get_cars_json', // url где спрятан массив
  3. fields: ['datastore'],
  4. });
  5. 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, к которому мы добавляем форматирование при помощи шаблона.

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

А вот отдельно шаблон, который в примере выше в переменной 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. Нам надо было подтвердить выбор конкретной машины, поэтому у нас два атрибута - идентификатор и название машины. В следующем коде обработки клика мы получает эти параметры из того элемента, где произошел клик:

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

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

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

  1.  

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

  1. harvi
    29 января 2009 в 10:38 | #1

    Интересно, попробуем.
    А что слышно при этом с ExtJs 3? Слышал что-то про январь я пару месяцев назад. Но вот уже февраль на носу.

  2. 29 января 2009 в 19:38 | #2

    Да-да! Я тоже про январь слышала… Дайте какое-нибудь объяснение что ли.

  3. 29 января 2009 в 19:43 | #3

    ну я никак не разработчик и даже не сотрудник ExtJS LLC 🙂
    Вообще-то, если верить официальной информации, то там указано: Ext JS 3.0 (Early 2009) (http://extjs.com/products/extjs/roadmap.php) так что ждемся

  4. 1 февраля 2009 в 13:32 | #4

    Да уж поскорее бы!

  5. 2 февраля 2009 в 22:29 | #5

    Да, действительно, о январе речи и не шло. То какие-то сплетни. А точной даты они и сами пока сказать не могут.

Комментирование отключено.