SAPUI5中的分离器控制

我试图实现SAP UI5分离器按钮/控件，它接受一个标签和一个按钮，如Linked in。就像在添加技能时连接的文本一样，显示文本和删除按钮。如果你想删除文本，那么只需点击删除按钮，它会删除（这是发生在链接中）。SAPUI5中的分离器控制

我也想实现使用SAP分离器控制相同的东西，但我面临一些布局问题。我已经尝试了很多来解决这个问题，但没有运气。

这里是我的代码

在代码中共有三个分离器。主分离器称为oSplitterH，它在addFirstPaneContent中节省了0 ..... n个子分支。

var splitterLabel = new Label({ 
    text : 'Splitter ', 
    width: '80px' 
}); 

    var oSplitterH = new sap.ui.commons.Splitter("splitterH"); 

    oSplitterH.setSplitterOrientation(sap.ui.commons.Orientation.Horizontal); 

    oSplitterH.setSplitterPosition("200%%"); 

    oSplitterH.setMinSizeFirstPane("20%"); 

    oSplitterH.setMinSizeSecondPane("30%"); 

    oSplitterH.setWidth("200%"); 

     //adding Labels to both panes 





    var oSplitter2 = new sap.ui.commons.Splitter("splitterH12"); 

    oSplitter2.setSplitterOrientation(sap.ui.commons.Orientation.Vertical); 

    oSplitter2.setSplitterPosition("10%"); 

    oSplitter2.setMinSizeFirstPane("10%"); 

    oSplitter2.setMinSizeSecondPane("10%"); 

    oSplitter2.setWidth("20%"); 

    var oLabel2 = new sap.ui.commons.Label({text: "Part1"}); 

    oSplitter2.addFirstPaneContent(oLabel2); 

    var oLabel2 = new sap.ui.commons.Label({text: "Part2"}); 

    oSplitter2.addFirstPaneContent(oLabel2); 





    var oSplitter3 = new sap.ui.commons.Splitter("splitterH13"); 

    oSplitter3.setSplitterOrientation(sap.ui.commons.Orientation.Vertical); 

    oSplitter3.setSplitterPosition("10%"); 

    oSplitter3.setMinSizeFirstPane("10%"); 

    oSplitter3.setMinSizeSecondPane("10%"); 

    oSplitter3.setWidth("20%"); 

    var oLabe123 = new sap.ui.commons.Label({text: "Part3"}); 

    oSplitter3.addFirstPaneContent(oLabe123); 

    var oLabe1234 = new sap.ui.commons.Label({text: "Part4"}); 

    oSplitter3.addFirstPaneContent(oLabe1234); 









    oSplitterH.addFirstPaneContent(oSplitter2); 

    oSplitterH.addFirstPaneContent(oSplitter3); 



    createProfileMatrix.createRow(splitterLabel, oSplitterH, null, null);

问题是，它总是在垂直取向显示拆分按钮而不是水平像联系在一起的。我也改变了布局成水平，但在垂直取向仍显示。

有什么建议吗？

来源

2013-04-15 user1030128

以下代码可能对您有所帮助。

的index.html

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <link rel="stylesheet" href="main.css"/> 
     <script src="resources/sap-ui-core.js" 
       id="sap-ui-bootstrap" 
       data-sap-ui-libs="sap.ui.commons" 
       data-sap-ui-theme="sap_goldreflection"> 
     </script> 
     <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required --> 

     <script> 
       sap.ui.localResources("sapui5samples"); 
       var view = sap.ui.view({id:"idlinkedIn-label1", viewName:"sapui5samples.linkedIn-label", type:sap.ui.core.mvc.ViewType.JS}); 
       view.placeAt("content"); 
     </script> 

    </head> 
    <body class="sapUiBody" role="application"> 
     <div id="content"></div> 
     <div id="list"></div> 
    </body> 
</html>

的main.css

.tech-area{ 
      border:1px solid gray; 
      border-radius: 5px; 
      width:500px; 
      height:300px; 
      left:0; 
      top:50; 
      position:relative; 
      overflow:scroll; 
     }

SAPUI5视图文件（没有使用控制器文件）

var oLayout; 
sap.ui.jsview("sapui5samples.linkedIn-label", { 

    getControllerName : function() { 
     return "sapui5samples.linkedIn-label"; 
    }, 
    createContent : function(oController) { 
     // create a simple SearchField with suggestion list (list expander 
     // visible) 
     var oSearch = new sap.ui.commons.SearchField("suggestSearch1", { 
      enableListSuggest : true, 
      startSuggestion : 1, 
      search : function(oEvent) { 
       var techName = oEvent.getParameter("query"); 
       addTechnology(techName); 
      }, 
      suggest : doSuggest 
     }); 
     // Button for adding the technology if it is not listed in the available 
     // technologies 
     var oButton = new sap.ui.commons.Button({ 
      text : "Add", 
      tooltip : "Add Technology", 
      press : function() { 
       var tech = sap.ui.getCore().byId("suggestSearch1").getValue(); 
       addTechnology(tech); 
      } 
     }); 

     // create a simple horizontal layout 
     var oLayout = new sap.ui.commons.layout.HorizontalLayout({ 
      content : [ oSearch, oButton ] 
     }); 

     // attach it to some element in the page 
     oLayout.placeAt("content"); 
     oLayout = new sap.ui.commons.layout.HorizontalLayout("target"); 
     oLayout.addStyleClass("tech-area"); 

     // attach it to some element in the page 
     oLayout.placeAt("list"); 

    } 
}); 
// Help function to handle the suggest events of the search field 
var doSuggest = function(oEvent) { 
    var sVal = oEvent.getParameter("value"); 
    var aSuggestions = filterTechnologies(sVal); // Find the technologies 
    var oSearchControl = sap.ui.getCore().byId(oEvent.getParameter("id")); 
    oSearchControl.suggest(sVal, aSuggestions); // Set the found suggestions on 
               // the search control 
}; 
var technologies = [ "Java", ".Net", "PHP", "SAPUI5", "JQuery", "HTML5", "" ]; 
technologies.sort(); 

jQuery.sap.require("jquery.sap.strings"); // Load the plugin to use 
              // 'jQuery.sap.startsWithIgnoreCase' 

// Help function to filter the technologies according to the given prefix 
var filterTechnologies = function(sPrefix) { 
    var aResult = []; 
    for (var i = 0; i < technologies.length; i++) { 
     if (!sPrefix || sPrefix.length == 0 
       || jQuery.sap.startsWithIgnoreCase(technologies[i], sPrefix)) { 
      aResult.push(technologies[i]); 
     } 
    } 
    return aResult; 
}; 
var count = 0; 
var arr = []; 
// function for add the item to horizontal layout 
var addTechnology = function(techName) { 
    var elementIndex = arr.indexOf(techName); 
    // conditional statement for adding the tech to the list 
    if (elementIndex === -1) { 
     count++; 
     // create a horizontal Splitter 
     var oSplitterV = new sap.ui.commons.Splitter({ 
      width : "120px", 
      height : "30px", 
      showScrollBars : false, 
      splitterBarVisible : false 
     }); 
     oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical); 
     oSplitterV.setSplitterPosition("60%"); 
     oSplitterV.setMinSizeFirstPane("60%"); 
     oSplitterV.setMinSizeSecondPane("40%"); 
     // label with dynamic Id 
     var oLabel1 = new sap.ui.commons.Label("tCount" + count, { 
      text : techName, 
      tooltip : techName 
     }); 
     oSplitterV.addFirstPaneContent(oLabel1); 

     var oLabel2 = new sap.ui.commons.Button({ 
      icon : "img/delete.png", 
      press : function() { 
       removeElement(techName); 
       oSplitterV.destroy(); 
      } 
     }); 
     oSplitterV.addSecondPaneContent(oLabel2); 
     sap.ui.getCore().byId("target").addContent(oSplitterV); 
     // Adding the tech to the parent array 
     arr.push(techName); 
     // Emptying the search box 
     sap.ui.getCore().byId("suggestSearch1").setValue(""); 
    } else { 
     sap.ui.commons.MessageBox.alert(techName 
       + " is already added to the list"); 
    } 
} 
// function for removing removed element from parent array 
var removeElement = function(addedTech) { 
    // Find and remove item from an array 
    var i = arr.indexOf(addedTech); 
    if (i != -1) { 
     arr.splice(i, 1); 
    } 
}

请记，我更集中在功能上而不是外观上

谢谢， prodeveloper

来源

2013-12-20 11:44:36 prodeveloper

SAPUI5中的分离器控制

回答

相关问题