2017-11-16 5 views
1

Ich habe einen Dialog, der in einem Fragment ist. Nachdem Sie die Details eingegeben und auf die Schaltfläche zum Absenden geklickt haben, sollte der Text, der in die Eingabe eingegeben wurde, als MessageToast angezeigt werden. Aber ich bekomme den Fehler: 'Eigenschaft' getValue 'von' undefined 'kann nicht gelesen werden.Wie bekomme ich eine Control byId von einem SAPUI5 Fragment

Unten ist der Code:

onAddMovie: function() { 
     var view = this.getView(); 
     var createDialog = view.byId("CreateDialog"); 
     var oDummyController = { 
      // This is when I clicked the Submit button in dialog 
      submitDialog: function() { 
      var user = sap.ui.core.Fragment.byId("createDialog", "movie_name").getValue(); 
       MessageToast.show(user); 
       createDialog.close(); 
      }, 
      closeDialog: function() { 
       createDialog.close(); 
      } 
     }; 

     if (!createDialog) { 
      createDialog = sap.ui.xmlfragment(view.getId(), "Admin.view.Dialog", oDummyController); 
     } 
     view.addDependent(createDialog); 
     createDialog.open(); 
     if (!createDialog.isOpen()) { 
      //do sth 
     } 
    }, 

Oben ist die Funktion, in der der Dialog angezeigt bekommen und nach dem Absenden-Button drücken, sollte der Text im Eingabe in einem MessageToast angezeigt werden.

XML:

 <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout"> 

     <Dialog id="createDialog" title="Input Movie Details" width="100%" class="sapuiMediumMargin" confirm="handleClose" close="handleClose"> 
      <l:VerticalLayout class="sapUiContentPadding" width="100%"> 
      <l:content> 
       <Input width="100%" placeholder="Movie Name" id="movie_name"/> 
       <HBox alignItems="Center" renderType="Bare"> 
        <Label text="Year of Release" width="50%"/> 
        <ActionSelect selectedItem="Element sap.ui.core.ListItem#__item0" selectedKey="item1" class="sapUiLargeMarginBegin" selectedItemId="__item0" id="__select0" width="50%"> 
         <items> 
          <core:ListItem text="2017" key="item1" id="__item0"/> 
          <core:ListItem text="2016" key="item2" id="__item1"/> 
          <core:ListItem text="2015" key="item3" id="__item2"/></items> 
        </ActionSelect> 
       </HBox> 
       <HBox alignItems="Center" renderType="Bare"> 
        <Label text="Date of Screening" width="50%"/> 
        <DatePicker class="sapUiLargeMarginBegin" width="50%" id="__picker0"/> 
       </HBox> 
       <HBox alignItems="Center"> 
        <Label text="Movie Rating"/> 
        <RadioButtonGroup width="100%" columns="3" selectedIndex="-1" id="__group0"> 
         <buttons> 
          <RadioButton selected="true" groupName="__group0" text="Universal" id="__button0"/> 
          <RadioButton groupName="__group0" text="Adult" id="__button1"/> 
          <RadioButton groupName="__group0" text="U/A" id="__button2"/></buttons> 
        </RadioButtonGroup> 
       </HBox> 
         <HBox alignItems="Center" width="100%" renderType="Bare"> 
        <Label text="Enable Booking" width="70%"/> 
       <CheckBox id="__box0" width="30%" textDirection="LTR"/> 
      </HBox> 
       <FlexBox alignItems="End" alignContent="Center" justifyContent="End" class="sapUiTinyMarginTop"> 


        <SegmentedButton selectedButton="__button3" id="__button21"> 
          <buttons> 
           <Button text="Submit" id="__submit" press="submitDialog"/> 
           <Button text="Cancel" id="__button41" press="closeDialog"/></buttons> 
         </SegmentedButton> 
          </FlexBox> 
       </l:content> 
      </l:VerticalLayout> 
     </Dialog> 

    </core:FragmentDefinition> 
+0

Das Abrufen des Steuerelements vom Fragment hängt davon ab, wie Sie das Fragment erstellt haben: https: // stackoverflow.com/a/47872515/5846045 In diesem Fall gibt 'this.byId (" movie_name ")' das Steuerelement zurück. – boghyon

+0

Mögliches Duplikat von [Zugriff auf Elemente aus XML-Fragment nach ID] (https://stackoverflow.com/questions/39660161/how-to-access-elements-from-xml-fragment-by-id) – boghyon

Antwort

0

Fragment

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout"> 
<Dialog id="createDialog" title="Input Movie Details" width="100%" class="sapuiMediumMargin" confirm="handleClose" close="handleClose"> 
    <l:VerticalLayout class="sapUiContentPadding" width="100%"> 
     <l:content> 
      <Input width="100%" placeholder="Movie Name" id="movie_name"/> 
      <HBox alignItems="Center" renderType="Bare"> 
       <Label text="Year of Release" width="50%"/> 
       <ActionSelect selectedKey="item1" class="sapUiLargeMarginBegin" id="select0" width="50%"> 
        <items> 
         <core:ListItem text="2017" key="item1" id="item0"/> 
         <core:ListItem text="2016" key="item2" id="item1"/> 
         <core:ListItem text="2015" key="item3" id="item2"/></items> 
       </ActionSelect> 
      </HBox> 
      <HBox alignItems="Center" renderType="Bare"> 
       <Label text="Date of Screening" width="50%"/> 
       <DatePicker class="sapUiLargeMarginBegin" width="50%" id="picker0"/> 
      </HBox> 
      <HBox alignItems="Center"> 
       <Label text="Movie Rating"/> 
       <RadioButtonGroup width="100%" columns="3" selectedIndex="-1" id="group0"> 
        <buttons> 
         <RadioButton selected="true" groupName="group0" text="Universal" id="button0"/> 
         <RadioButton groupName="group0" text="Adult" id="button1"/> 
         <RadioButton groupName="group0" text="U/A" id="button2"/></buttons> 
       </RadioButtonGroup> 
      </HBox> 
      <HBox alignItems="Center" width="100%" renderType="Bare"> 
       <Label text="Enable Booking" width="70%"/> 
       <CheckBox id="box0" width="30%" textDirection="LTR"/> 
      </HBox> 
      <FlexBox alignItems="End" alignContent="Center" justifyContent="End" class="sapUiTinyMarginTop"> 
       <SegmentedButton id="button21"> 
        <buttons> 
         <Button text="Submit" id="submit" press="submitDialog"/> 
         <Button text="Cancel" id="button41" press="closeDialog"/></buttons> 
       </SegmentedButton> 
      </FlexBox> 
     </l:content> 
    </l:VerticalLayout> 
</Dialog> 

Controller 
sap.ui.define([ 
    "sap/ui/core/mvc/Controller" 
], function(Controller) { 
    "use strict"; 
return Controller.extend("test001test001.controller.View1", { 
    _oNewProcessDialog:null, 
    onAddMovie: function() { 
    this._getNewProcessDialog().open(); 
    }, 
    submitDialog:function(){ 

    sap.m.MessageToast.show(sap.ui.getCore().byId("movie_name").getValue()); 
    }, 
    closeDialog: function() { 
      this._getNewProcessDialog().close(); 
     }, 

     _getNewProcessDialog: function() { 
     // create dialog lazily 
     if (!this._oNewProcessDialog) { 
      // create dialog via fragment factory 
      this._oNewProcessDialog = sap.ui.xmlfragment("test001test001.view.CreateDialog", this); 
      // connect dialog to view (models, lifecycle) 
      this.getView().addDependent(this._oNewProcessDialog); 
      jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oNewProcessDialog); 
     } 
     return this._oNewProcessDialog; 
    }, 
}); 

});

Wiew

<Button press="onAddMovie"></Button> 
1

Statt mit:

var view = this.getView(); 
var user = sap.ui.core.Fragment.byId("createDialog", "movie_name").getValue(); 

I verwendet:

var view = this.getView(); 
var user = view.byId("movie_name").getValue(); 
       MessageToast.show(user); 

Und es hat funktioniert !!

+0

Sie sollten akzeptieren Ihre eigene Antwort oder eine [ähnliche Antwort] (https://stackoverflow.com/a/47326567/5846045), um andere darüber zu informieren, dass dieses Problem jetzt behoben ist. – boghyon

1

Da Sie den Dialog mit den Ansichten zu schaffen ID

sap.ui.xmlfragment(view.getId(), "Admin.view.Dialog", oDummyController); 

alle Steuer IDs in diesem Fragment wird mit den Ansichten id (this.getView().getId(), z.B. __xmlview1) vorangestellt werden.

Das hat den großen Vorteil, dass alle Fragment-Controls über this.getView().getId() erreichbar sind und somit wirklich "fühlen", als wären sie Teil der View und können so behandelt werden (besonders nützlich bei der Verwendung von Fragmenten zur Strukturansicht).

Deshalb sollten Sie

this.getView().byId("movie_name"); 

verwenden müssen, die für eine Steuerung mit einem id wie __xmlview1--movie_name Abfrage wird am Ende (-- wird als Trennzeichen von SAPUI5 verwendet).

Allgemeines Verhalten von byId Methoden sprechen

Im Allgemeinen sind die byId Methoden wie folgt verhalten:

this.getView().byId(sId) === sap.ui.getCore().byId(sViewId + '--' + sId)); 
sViewId + '--' + sId === this.getView().createId(sId) 
sap.ui.core.Fragment.byId(sFragmentId, sId) === sap.ui.getCore().byId(sFragmentId + '--' + sId)); 

TIPP

Schreiben zwischen den Kontrollen Ihrer Ansicht potentieller ID Konflikte bewusst (s) und dein (e) Fragment (e)!

Verwandte Themen