2013-02-06 167 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顯示器上以任一方向顯示;