Управление сплиттерами в SAPUI5

Я пытаюсь реализовать кнопку/элемент сплиттера SAP UI5, который принимает одну метку и одну кнопку, например, связанную. Как и в случае добавления ваших навыков, отображение текста вместе с кнопкой удаления. Если вы хотите удалить текст, просто нажмите кнопку «Удалить», он удалит (это то, что происходит в соединении).Управление сплиттерами в SAPUI5

Я также хочу реализовать одно и то же с помощью SAP splitter control, но я столкнулся с проблемой макета. Я много пробовал исправить эту проблему, но не повезло.

Вот мой код

В коде там три разветвителей в общей сложности. Основной сплиттер под названием oSplitterH, который сохраняет 0 ..... n субподрядчиков в свой addFirstPaneContent.

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

ответ

Смежные вопросы