In the XML view, the introduction of a list using the List tab:
<mvc:View controllerName="sapcp.cf.tutorial.app.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<List items="{/Products}">
<StandardListItem type="Active" press="handleListItemPress" title="{ProductName}"/>
</List>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
The above code registered in the list of elements click handler handleListItemPress, implemented in the controller file:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageBox"
], function (Controller, MessageBox) {
"use strict";
return Controller.extend("sapcp.cf.tutorial.app.controller.View1", {
onInit: function () {
},
// show in a pop-up which list element was pressed
handleListItemPress: function (oEvent) {
MessageBox.show(
"You pressed item: " + oEvent.getSource().getBindingContext(), {
icon: sap.m.MessageBox.Icon.INFORMATION,
title: "It works!",
actions: [sap.m.MessageBox.Action.OK]
}
);
}
});
});
Operating results: Click the list elements:
pop-up dialogue box:
For more Jerry's original article, please pay attention to the public number "Wang Zixi":