Preview Panel

[YGol]

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

 

[NickProstoNick]

Как-то так. В контейнеры помещаешь то что тебе надо. В верхний - репитконтрол с документами без ограничения количества документов.
Сообщение между видом и превьюв - через переменную окружения 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>
<xpanel styleClass="content">

<xpanel styleClass="left"></xpanel>

<xpanel 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></xpanel>

<xpanel 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></xpanel>

</xpanel>
</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]

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

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

 

[NickProstoNick]

Сообщение между видом и превьюв - через переменную окружения 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]

дык в главном сообщении так и написал

 

[NickProstoNick]

дык в главном сообщении так и написал

Когда я отвечал - первое сообщение не было редактировано. Изначально вопрос был просто делить страницу.
Смотри мой предыдущий пост.

 

[YGol]

В общем вот
+ставим свойство 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]

В общем вот
+ставим свойство 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>

Из примеров выдирать все умеют