티스토리 뷰

정보 보관 ver1.0

레이아웃(기본 레이아웃, vBox, hBox)

James Wetzel 2013. 3. 25. 18:02

기본 레이아웃]

<%@ 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 panel1 = Ext.create("Ext.Panel", {

                    style: "background-color: red;",

                    html: "red"

                });


                var panel2 = Ext.create("Ext.Panel", {

                    style: "background-color: green;",

                    html: "green"

                });


                var panel3 = Ext.create("Ext.Panel", {

                    style: "background-color: blue",

                    html: "blue"

                });


                var rootPanel = Ext.create("Ext.Panel", {

                    items: [panel1, panel2, panel3]

                });


                Ext.Viewport.add(rootPanel);

            }

        });

    </script>


</head>

<body>

    <div style="display:none">

        <div id="panelContent">

            <table>

                <tr>

                    <td><button style="width:100px">버튼1</button></td>

                    <td><button style="width:100px">버튼2</button></td>

                </tr>

            </table>

        </div>

    </div>

</body>

</html>



vBox와 hBox 레이아웃]
<%@ 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 button1 = Ext.create("Ext.Button", { text: "버튼1" });
                var button2 = Ext.create("Ext.Button", { text: "버튼2" });
                var button3 = Ext.create("Ext.Button", { text: "버튼3" });

                var panel1 = Ext.create("Ext.Panel", {
                    layout: { type: "hbox", align: "middle", pack: "justify" },
                    items: [button1, button2, button3],
                    style: "background-color: #00ff00"
                });

                var button4 = Ext.create("Ext.Button", { text: "버튼4" });
                var button5 = Ext.create("Ext.Button", { text: "버튼5" });
                var button6 = Ext.create("Ext.Button", { text: "버튼6" });

                var panel2 = Ext.create("Ext.Panel", {
                    items: [Ext.create("Ext.Spacer"), button4, Ext.create("Ext.Spacer"), button5, Ext.create("Ext.Spacer"), button6, Ext.create("Ext.Spacer")],
                    layout: { type: "hbox", align: "middle", pack: "justify" },
                    style: "background-color: #0000ff"
                });


                var rootPanel = Ext.create("Ext.Panel", {
                    layout: { type: "vbox", align: "stetch", pack: "start" },
                    items: [panel1, panel2]
                });

                Ext.Viewport.add(rootPanel);
            }
        });
    </script>

</head>
<body>
   
</body>
</html>


flex 레이아웃]

<%@ 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 panel1 = Ext.create("Ext.Panel", {

                    flex: 1,

                    style: "background-color:red; color:white;"

                });


                var panel2 = Ext.create("Ext.Panel", {

                    flex: 3,

                    style: "background-color:green; color:white;"

                });


                var panel3 = Ext.create("Ext.Panel", {

                    flex: 1,

                    style: "background-color:blue color:white;"

                });


                var rootPanel = Ext.create("Ext.Panel", {

                    items: [panel1, panel2, panel3],

                    layout: {type: "hbox", align: "stretch", pack: "center"}

                });


                Ext.Viewport.add(rootPanel);

            }

        });

    </script>


</head>

<body>

   

</body>

</html>


Fit 레이아웃]

<%@ 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 panel = Ext.create("Ext.Panel", {

                    html: "<img src=''>",

                    scrollable: true

                });


                var rootPanel = Ext.create("Ext.Panel", {

                    layout: "fit",

                    items: [panel]

                });


                Ext.Viewport.add(rootPanel);

            }

        });

    </script>


</head>

<body>

   

</body>

</html>


728x90
반응형
저작자표시 비영리 동일조건 (새창열림)