sap.ui.jsview("grid.grid", {
getControllerName : function() {
return "grid.grid";
},
createContent : function(oController) {
var oGridForm = new sap.ui.layout.Grid({
hSpacing: 1,
vSpacing: 1,
content: [
new sap.ui.commons.Label({
id:"lbl1",
text: 'Firstname',
layoutData : new sap.ui.layout.GridData({
span: "L3 M3 S5"
})
}).addStyleClass("labelClass"),
new sap.ui.commons.TextField({
id:"fld",
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L7 M9 S12"
})
}).addStyleClass("txtFldClass"),
new sap.ui.commons.Label({
text: 'Lastname',
layoutData : new sap.ui.layout.GridData({
span: "L3 M3 S12",
})
}).addStyleClass("labelClass"),
new sap.ui.commons.TextField({
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L7 M9 S12"
})
}),
new sap.ui.commons.Label({
text: "ZIP / City",
layoutData : new sap.ui.layout.GridData({
span: "L3 M3 S12",
})
}).addStyleClass("labelClass"),
new sap.ui.commons.TextField({
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L1 M1 S12"
})
}),
new sap.ui.commons.TextField({
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L6 M8 S12"
})
}),
new sap.ui.commons.Button({
text: 'Submit',
width: "100%",
layoutData : new sap.ui.layout.GridData({
indent: "L3 M3",
span: "L3 M3 S12"
})
})
]
});
return new sap.m.Page({
title: "Title",
content: [
oGridForm
]
});
}
});
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("grid");
var app = new sap.m.App({initialPage:"idgrid1"});
var page = sap.ui.view({id:"idgrid1", viewName:"grid.grid", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
<style>
.labelClass{
color:red;}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
output:
No comments:
Post a Comment