2016-05-10 9 views
0

Ich brauche einen Tree als Aggregation in meinem Projekt. Ich finde etwas darüber, wie man sie erreicht. Aber ich habe immer noch ein Problem ... Jedesmal, mag ich die Methode aufzurufen setTitle des Baumes bekam ich eine Ausnahme: Uncaught TypeError: Cannot read property 'setTitle' of nullKomponenten und Aggregationen in SAPUI5

Mein Code sieht wie folgt aus:

sap.ui.core.UIComponent.extend("ui5_i.myComponent.Component", { 

metadata : { 
    includes: ["../../resources/css/org-struct.css"], 
    properties : { 
     treeTitle: "string", 
     searchPlaceholder: "String", 
     showId: { type:"boolean", defaultValue: true }, 
     data: "object", 
     height :"string", 
     width: "string" 
    }, 
    aggregations: { 
     _Tree : {type:'sap.ui.commons.Tree', multiple: false} 
    } 
}, 

createContent: function(){ 
     console.log("createContent!"); 
     this.set_Tree(new sap.ui.commons.Tree()); 
     .... 
     .... here comes the rest of the view 
} 

Und meine Setter-Methode:

ui5_i.myComponent.Component.prototype.setTreeTitle = function(sTitle) { 
if(typeof(sTitle) === "string" && sTitle != undefined && sTitle !=null){ 
    this.setProperty("treeTitle", sTitle); 
    this.get_Tree().setTitle(sTitle); 
    return this; 
}else{ 
    throw("Property 'treeTitle' is not of type 'string' or 'undefined'!"); 
} 

ich verstehe nicht den Fehler, weil der Inhalt erstellt wird, so dass der Baum kann null nicht sein, ich selbst den Baum sehen, wenn ich die Setter-Methode Kommentar, so kann ich normalerweise die setTitle Methode aufrufen .. Jemand eine Idee, was schief läuft?

EDIT: Ich erkannte, dass mein _Tree immer Null ist, aber ich habe den Setter verwendet, um es zu initialisieren ... Ich änderte es auch und legte die Init des Baumes in meine init() Methode, aber als ich will den Baum Ansicht hinzufügen und einen Fehler wie folgt erhalten: Uncaught TypeError: Cannot read property 'addDelegate' of null Hier ist der gesamte Code:

jQuery.sap.require("sap.ui.core.UIComponent"); 
jQuery.sap.require("sap.ui.commons.Tree"); 
jQuery.sap.declare("ui5_i.myComponent.Component"); 

sap.ui.core.UIComponent.extend("ui5_i.myComponent.Component", { 

    metadata : { 
     includes: ["../../resources/css/org-struct.css"], 
     properties : { 
      treeTitle: "string", 
      searchPlaceholder: "String", 
      showId: { type:"boolean", defaultValue: true }, 
      data: "object", 
      height :"string", 
      width: "string" 
     }, 
    aggregations: { 
     _oTree : {type:'sap.ui.commons.Tree', multiple:false } 
    } 
    }, 

    init : function (){ 
     sap.ui.core.UIComponent.prototype.init.apply(this, arguments); 
     var oSearchSettings = new sap.ui.model.json.JSONModel({ 
      "partially_search": "true", 
      "case_sensitive": "true", 
      "searchedText": "", 
      "aSearchResults" : [], 
      "indexOfSearchResults": "0" 
     }); 
     sap.ui.getCore().setModel("settings", oSearchSettings); 
     this.set_oTree(new sap.ui.commons.Tree()); 
    }, 



    createContent: function(){ 
     var oResponsiveLayout = new sap.ui.layout.form.ResponsiveGridLayout({columnsL: 3,columnsM: 2, columnS: 1}); 
     var oFormLayout = new sap.ui.layout.form.Form({ 
      width: this.getProperty("width"), 
      height: this.getProperty("height"), 
      layout: oResponsiveLayout, 
      formContainers: [ new sap.ui.layout.form.FormContainer({ 
           formElements: [new sap.ui.layout.form.FormElement({ 
                fields: [ this.oSearchField = new sap.ui.commons.SearchField({ 
                placeholder : "Suchtext/ID", 
                search: this._onSearchRequest, 
                layoutData: new sap.ui.layout.GridData({span: "XL8 L8 M8 S8"}) 
               }), this.oArrowUp = new sap.ui.commons.Button({ 
                width: "40px", 
                icon: "resources/images/arrow_up.png", 
                layoutData: new sap.ui.layout.GridData({span: "XL1 L1 M1 S1"}) 
               }), this.oArrowDown = new sap.ui.commons.Button({ 
                width: "40px", 
                icon: "resources/images/arrow_down.png", 
                layoutData: new sap.ui.layout.GridData({span: "XL1 L1 M1 S1"}) 
               }), 
               this.oSettingsMenuButton = new sap.ui.commons.MenuButton({ 
                height: "80%", 
                width: "50px", 
                icon: "resources/images/settings.png", 
                lite: true, 
                layoutData: new sap.ui.layout.GridData({span: "XL2 L2 M2 S2"}), 
                menu: new sap.ui.unified.Menu({ 
                 items: [ new sap.ui.unified.MenuItem({ 
                  text: "ID", 
                  submenu: new sap.ui.unified.Menu({ 
                   items: [ this.oIdMenuButton = new sap.ui.unified.MenuItem({ 
                    text: "IDs anzeigen/ausblenden", 
                    icon: "resources/images/check.png", 
                    select: this._onShowHideIdRequest 
                   })] 
                  }) 
                 }), new sap.ui.unified.MenuItem({ 
                  text: "Suche", 
                  submenu: new sap.ui.unified.Menu({ 
                   items: [ new sap.ui.unified.MenuItem({ 
                    text: "Teilsuche aktivieren/deaktivieren", 
                    icon: "resources/images/check.png", 
                    select: this._onPartiallySearchRequest 
                   }), new sap.ui.unified.MenuItem({ 
                    text: "Groß- und Kleinschreibung beachten/ignorieren", 
                    icon: "resources/images/check.png", 
                    select: this._onCaseSensitiveRequest 
                   })] 
                  }) 
                 })] 
                }) 
               }) ] 
               }),new sap.ui.layout.form.FormElement({ 
                fields: [ this.get_oTree()] 
               })] 
          })] 
     }); 
     return oFormLayout; 
    }, 

    _bindData : function(){ 
     var oJsonModel = new sap.ui.model.json.JSONModel(this.getProperty("data")); 
     this.getAggregation('_oTree').setModel(oJsonModel,"org_structJSON"); 
     this._loadNodes(); 
    }, 

    _loadNodes: function(){ 
     var rootPath = this._getRootPath(); 
     var aParentID = []; 
     for(key in rootPath){ 
      var parentID = rootPath[key].parent; 
      if(aParentID.indexOf(parentID) < 0){ 
       aParentID.push(parentID); 
       this._loadChildNodes(parentID); 
      } 

     } 
    }, 

    _getRootPath : function() { 
     var oJSON = this.oTree.getModel("org_structJSON"); 
     return oJSON.getProperty("/ORG_UNITS"); 
    }, 

    _loadChildNodes : function(parentID) { 
     var rootPath = this._getRootPath(); 
     if(parentID === ""){ 
      for(key in rootPath){ 
       var node = rootPath[key]; 
       if(node.parent === parentID){ 
        var rootNode = this._createNode(node.id, node.short_text); 
        this.getAggregation(_oTree).addNode(rootNode); 
       } 
      } 
     }else{ 
      var aNodes = this.oTree.findAggregatedObjects(true); 
      for(var index = 0; index < aNodes.length; index++){ 
       var nodeID = aNodes[index].getId(); 
       if(nodeID.slice(1,nodeID.length) === parentID){ 
        for(key in rootPath){ 
         if(rootPath[key].parent === parentID){ 
          var oChildNode = this._createNode(rootPath[key].id, rootPath[key].short_text); 
          aNodes[index].addNode(oChildNode); 
         } 
        } 
       } 
      } 
     } 
    }, 

    _createNode : function(id, short_text) { 
     var oNode = new sap.ui.commons.TreeNode({ 
      id : "_" + id, 
      icon : "resources/images/organisation_unit.gif", 
      expanded: false 
     }); 
     if(window.showId){ 
      oNode.setText(short_text + " (" + id + ")"); 
     }else{ 
      oNode.setText(short_text) 
     } 
     return oNode; 
    }, 

    _onSearchRequest : function(oControlEvent) { 

    }, 

    _onShowHideIdRequest : function(){ 

    }, 

    _onPartiallySearchRequest : function(){ 

    }, 

    _onCaseSensitiveRequest : function(){ 

    } 


}); 


ui5_i.myComponent.Component.prototype.setTreeTitle = function(sTitle) { 
    if(typeof(sTitle) === "string" && sTitle != undefined && sTitle !=null){ 
     this.setProperty("treeTitle", sTitle); 
     this.get_oTree().setTitle(sTitle); 
     return this; 
    }else{ 
     throw("Property 'treeTitle' is not of type 'string' or 'undefined'!"); 
    } 
}, 

ui5_i.myComponent.Component.prototype.setData = function(oData) { 
    if(typeof(oData) === "object" && oData != undefined && oData !=null){ 
      this.setProperty("data", oData); 
      this._bindData(); 
      return this; 
    }else{ 
     throw("Property 'data' is not of type 'object' or undefined!"); 
    } 
}, 

ui5_i.myComponent.Component.prototype.setSearchPlaceholder = function(sText) { 
    if(typeof(sText) === "string" && sText != undefined && sText !=null){ 
     this.setProperty("searchPlaceholder", sText); 
     this.oSearchField.setPlaceholder(sText); 
     return this; 
    }else{ 
     throw("Property 'searchPlaceholder' is not of type 'string' or 'undefined!'"); 
    } 
} 
+0

Bedeutet Ihre Bearbeitung, dass Sie Ihre Antwort gefunden haben? Wenn dies der Fall ist, sollten Sie es als tatsächliche Antwort auf die Frage veröffentlichen. – hirse

+0

Nein, ich habe keine Lösung – Chris

+0

In Ihrem Code scheint es, dass 'get_Tree' null zurückgibt, können Sie diese Methode in Ihre Frage aufnehmen? – hirse

Antwort

0

createContent() wird durch UIComponent.init() genannt. Das rufen Sie mit sap.ui.core.UIComponent.prototype.init.apply(this, arguments);.

Also zum Zeitpunkt Ihrer createContent() läuft, haben Sie noch nicht den Baum initialisiert. Verschieben Sie die letzte Zeile Ihrer init()-Funktion in dieser Funktion nach oben.


Edit: Ich kann ein zusätzliches Problem mit Ihrem Code sehen:

Die documentation Staaten folgendes über Aggregationen:

Managed Aggregationen speichern kann eine oder mehrere Verweise auf andere Managed. Sie sind ein Mittel, um den Lebenszyklus der aggregierten Objekte zu steuern: Ein ManagedObject kann jederzeit von höchstens einem übergeordneten ManagedObject aggregiert werden. So

, wenn Sie den Baum zu Ihrem Formular in createContent() hinzufügen wird es automatisch aus dem Komponenten-Aggregation entfernt erhalten.

Ich bin nicht sicher, was Sie versuchen, acomplish, aber vielleicht müssen Sie über eine getMethod nachschlagen, die den Baum nach ID sucht oder Sie könnten eine Zuordnung anstelle einer Aggregation verwenden.

+0

Sorry, aber es funktioniert auch nicht :( – Chris

+0

Ich habe ein anderes Problem gefunden und meine Antwort aktualisiert. Können Sie mehr darüber sagen, wofür Sie diese Aggregation benötigen? – schnoedel

+0

Ok, danke Sie :) Ich dachte, dass ich Aggregationen verwenden sollte, wenn ich einen Baum in meiner Komponente brauche. Aber ich weiß, ich setze den Baum als normales Objekt (this.tree) und benutze den auf diese Weise bekannten Baum. – Chris