If I change RootPanel to RootLayoutPanel my browser omits sliders. Why?
When I have a lot of widgets-more then a page can display--the "new" way with
RootLayoutPanel.get().add(w)
does not show sliders in my browser. With the "old" way
RootPanel.get().add(开发者_C百科w)
it does. Why? I want to use the "modern" way (to use TabLayoutPanel) with the GWT layout classes but now I can't.
(My index.html starts with <!doctype html>).
EDIT: If I change to
RootLayoutPanel.get().add( new ScrollPanel( widget) );
it works! I don't know if this is the right way...
They are mutually exclusive, RootPanel supports automatic re-sizing and automatic scroll bars at the browser level. For one example, if you put items in a table and add enough to make them go off the bottom of the screen, RootPanel will automatically add a scroll bar so you can get to the bottom elements, RootLayoutPanel won't, unless you put that element in a ScrollPanel and then it isn't the same as what RootPanel does.
RootLayoutPanel expects you to control all this manually. You can either have one of the other, but not both. You have to tie handlers to the resize events when using RootLayoutPanel to inform the Layout portion when to re-layout things.
The goal of RootLayoutPanel is to allow you to make web based applications that are more desktop like. It isn't supposed to be a replacement for RootPanel, and it isn't better or worse unless it supports or doesn't support what you are trying to do.
I use LayoutPanels and SimplePanels for my main layout (attached to the RootLayoutPanel). For panels that may need scrollbars I just add the style:
.overflow {
overflow: auto;
}
An example template is given below. I think having ScrollPanels instead of SimplePanels would be an equally valid approach, it just depends on which works best for your design / requirements. I prefer to only have scrollbars where they're needed so I use overflow: auto.
<ui:style>
.filterPanel {
padding: 10px;
background-color: #CCCCCC;
}
.overflow {
overflow: auto;
}
</ui:style>
<g:LayoutPanel styleName="ListLayoutPanel">
<g:layer left="0px" width="300px">
<g:SimplePanel ui:field="filterPanel" styleName="{style.filterPanel}" />
</g:layer>
<g:layer left="300px" right="500px">
<g:SimplePanel ui:field="tablePanel" styleName="{style.overflow}"></g:SimplePanel>
</g:layer>
<g:layer width="500px" right="0px">
<g:SimplePanel ui:field="detailPanel" styleName="{style.overflow}"/>
</g:layer>
</g:LayoutPanel>
</ui:UiBinder>
加载中,请稍侯......
精彩评论