도킹된 컴포넌트
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE HTML>
<html manifest="" lang="kr">
<head>
<meta charset="UTF-8">
<title>MobileWeather</title>
<script src="../../touch/sencha-touch-all-debug.js" type="text/javascript"></script>
<link href="../../touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Ext.application({
name: "MobileWeather",
launch: function () {
var dockedItem1 = Ext.create("Ext.Panel", {
docked: "top",
style: "background-color:red;",
html: "top"
});
var dockedItem2 = Ext.create("Ext.Panel", {
docked: "left",
style: "background-color:gray;",
html: "left"
});
var dockedItem3 = Ext.create("Ext.Panel", {
docked: "bottom",
style: "background-color:yellow",
html: "bottom"
});
var dockedItem4 = Ext.create("Ext.Panel", {
docked: "right",
style: "background-color:green",
html: "right"
});
var rootPanel = Ext.create("Ext.Panel", {
//items에 추가된 도킹된 컴포넌트의 순서는 배치에 영향을 미친다.
//items: [dockedItem1, dockedItem2, dockedItem4, dockedItem3]
items: [dockedItem1, dockedItem2, dockedItem3, dockedItem4]
});
Ext.Viewport.add(rootPanel);
}
});
</script>
</head>
<body>
</body>
</html>