ExtJS Tips and Hacks — делаем красивый список с DataStore, DataView и XTemplate
Приветствуем читателей. Этот материал первый в нашей новой рубрике, посвященной различным небольшим хитростям, практикам и просто реализации каких-то частных но интересных или полезных задач при помощи 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-стили:
Некоторым недостатком такого вариант является дублирование стилей, так как идентификаторы везде разные, в случае, если у вас несколько таких списков на странице. В таком случае надо будет перестроить немного архитектуру, но это уже предлагаю сделать Вам...
Categories: AJAX, ExtJS Framework, ExtJS Tips, Open Source, Разное
Интересно, попробуем.
А что слышно при этом с ExtJs 3? Слышал что-то про январь я пару месяцев назад. Но вот уже февраль на носу.
Да-да! Я тоже про январь слышала… Дайте какое-нибудь объяснение что ли.
ну я никак не разработчик и даже не сотрудник ExtJS LLC 🙂
Вообще-то, если верить официальной информации, то там указано: Ext JS 3.0 (Early 2009) (http://extjs.com/products/extjs/roadmap.php) так что ждемся
Да уж поскорее бы!
Да, действительно, о январе речи и не шло. То какие-то сплетни. А точной даты они и сами пока сказать не могут.