固定布局(Anchor Layout)

Posted 周四, 06/19/2008 - 13:36 by admin

演示(demo)地址在文章最后.

效果图如下:

主要文件anchor.html。

anchor.html

<html>
<head>
    <title>Anchor Layout</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:'anchor',
                anchorSize: {width:800, height:600},
                items:[{
                    title:'Item 1',
                    html:'wtf',
                    width:800,
                    anchor:'right 20%'
                },{
                    title:'Item 2',
                    html:'wtf',
                    width:300,
                    anchor:'50% 30%'
                },{
                    title:'Item 3',
                    html:'wtf',
                    width:600,
                    anchor:'-100 50%'
                }]
            });
        });
    </script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
</body>
</html>

演示地址:http://extjs.org.cn/extjs/examples/form/anchoring.html