GWT無法在具有固定位置的SimplePanel上滾動

Question

我有一個uibinder（CWArticles），它是以下xml主體：

<g:HTMLPanel>
        <div align="center">
            <g:FlexTable ui:field="articlesTable" />
            <div align="right">
                <div>
                    <g:Button ui:field="btnPrevious" styleName="{style.nav-button}">Anterior</g:Button>
                    <g:Button ui:field="btnNext" styleName="{style.nav-button}">Seguinte</g:Button>
                </div>
            </div>
        </div>
        <g:SimplePanel ui:field="articleViewerPanel" />
    </g:HTMLPanel>

最后一個SimplePanel是一個空面板，我用來顯示由用戶添加另一個uibinder（ArticleViewer）的所選文章：

final ArticleViewer av = new ArticleViewer(visibleArticles, pos);
articleViewerPanel.add(av);

Wich具有以下xml正文：

<g:HTMLPanel>
        <g:SimplePanel styleName="{style.clickable-layer}"
            ui:field="clickablePanel" />
        <div align="center" class="{style.content}">
            <div class="{style.img-holder}" align="center">
                <g:SimplePanel ui:field="image" styleName="{style.img}" />
            </div>
            <div class="{style.img-data}">
                <!-- Image Label-->
            </div>
        </div>
    </g:HTMLPanel>

通過應用以下css規則，可以將該面板置於頂部：

.content {
        position: fixed;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 170px;
        left: 0;
        box-shadow: 0px 0px 10px 1px grey;
        z-index: 9000;
    }

一切正常。 唯一的問題是，當用戶嘗試滾動僅背面的原始面板時（CWArticles）移動。

要滾動固定位置的面板（前面的面板），我該怎么做？

在圖像中，帶有圖片和紅色標題的白色面板就是我所說的前面板。 后面的所有內容都是背面的面板（CwArticles）。 正如您在圖片中看到的那樣，當我滾動時，只有后面板移動。 我要滾動前面板。

簡而言之，我正在嘗試實現類似gmail附件查看器的功能。

非常感謝你。

Answer 1

使用ScrollPanel並articleViewerPanel不同ui.xml ，最后使用第三添加它們ui.xml 。

這是示例代碼。 它可能會幫助您理解。

試試這個

public void onModuleLoad() {
    RootPanel.get().add(new SimplePanel3());
}

SimplePanel1.ui.xml

包含FlexTable和導航按鈕

<ui:style>
    .outer {
        border-left: 1px solid #999;
        border-bottom: 1px solid #999;
        cursor: pointer;
        cursor: hand;
    }

    .header {
        background-color: #d3d6dd;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }

    .header td {
        font-weight: bold;
        text-shadow: #fff 0 2px 2px;
        padding: 2px 0 1px 10px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .table {
        table-layout: fixed;
        width: 100%;
    }

    .table td {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 2px 0 2px 10px;
    }

    .nav-button {
        border: 1px solid black;
        background: #CCC;
    }

    .alignRight {
        float: right;
    }

    .border {
        border: 1px solid #999;
    }
</ui:style>

<g:HTMLPanel>
    <g:FlexTable ui:field='header' styleName='{style.header}'
        cellSpacing='0' cellPadding='0' />

    <g:ScrollPanel height="100px" styleName="{style.border}">
        <g:FlexTable ui:field='articlesTable' styleName='{style.table}'
            cellSpacing='0' cellPadding='0' />
    </g:ScrollPanel>

    <g:HorizontalPanel styleName="{style.alignRight}">
        <g:Button ui:field="btnPrevious" styleName="{style.nav-button}">Anterior
        </g:Button>
        <g:Button ui:field="btnNext" styleName="{style.nav-button}">Seguinte
        </g:Button>
    </g:HorizontalPanel>
</g:HTMLPanel>

SimplePanel1.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HTMLTable.Cell;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel1 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel1.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel1> {
    }

    public SimplePanel1() {
        initWidget(uiBinder.createAndBindUi(this));

        header.setText(0, 0, "Name");
        header.setText(0, 1, "Reference");
        header.setText(0, 2, "Price");
        header.setText(0, 3, "Description");

        for(int i=0;i<10;i++){
            articlesTable.setText(i, 0, String.valueOf("Name "+'A'+i));
            articlesTable.setText(i, 1, String.valueOf("Reference "+'A'+i));
            articlesTable.setText(i, 2, String.valueOf("Price "+'A'+i));
            articlesTable.setText(i, 3, String.valueOf("Desc "+'A'+i));
        }

    }

    @UiField
    FlexTable header;

    @UiField
    FlexTable articlesTable;

    public void addClickHandler(final SimplePanel2 simplePanel2) {

        articlesTable.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                System.out.println("Click");

                Cell clickedCell = articlesTable.getCellForEvent(event);
                int rowIndex = clickedCell.getRowIndex();

                simplePanel2.setMessage(articlesTable.getHTML(rowIndex, clickedCell.getCellIndex()));

            }
        });
    }

}

SimplePanel2.ui.xml

沒有變化。 和你提到的一樣。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:style>
        .clickable-layer {
            border: 1px solid black;
            background: #CCC;
        }

        .content {
            position: fixed;
            width: 100%;
            margin: 0;
            padding: 0;
            top: 170px;
            left: 0;
            box-shadow: 0px 0px 10px 1px grey;
            z-index: 9000;
        }

        .img-holder,.img-data,.img {
            background: blue;
        }
    </ui:style>
    <g:HTMLPanel>
        <!-- <g:SimplePanel styleName="{style.clickable-layer}"
            ui:field="clickablePanel" /> -->
        <div align="center" class="{style.content}">
            <div class="{style.img-holder}" align="center">
                <g:SimplePanel ui:field="image" styleName="{style.img}" />
            </div>
            <div class="{style.img-data}">
                <table>
                    <tr>
                        <td>
                            <b>Nome:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblName" />
                        </td>
                        <td width="5px" />
                        <td>
                            <b>Ref:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblReference" />
                        </td>
                        <td width="5px" />
                        <td>
                            <b>Preço:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblPrice" />
                        </td>
                    </tr>
                </table>
                <g:Label ui:field="lblDescription" />
            </div>
        </div>
    </g:HTMLPanel>
</ui:UiBinder>

SimplePanel2.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel2 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel2.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel2> {
    }

    public SimplePanel2() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @UiField
    SimplePanel image;

    @UiField
    Label lblName;

    @UiField
    Label lblReference;

    @UiField
    Label lblPrice;

    @UiField
    Label lblDescription;

    public void setMessage(String html) {
        lblDescription.setText(html);
    }


}

SimplePanel3.ui.xml

它結合了兩個簡單的面板。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:p='urn:import:com.gwt.test.client'>

    <g:HTMLPanel>
        <p:SimplePanel1 ui:field='list' />

        <p:SimplePanel2 ui:field='detail' />
    </g:HTMLPanel>
</ui:UiBinder> 

SimplePanel3.java

package com.gwt.test.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel3 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel3.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel3> {
    }

    public SimplePanel3() {
        initWidget(uiBinder.createAndBindUi(this));

        list.addClickHandler(detail);
    }

    @UiField
    SimplePanel1 list;

    @UiField
    SimplePanel2 detail;

}

屏幕截圖：

Answer 2

我想通了。 我不得不將前面板（顯示大圖的）位置從固定更改為絕對。

.content {
        position: absolute;
        width: 100%;
        margin: 0;
        top: 40px;
        padding: 0;
        left: 0;
        box-shadow: 0px 0px 10px 1px grey;
        z-index: 9000;
    }

感謝您的貢獻。