You are here: Home / 2013 / Июль / 17 / mapSurfer — javascript-интерфейс — leftPanelWidgets

mapSurfer — javascript-интерфейс — leftPanelWidgets

17 июля 2013 admin
назад
mapSurfer / javascript-интерфейс/ Виджеты левой панели

Объект для управления левыми панелями.

Методы

Метод Описание Параметры
register(xtype, panelClass) Регистрация класса левой панели. xtype — строка, определяющая левую панель.
panelClass — класс левой панели.
createPanel(xtype,options,mainElement,owner) Создание левой панели.
При выполнении этого метода будет закрыта предыдущая левая панели и открыта новая, либо выполнится метод reload у действующей левой панели.		 xtype — строка, определяющая левую панель.
options — опции левой панели.
mainElement — DOM елемент, в который будет помещена левая панель
owner — контекст в котором создана левая панель.
destroyPanel() Закрытие левой панели —
currentPanel() Возвращает текущую левую панель. —

Основной класс левой панели.

Объект options, передается в конструктор при создании элемента класса.

options: {
     dustObject		
     template 
 }	


// объект для построения шаблона
// название шаблона

Методы

Метод Описание
reload(template,dustObject) Перерисовка левой панели. Необходимо использовать, если ранее левую панель занимал экземпляр этого же класса.
destroy() Закрытие левой панели

Методы, которые можно переопределять в виджетах, которые наследуются от левой панели.

Метод Описание параметры
_dustRender(out) Добавление содержимого в панель. out — объект, содержащий в себе html, построенный по переданным template и dustObject.
_createContent() В этой функции по умолчанию происходит формирование html содержимого из template и dustObject и передача его в метод _dustRender. —
_featureClick(event) Данная функция вызывается при стандартных функциях _createContent и _dustRender и переданном шаблоне «features» для каждого объекта {title}. —

События

Событие Описание Параметры
«leftPanel:destroy» Закрытие левой панели. widget — виджет панели

Виджет левой панели с информацией о слое. Зарегистрирован в GP.Widget.LeftPanelFactory, xtype = «layerInfoBox». Методы наследуются от GP.Widget.LeftPanel.

 options: {
     dustObject
     template
     owner
 }

Методы

Метод Описание
reload(template,dustObject,currentLayer) Перерисовка левой панели. Необходимо использовать, если ранее левую панель занимал экземпляр этого же класса.

Доступные шаблоны.

Описание принципов формирования html из шаблонов и dustObject http://akdubya.github.io/dustjs/

Шаблон Структура Описание
«layerInfo» 
<div class="feature-group export-data-block" style="display:none;">
    <h4>Выгруженные данные</h4>
    <div id="statusbar-report-popup">

    </div>
</div>
<div class="feature-group">
    <div class="layer-info-box">
        <h4 {#exportData} style="padding-right: 70px;"{/exportData}>{layerName}</h4>
        {#exportData}
        <div class="export-features">
            <img src="{path}/icons/export-to-csv.png" alt="" class="export-to-csv"/>
            <img src="{path}/icons/export-to-xls.png" alt="" class="export-to-xls"/>
        </div>
        {/exportData}
        <div id="button-curtain">
            <input class="curtain-checkbox" type="checkbox">
            <span class="curtain-title">Шторка</span>
        </div>
        <div class="opacity-block">
            <p>Прозрачность</p>
            <div class="slider-block">
                <div id="slider-value" style="left:{value}%;">{value}%</div>
            </div>
            <div id="slider"></div>
        </div>
        <div class="tabs-block">
            <ul>
                <li><a href="#legend-div">Легенда</a></li>
                {#showFilter}
                <li><a id="filter-tab" href="#filter-div">Фильтры</a></li>
                {/showFilter}
            </ul>
            <div id="legend-div">
                <div class="legend">
                    <img src="{href}" alt="" style="display:none;"/>
                </div>
            </div>
            <div id="filter-div">
                <div class="filters">
                    <div class="filter-container">
                    <div>
                </div>
            </div>

        </div>
    </div>
</div>
Шаблон для создания левой панели с информацией по слою.

Виджет левой панели с отчетами. Зарегистрирован в GP.Widget.LeftPanelFactory, xtype = «reportsBox». Методы наследуются от GP.Widget.LeftPanel.

Доступные шаблоны.

Описание принципов формирования html из шаблонов и dustObject http://akdubya.github.io/dustjs/

Шаблон Структура Описание
«reportForm» 
<div class="feature-group">
    <h4>Готовые отчеты</h4>
    <div id="statusbar-report-popup">

    </div>
</div>
<div class="feature-group jreports">
    <h4>Создать отчет</h4>
    {#reports}
    <div class="feature-item {#display}features-shown{/display}">
        <div class="feature-item-div" id="{id}"><span class="feature-title clicked-title">{title}</span></div>
        <div class="feature-content" {#display}{:else}style="display:none;"{/display}>
        {html|s}
        </div>
    </div>
    {/reports}
</div>
Шаблон для создания левой панели с отчетами.

Виджет левой панели с объектами слоя. Зарегистрирован в GP.Widget.LeftPanelFactory, xtype = «featureBox». Методы наследуются от GP.Widget.LeftPanel.

Доступные шаблоны.

Описание принципов формирования html из шаблонов и dustObject http://akdubya.github.io/dustjs/

Шаблон Структура Описание
«wmsFeatures» 
<div class="feature-group export-data-block" style="display:none;">
    <h4>Выгруженные данные</h4>
    <div id="statusbar-report-popup">

    </div>
</div>
{#featureGroups}
<div class="feature-group">
    <h4 {#exportFeatures} style="padding-right: 70px;"{/exportFeatures} id="{layerId}">{name}</h4>
    {#exportFeatures}
    <div class="export-features">
        <img src="{path}/icons/export-to-csv.png" alt="" class="export-to-csv"/>
        <img src="{path}/icons/export-to-xls.png" alt="" class="export-to-xls"/>
    </div>
    {/exportFeatures}
    {#features}
    <div class="feature-item {#display}features-shown{/display}">
        {#showGeom}
            <img src="{path}/icons/show-feature-geom.png" alt="" title="выделить объект" class="show-feature-geom"/>
        {/showGeom}
        <div class="feature-item-div {#showGeom}feature-item-div-with-icon{/showGeom}" id="{id}"><span class="feature-title clicked-title">{title|s}</span></div>
        <div class="feature-content" {#display}{:else}style="display:none;"{/display}>
            {html|s}
        </div>
    </div>
    {/features}
</div>
{/featureGroups}
Шаблон для списка объектов карты.

Методы

Метод Описание
reload(template,dustObject,firstElementId,findEisForFirstElement) Перерисовка левой панели. Необходимо использовать, если ранее левую панель занимал экземпляр этого же класса.

События

Событие Описание Параметры
«leftPanel:currentFeatureLayer» Слой текущего объекта. layer — слой

Виджет левой панели для создания фиксированной ссылки. Зарегистрирован в GP.Widget.LeftPanelFactory, xtype = «fixedLink». Методы наследуются от GP.Widget.LeftPanel.

Доступные шаблоны.

Описание принципов формирования html из шаблонов и dustObject http://akdubya.github.io/dustjs/

Шаблон Структура Описание

Виджет левой панели для геокодинга. Зарегистрирован в GP.Widget.LeftPanelFactory, xtype = «geoCoding». Методы наследуются от GP.Widget.LeftPanel.

Доступные шаблоны.

Описание принципов формирования html из шаблонов и dustObject http://akdubya.github.io/dustjs/

Шаблон Структура Описание
«features» 
{#featureGroups}
    <div class="feature-group {className}">
        <h4>{name}</h4>
        {#features}
        <div class="feature-item-div" id="{id}"><span class="geocoding-item clicked-title">{title}</span></div>
        {/features}
    </div>
{/featureGroups}
Шаблон для создания простого списка отображения объектов карты.

Posted in