1

我正在尝试实现 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);
4

1 回答 1

0

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

索引.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);
    }
}

请注意,我更关注功能而不是外观

谢谢,开发者

于 2013-12-20T11:44:36.847 回答