openui5網格佈局格式

我有一個網格佈局的openui5對話框。對話框是用xml視圖，幾個按鈕和調用openui5網格佈局格式

// 
    // Create view 
    // 
    var view = sap.ui.view({ 
     type:sap.ui.core.mvc.ViewType.XML, 
     viewName:"some.viewname" 
    }); 

    blahDialog = new sap.ui.commons.Dialog({ 
     modal : true, 
     title: "Create New Blah", 
     buttons : [ btnSave, btnCancel ], 
     content : [ view ] 
    });

在xml視圖中我有一個網格。一列用於標籤，一列用於用戶輸入數據的用戶界面元素。這個元素可以是文本框，日期選擇器，下拉列表等等。我爲該標籤計劃了2列，爲UI元素計劃了6個列。迄今爲止工作良好。但現在我有一個新的要求。在第一行中，我想在文本字段右邊有2個小按鈕。所以我給文本字段只有4列，其餘2個用於新按鈕，每個1個。按鈕只包含一個圖標，所以它們不是很大。這是對話的樣子：

https://dl.dropboxusercontent.com/u/25030606/pic.png

這裏是XML：

<mvc:View xmlns:c="sap.ui.core" 
     xmlns:mvc="sap.ui.core.mvc" 
     xmlns:l="sap.ui.layout" 
     xmlns="sap.ui.commons" 
     controllerName="exporgui5.expensedialog" 
     xmlns:html="http://www.w3.org/1999/xhtml" 
     width="360px"> 
<l:Grid> 
<l:content> 
    <Label text="Trip"> 
    <layoutData> 
     <l:GridData span="L2" /> 
    </layoutData> 
    </Label> 
    <TextField width="100%" value="Some value" editable="false"> 
    <layoutData> 
     <l:GridData span="L4"/> 
    </layoutData> 
    </TextField> 
    <Button icon="icons/luggage--plus.png"><layoutData> 
     <l:GridData span="L1"/> 
    </layoutData> 
    </Button> 
    <Button icon="icons/bin-metal-full.png"><layoutData> 
     <l:GridData span="L1"/> 
    </layoutData> 
    </Button> 
    <Label text="Expense Type"> 
    <layoutData> 
     <l:GridData span="L2" /> 
    </layoutData> 
    </Label> 
    <DropdownBox id="drpExpenseType" 
       items="{expTypes>/k}" 
       displaySecondaryValues="true" 
       change="onExpTypeChange" width="100%"> 
    <layoutData> 
     <l:GridData span="L6"/> 
    </layoutData> 
    <c:ListItem text="{expTypes>shortName}" additionalText="{expTypes>description}" key="{expTypes>id}"/> 
    </DropdownBox> 
    <Label text="Date"> 
    <layoutData> 
     <l:GridData span="L2" /> 
    </layoutData> 
    </Label> 
    <DatePicker locale="DE" id="date" yyyymmdd="{svModel>/dateValue}" change="onDateChange" width="100%"> 
    <layoutData> 
     <l:GridData span="L6" /> 
    </layoutData> 
    </DatePicker> 
</l:content> 
</l:Grid> 
</mvc:View>

我想在一個行，我可以把它的寬度總計爲列的部分總數元素，在我的情況下，這是8.只要我不做這個按鈕thingy它的作品就是這樣。爲什麼「費用類型」標籤顯示在第一行？我需要做些什麼才能讓旅行的文本字段跨越4列並且2按鈕緊挨着它？

任何幫助表示讚賞。

感謝凱

來源

2015-01-15 kaidentity

我不知道電網布局，但我會嘗試使用矩陣佈局。你可以更好地控制你的行，並且還有一個像佈局一樣的網格。由於我沒有經驗的XML視圖，我不能幫你的代碼，但這裏是相關的文檔：https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/commons/demokit/MatrixLayout.html

來源

2015-01-15 20:03:53 Niklas

雖然此鏈接可能會回答問題，但最好在此包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/17870931） – 2017-11-08 01:54:02

根據網格的文件，每行的總和是12.如果你想有文本字段，並在一排的兩個按鈕，你可以指定以下跨度：

TextField: 8 
Button 1: 2 
Button 2: 2 
    SUM: 12

來源

2015-01-16 16:28:59

你應該在defaultSpan屬性添加到您的視圖：

<l:Grid 
    ... 
    defaultSpan="L3 M5 S12" 
>

據API-doc這指定了網格中可以使用的「cols」元素的數量。 L，M和S是屏幕分辨率。 Grid-Layout中的最大列數爲12。

來源

2016-01-18 09:12:45 Benvorth

openui5網格佈局格式

回答

相關問題