How to handle the itemPress of sap.m.Table?

后端 未结 5 1103
南方客
南方客 2020-12-03 15:56

I\'ve written an XML view. Inside it there is a table:

相关标签:
5条回答
  • 2020-12-03 16:17

    Simple Solution using sap.m.CustomListItem

    Use set the properties of the ListItem to

    type="Active" press="listPress"

    <List items="{/results}"> 
    <items>
    <CustomListItem type="Active" press="listPress">
    <content>
    <VBox>
        <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Start">
            <items>
                <Text text="{PernrName}" />
                <Text textDirection="RTL" text="{Document Status}" class='subtext'/>
            </items>
        </FlexBox>
        <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="End">
            <items>
                <Text text="{Date}" class='subtext'/>
                <Text textDirection="RTL" text="{Current Processor}" class='subtext'/>
            </items>
        </FlexBox>
    </VBox> 
    </content>
    </CustomListItem>
    

    0 讨论(0)
  • 2020-12-03 16:24

    Add type="Active" to ColumnListItem

    ...
    <items>
        <ColumnListItem type="Active">
            <cells>
                <Text text="{Name}"/>
            </cells>
        </ColumnListItem>
    </items>
    ...
    

    Yang Wang: https://scn.sap.com/thread/3697995

    0 讨论(0)
  • 2020-12-03 16:35

    Define myItemPress member function in the controller for the XML view and reference it as

    itemPress = "myItemPress"
    

    See example

    0 讨论(0)
  • 2020-12-03 16:38

    This really seems to be a frequent issue people face when they use sap.m.ListBase related controls. Let me give you an overview on how to manage the events (and particularly activate them at all):

    The confusion could be related to the sap.m.ListMode of controls inheriting from sap.m.ListBase and the sap.m.ListType of items inheriting from sap.m.ListItemBase.

    Let's assume the following sample List:

    <List
      selectionChange=".onSelectionChange"
      itemPress=".onItemPress"
      delete=".onDelete"
    >
      <items>
        <ObjectListItem
          title="Hello ListItem"
          press=".onObjectListItemPress"
        />
      </items>
    </List>
    

    sap.m.ListMode (Sample)

    If you're using sap.m.List or sap.m.Table, event firing depends on the mode you're using. Unfortunately, a List / Table without a mode property will not fire any event from its side! If you want the List / Table to fire those events, you have to assign to it a mode. For example:

    <List
      mode="SingleSelect"
      ...
    >
    

    These are the possible modes from the sap.m.ListMode documentation:

    None (default)

    Since no mode property is assigned, none of the events will be fired!

    SingleSelect | SingleSelectLeft

    A list control with mode="SingleSelect" shows a radiobutton on the right side of each item and will fire the onSelectionChange event as soon as the user clicks on the given radio button control. Using "SingleSelectLeft" just moves the radio button to the left side of the item.

    SingleSelectMaster

    A list control with mode="SingleSelectMaster" will show you the hand on mouseover and fires the onSelectionChange in case of a click on an item.

    MultiSelect

    A list control in mode="MultiSelect" offers a checkbox and fires the onSelectionChange event on every check and uncheck of an item.

    Delete

    Using the list in mode="Delete" gives you a nice delete button and fires onDelete.


    sap.m.ListType (Sample)

    There's one more property you should have a look at: The type property of your items.

    Every item inherits from sap.m.ListItemBase and thus has an attribute called type. Let's see how it looks like:

    <items>
      <ObjectListItem
        type="Active"
        press=".onObjectListItemPress"
        detailPress=".onDetailPress"
        ...
      />
    </items>
    

    There are these types listed in the sap.m.ListMode documentation:

    Active

    Depending on the mode, the itemPress of the list and press of the list item can be fired. The selected item gets highlighted so the user can see what's selected.

    Detail

    A detail button (with icon sap-icon://edit) is offered which fires the detailPress event.

    DetailAndActive

    As the name says, this is a combination of Detail and Active type. So you have the detail button firing detailPress on button click, and the item itself firing the list event itemPress.

    Navigation

    The items have a navigation like look, and itemPress and item's press are called.

    Inactive

    No item event gets called from the item itself.


    Now let's take a look at your problem. You should either assign your Table control a mode or assign your items a type. After that change the events should get fired.

    Generally I would avoid using a ListMode and a ListType at the same time since there can be unexpected behavior but check it by yourself.

    0 讨论(0)
  • 2020-12-03 16:38

    Another problem in OP's code is that itemPress is used on the level of Table instead of the level of ListItemBase. This will indeed fire click events (if type="Active" is set for the ListItemBase element, as explained in other answers here). BUT: The context of the events will not allow to derive the clicked row in the list! So you get an event, but you will not be able to tell from which item it came.

    Here is what needs to be changed to identify the clicked row in OP's example, using ColumnListItem as an example for ListItemBase:

    Instead of...

    <Table
        ...
        itemPress="onItemPressed"
    >
        <items> 
            <!-- sap.m.ListItemBase -->
        </items>
        <columns>
            <!-- sap.m.Column -->
        </columns>
    </Table>
    

    ... use this:

    <Table
        ...
    >
        <items>
            <ColumnListItem 
                type="Active"
                press="onItemPressed"
            >
            ...
            </ColumnListItem>
        </items>
        <columns>
            <!-- sap.m.Column -->
        </columns>
    </Table>
    

    To derive the model path of the clicked row you can now use code like this:

    onItemPressed: function (oEvt) {
        var sModelPath = oEvt.getSource().getBindingContext('myModelName').getPath();
        var sDiD = this.getView().getModel("myModelName").getProperty(sModelPath + "/myModelFieldName");
    }
    

    You can also add a customData node within the CustomListItem that holds row specific information and access it's key value pairs in the event handler through something like this:

    var aCustomData = oEvt.getSource().getCustomData();
    

    But again:
    Both approaches will only work if onItemPressed is called on ListItemBase / ColumnListItem level!

    0 讨论(0)
提交回复
热议问题