2013-02-06 75 views
0

我想要一个UI填充物理显示器,而不在外部滚动条并调整为不同大小/宽高比的显示。基本空间分为2个垂直面板。其中一个面板旨在具有固定部分和可滚动区域。使用固定大小块和滚动面板填充垂直面板

function doGet() { 
    var app = UiApp.createApplication(); 
    // overall panel to fill available display 
// var container = app.createSimplePanel().setSize("100%","100%"); 
    // Contains a panel to be divided in two 
    var outer = app.createHorizontalPanel().setSize("100%","100%"); 
    // Two vertical panels (equal size) filling available space within outer 
    var p1 = app.createVerticalPanel().setSize("100%","100%"); 
    var p2 = app.createVerticalPanel().setSize("100%","100%"); 
    // Left hand panel p2 holds two panels. One fixed height 
    var p4 = app.createVerticalPanel().setSize("100%","20PX"); 
    var scrollPanel = app.createScrollPanel().setId('sp').setTag('Empty').setSize("100%","100%"); 
    // The scroll panel is to hold a variable number of elements and use the space available to display the maximum 
    // demonstrated by a vertical panel with label widgets 
    var p3 = app.createVerticalPanel().setSize("100%","100%"); 
    for (i=0;i<100;i++){ 
    var lab4 = app.createLabel("Te"+(i+4)).setSize("100%","100%"); 
    p3.add(lab4); 
    } 
    scrollPanel.add(p3); 
    // label to occupy fixed space above scrolled list 
    var lab1 = app.createLabel ("Testing********************************************************************************************************************************************************************1"); 

    // label at top of right hand panel 
    var lab2 = app.createLabel("Testing********************************************************************************************************************************************************************2"); 



    p2.add(lab2); 
    p4.add(lab1); 
    // scroll panel below label panel 
p1.add(p4) 
    p1.add(scrollPanel); 
    // add some formatting to make panels show up 
    applyCSS(outer,_outerContainer) 
    applyCSS(p1,_innerContainer) 
    applyCSS(p4,_outerContainer) 
    applyCSS(p2,_innerContainer) 
    applyCSS(p3,_innerContainer) 
    outer.add(p1).add(p2); 
// container.add(outer); 
    //app.add(container); 
    app.add(outer); 
    return app; 
} 

(1)我应该怎么做才能将显示屏分成2个相同大小的面板?大小显示取决于内容的相对大小。 (2)如何获得垂直面板P1以在可用物理空间内最大化滚动面板的大小?按照编码,固定块被正确放置,并且滚动面板在包含垂直面板的一半处开始。

回答

0

位的反复试验后......答案是

(1.1)使用绝对面板,而不是垂直面板。

(1.2)了解宽度和高度规格是关于内容的,因此您必须考虑填充和边距。没有那些分成2个相等的列的人可以通过宽度50%的AbsolutePanel获得。

(2)分割的第一列到2使用AbsolutePanel具有高度30PX和高度100%的垂直面板(以包含scrollPanel) 结果与外界没有滚动条...全宽&高度显示;电脑显示器上滚动面板上的滚动条;全宽&高度显示,外面没有滚动条;滚动面板中的可滚动显示(无滚动条)在i-pad显示器上以任一方向显示;