Preview Panel

YGol

Member
25.11.2013
23
0
#1
Всем привет.
Сталкивался ли кто нибудь с задачей отображения странички как почта в толстом клиенте, с возможностью превью панели?
Рылся в инете ничего пока не нашел.
Собственно задача динамически делить экран пополам перекладиной, вехняя и нижняя часть с прокруткой при необходимости (как в толстом клиенте превью), и общая прокрутка страницы отключена.
Сделал xpage и в стиле указал overflow: hidden (но главная прокрука всей страницы в ней осталась, хоть и неактивна),
в странице 2 Dojo Content Panel (overflow: scroll), у каждой я так понял высоту можно задать в процентах.
Где взять перекладину которую можно будет тянуть вверх вниз и передавать эти значения в панели? ;)
Ну или может у кого нибудь есть другое решение:)
 

NickProstoNick

Статус как статус :)
Lotus team
22.08.2008
1 803
21
#2
Как-то так. В контейнеры помещаешь то что тебе надо. В верхний - репитконтрол с документами без ограничения количества документов.
Сообщение между видом и превьюв - через переменную окружения viewScope или через compositeData
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Код страницы</div></div><div class="sp-body"><div class="sp-content"><!--shcode--><pre><code class='xml'><?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/tst.css"></xp:styleSheet>
</xp:this.resources>
<xp:panel styleClass="content">

<xp:panel styleClass="left"></xp:panel>

<xp:panel styleClass="top">
1<xp:br></xp:br>2<xp:br></xp:br>3<xp:br></xp:br>4<xp:br></xp:br>5<xp:br></xp:br>
6<xp:br></xp:br>7<xp:br></xp:br>8<xp:br></xp:br>9<xp:br></xp:br>0<xp:br></xp:br>
1<xp:br></xp:br>2<xp:br></xp:br>3<xp:br></xp:br>4<xp:br></xp:br>5<xp:br></xp:br>
6<xp:br></xp:br>7<xp:br></xp:br>8<xp:br></xp:br>9<xp:br></xp:br>0<xp:br></xp:br>
1<xp:br></xp:br>2<xp:br></xp:br>3<xp:br></xp:br>4<xp:br></xp:br>5<xp:br></xp:br>
6<xp:br></xp:br>7<xp:br></xp:br>8<xp:br></xp:br>9<xp:br></xp:br>0<xp:br></xp:br>
1<xp:br></xp:br>2<xp:br></xp:br>3<xp:br></xp:br>4<xp:br></xp:br>5<xp:br></xp:br>
6<xp:br></xp:br>7<xp:br></xp:br>8<xp:br></xp:br>9<xp:br></xp:br>0<xp:br></xp:br></xp:panel>

<xp:panel styleClass="bottom">
1<xp:br></xp:br>2<xp:br></xp:br>3<xp:br></xp:br>4<xp:br></xp:br>5<xp:br></xp:br>
6<xp:br></xp:br>7<xp:br></xp:br>8<xp:br></xp:br>9<xp:br></xp:br>0<xp:br></xp:br>
1<xp:br></xp:br>2<xp:br></xp:br>3<xp:br></xp:br>4<xp:br></xp:br>5<xp:br></xp:br>
6<xp:br></xp:br>7<xp:br></xp:br>8<xp:br></xp:br>9<xp:br></xp:br>0<xp:br></xp:br>
1<xp:br></xp:br>2<xp:br></xp:br>3<xp:br></xp:br>4<xp:br></xp:br>5<xp:br></xp:br>
6<xp:br></xp:br>7<xp:br></xp:br>8<xp:br></xp:br>9<xp:br></xp:br>0<xp:br></xp:br></xp:panel>

</xp:panel>
</xp:view>[/CODE]
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">стили CSS</div></div><div class="sp-body"><div class="sp-content"><!--shcode--><pre><code class='css'>.content{

}

.left{
float: left;
height: 100%;
width: 20%;
overflow-y:scroll;
background-color: teal;
}

.top{
margin-left: 20%;
height: 70%;
overflow-y:scroll;
background-color: red;
}

.bottom{
margin-left: 20%;
height: 30%;
overflow-y:scroll;
background-color: yellow;
}[/CODE]
 

YGol

Member
25.11.2013
23
0
#3
Сообщение между видом и превьюв - через переменную окружения viewScope или через compositeData

Благодарю, я так сделал, но когда мышь на границе панелей, она не видит разграничения и перекладину сместить не получается.
может Dojo Border Container надо использовать? пока не понял где обработчик события по вытягиванию панели должен быть
 

NickProstoNick

Статус как статус :)
Lotus team
22.08.2008
1 803
21
#4
Сообщение между видом и превьюв - через переменную окружения viewScope или через compositeData

Благодарю, я так сделал, но когда мышь на границе панелей, она не видит разграничения и перекладину сместить не получается.
может Dojo Border Container надо использовать? пока не понял где обработчик события по вытягиванию панели должен быть
ааа... так ты еще и "тянуть" превьюв хочешь? Говорить надо

<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Код страницы</div></div><div class="sp-body"><div class="sp-content">
<!--shcode--><pre><code class='xml'><?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/tst.css"></xp:styleSheet>
</xp:this.resources>

<xe:djBorderContainer id="djBorderContainer1" styleClass="content" liveSplitters="true">

<xe:djBorderPane id="djBorderPane1" region="left" splitter="true" styleClass="left">1</xe:djBorderPane>

<xe:djBorderPane id="djBorderPane3" region="center" splitter="true">

<xe:djBorderContainer id="djBorderContainer2" liveSplitters="true">
<xe:djBorderPane id="djBorderPane4" region="top" splitter="true" styleClass="top">2</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane2" splitter="true" region="center" styleClass="bottom">3</xe:djBorderPane>
</xe:djBorderContainer>

</xe:djBorderPane>

</xe:djBorderContainer>
</xp:view>[/CODE]

<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">CSS</div></div><div class="sp-body"><div class="sp-content">
<!--shcode--><pre><code class='css'>.content{

}

.left{
height: 100%;
width: 20%;
overflow-y:scroll;
}

.top{
height: 65%;
overflow-y:scroll;
background-color: red;
}

.bottom{
height: 30%;
overflow-y:scroll;
background-color: yellow;
}[/CODE]
 

YGol

Member
25.11.2013
23
0
#7
В общем вот :)
+ставим свойство splitter=true на нужной бордер панели
Код:
<xe:djBorderContainer id="djBorderContainer1" style="width:400px; height:200px;">
<xe:djBorderPane id="djBorderPane1" region="top">top</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane2" region="center">center</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane3" region="bottom">bottom</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane4" region="left">left</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane5" region="right">right</xe:djBorderPane>
</xe:djBorderContainer>
 

NickProstoNick

Статус как статус :)
Lotus team
22.08.2008
1 803
21
#8
В общем вот :)
+ставим свойство splitter=true на нужной бордер панели
Код:
<xe:djBorderContainer id="djBorderContainer1" style="width:400px; height:200px;">
<xe:djBorderPane id="djBorderPane1" region="top">top</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane2" region="center">center</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane3" region="bottom">bottom</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane4" region="left">left</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane5" region="right">right</xe:djBorderPane>
</xe:djBorderContainer>
Из примеров выдирать все умеют :(