SAPUI5 Simple Form 表单示例

效果：

Form.xml.view

<mvc:View controllerName="ZDEMO_TEST.controller.Form" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" displayBlock="true" xmlns="sap.m">
	<Page title="{i18n>pageTitle}">
		<content>
			<Panel headerText="{i18n>panelHeader}" expandable="true" expanded="true" width="auto">
				<f:SimpleForm id="idForm" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
					adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsXL="3" columnsL="3" columnsM="2"
					singleContainerFullSize="false">
					<core:Title text=""/>
					<Label id="idOrder" text="Order"/>
					<Input id="idOrderIn" textAlign="Left" value="OrderIn"/>
					<Label id="idMaterial" text="Material"/>
					<Input id="idMaterialIn" textAlign="Left" value="MaterialIn"/>
					<core:Title text=""/>
					<Label id="idCompanyCode" text="CpnCode"/>
					<Input id="idCompanyCodeIn" textAlign="Left" value="CpnCodeIn"/>
					<Label id="idBtnLab" text=""/>
					<Button id="idBtn" text="Search" press="onSearch" type="Emphasized" width="5rem"/>
					<core:Title text=""/>
					<Label id="idCreateDate" text="CreateData"/>
					<DatePicker id="idCreateDateIn"
						value="{path: 'Head>/createDate', formatOptions:{ strictParsing: true, pattern: 'yyyy年MM月dd日', style: 'short', source: {pattern: 'yyyy-MM-dd'}}}"
						valueFormat="yyyy-MM-dd" displayFormat="long" change="onDateStartChange"/>
				</f:SimpleForm>
			</Panel>
		</content>
	</Page>
</mvc:View>